|
Written by Chetankumar Akarte
|
|
Friday, 16 March 2007 |
|
Page 1 of 3 CSS Date blocks
On many blog site you have see date in block format, A square contains month, date and year. Now we are going to design such CSS date block here. See example below…
For that purpose define class ‘dateblock’ which will define structure of block like size, background color, border etc. and to improve look of month, date and year we define class dateblock_mon, dateblock_day, dateblock_year respectively.
Put following piece of code in the head section, <head>… ___ …</head> tag of your web page.
<style type='text/css'>
div.dateblock{
line-height: 1.02em;
width: 40px;
float: left;
margin-top: 6px;
background: #F3F3F3;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
color: #aaa;
position: absolute;
text-align: center;
margin-right: 10px;
letter-spacing: 0.17em;
font-family: Arial, Verdana, sans;
padding: 1px;
}
span.dateblock_mon{
font-size: 9px;
display: block;
text-align: center;
color: #999;
font-family: Georgia, Arial, Verdana, sans;
}
span.dateblock_day{
font-weight: bold;
font-size: 15px;
display: block;
font-family: Georgia, Arial, Verdana, sans;
text-align: center;
position: relative;
top: -1px;
color: #336;
}
span.dateblock_year{
font-size: 9px;
display: block;
text-align: center;
color: #999;
font-family: Georgia, Verdana, Arial, sans;
}
</style>
|
|
Last Updated ( Monday, 23 July 2007 )
|