|
|
|
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 | | | Higly Customizable Javascript Calendar Script
Categories : Java Script, Calendar, Date Time, HTML, CSS | | | PHP Calendar
Categories : PHP, Calendar, Date Time, Java Script, 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 | | | Kewl Date Example
Categories : PHP, HTML and PHP, Date Time, CSS, 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 | | | Simple PHP control CSS Calender
Categories : PHP, HTML and PHP, Calendar, Date Time, CSS | | | Show or Hide your Content using Javascript
Categories : Java Script, HTML, CSS, Beginner Guides | | | Find the day of the week for any given year/month/day.
Categories : PHP, Date Time, Data Validation, Algorithms, Beginner Guides | | | Customizable Calendar Class
Categories : HTML and PHP, Date Time, PHP, PHP Classes, Calendar | | | Shows the current time as a PNG-image. This script does not use the GD
library. You can use it as a benchmark (because it's slow), or as a quick
reference for implementing a simple PNG-file generator.
Categories : Graphics, Zlib, Calendar, PHP, Date Time | | | time date modified changed last getlastmod last footer
Categories : Misc, Date Time | |
|
|
|
