The date effect on Learningjquery.com's blog log is very cool, as shown in the following figure:
The style of the text and the vertical year will tell you that this is not done with a picture. and the date information in the markup language appears in words, as usual.
Through the Firebug view, the code is very concise beautiful!
It is clear that each date does not have a separate picture. They all come from the same picture (CSS sprites!), where different parts of the picture are placed: days, months, and years. Perhaps you will remember that this is the same technology as Joost de Valk posted about a year ago.
Take a look at this beautiful picture:
HTML code:
4 |
<divclass="year y-2009">2009</div> |
有一个外部包装和三个区域。我们就会知道如何组合这些部分：
In a CMS (Content management system), such as WordPress, the code behind this should be this:
2 |
<div class = "M" )?></div> |
3 |
<div class = "D" )?></div> |
4 |
<div class="year y-<?php the_time("Y") ?>"><?php the_time("Y") ?></div> |
CSS Code
CSS is where the Elves play a role. Using the special class name we've set in the HTML code, we can set which part of the picture to use.
First, we apply relative position positioning to the parent element. Then we apply absolute positioning to the three parts. We let these three parts use the same images (our sprites), set their respective heights and widths, and then remove the text from the page.
Then we set every January (12 possible), each day (31 possible) and each year (set for 10 years) using different locations for the background picture.
01 |
.postdate {position: relative;width: 50px;height: 50px;float: left;} |
02 |
.month,. Day,. Year { position : absolute text-indent : -1000em background-image : url (/wp-content/themes/ljq/images/dates.png); background-repeat : no-repeat } |
03 |
.month { top : 2px left : 0 width : 32px height : 24px } |
04 |
.day { top : 25px left : 0 width : 32px height : 25px } |
05 |
.year { bottom : 0 right : 0 width : 17px height : 48px } |
06 |
.m -01 { background-position : 0 |
07 |
.m -02 { background-position : 0 - 28px |
08 |
.m-03{ background-position: 0-57px;} |
09 |
... more like this ... |
10 |
.d -01 { background-position : -50px 0 } |
11 |
.d -02 { background-position : -50px -31px } |
12 |
.d-03{ background-position: -50px-62px;} |
13 |
... more like this ... |
14 |
.y -2006 { background-position : -150px 0 } |
15 |
.y -2007 { background-position : -150px -50px } |
16 |
.y-2008{ background-position: -150px-100px;} |
17 |
... more like this ... |
I hope you like it!
Original: Date Display technique with Sprites
