On many blog sites we see date in Block. Here we are going to Made such date effect using a small css code and a image as background.
First of all we design a class post-date-bg which controls the layout and font for all the data we place inside that class.
Second class we have design is date which control site of date to be display.
Code is very simple and useful for beginner...
Please see code for details...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Css Based Date Layout </title>
<style type="text/css">
.post-date-bg {
float: left;
color: #FFC90A;
font-family:Trebuchet MS;
font-size: 0.9em;
text-align: center;
font-weight: bold;
margin: 0 8px 0 0;
padding: 4px 3px;
width: 55px;
height: 44px;
background: #494843 url('date.jpg') no-repeat;
}
.date {
font-size:25px;
line-height: auto:
}
</style>
</head>
<body>
<div class="post-date-bg">
<span>Feb</span><br />
<span class="date">28</span><br />
</div>
<div class="post-date-bg">
<span>Jan</span><br />
<span class="date">25</span><br />
</div>
</body>
</html>
Simple Javascript CSS Digital Clock Categories : Java Script , Date Time , CSS , Beginner Guides , Web Design Simple PHP control CSS Calendar Categories : PHP , HTML and PHP , Calendar , Date Time , CSS Kewl Date Example Categories : PHP , HTML and PHP , Date Time , CSS , Beginner Guides Higly Customizable Javascript Calendar Script Categories : Java Script , Calendar , Date Time , HTML , CSS PHPtabZ.. PHP controlled CSS Tab Menu Categories : PHP , CSS , Web Design CSS Vertical Navigator , With Coll CSS Look Categories : CSS , Web Design , Beginner Guides Rollover Image link effect using only single image. Categories : Web Design , HTML , CSS , Beginner Guides Change the background color of a website daily dynamically using the php date function to get the current day of the week and depending on that day, set the background color for the web page. Categories : PHP , Date Time , Beginner Guides , Web Design CSS Container BOX , with cool CSS Design Categories : CSS , HTML , Web Design PHP Calendar Categories : PHP , Calendar , Date Time , Java Script , CSS Calendar using Date function Categories : HTML and PHP , PHP , Date Time , Calendar This code consists of two parts, the first part is a .html file that uses a form to pass 3 date variables into day_of_week.php3 You input the mm/dd/yyyy of the day then
it prints what day of the week that day falls on. Categories : Date Time , PHP , Complete Programs Page Loading Message shown during the time your site's page is being loaded. Categories : HTML , CSS , Java Script A Timing Class Categories : PHP , PHP Classes , Date Time Spreadsheet Date Calculations in PHP Categories : PHP , Date Time , Excel