2011年9月4日星期日

CSS網頁制作實例教程:非常酷的日期效果

CSS網頁制作實例教程:非常酷的日期效果

http://www.inspirr.com

LearningjQuery.com的博客日志上的日期效果非常的酷,如下圖:

其中文字的樣式和垂直的年份就會告訴你這不是用圖片來完成的。而且在標記語言中日期信息是是以文字出現的,就像通常的那樣。
通過Firebug查看,代碼非常簡潔漂亮!
很明顯每一個日期并沒有各自的圖片。它們都出自同一張圖片(css sprites!),圖片的不同地方被放置上了不同的內容:天、月和年。也許你會記得這和一年前Joost de Valk posted about 上的技術是一樣的。
來看一下這張漂亮的圖片:
HTML代碼:
1 <div class="postdate"> 2 <div class="month m-06">Jun</div> 3 <div class="day d-30">30</div> 4 <div class="year y-2009">2009</div> 5 </div> 有一個外部包裝和三個區域。我們就會知道如何組合這些部分:
在一個CMS(內容管理系統),例如wordpress中,背后的代碼應該是這樣:
1 <div class="postdate"> 2 <div class="month m-<?php the_time('m') ?>"><?php the_time('M') ?></div> 3 <div class="day d-<?php the_time('d') ?>"><?php the_time('d') ?></div> 4 <div class="year y-<?php the_time('Y') ?>"><?php the_time('Y') ?></div> 5 </div> CSS代碼
CSS才是精靈發揮作用的地方。利用我們已經在HTML代碼中設置的特殊的類名稱,我們可以設置使用圖片的哪一部分。
首先,我們給父元素應用相對位置定位。然后我們給其中的三個部分應用絕對定位。我們讓這三部分使用相同的圖片(我們的精靈),設置它們各自的高度和寬度,再將文字移除出頁面。
然后,我們設置每一月(12種可能),每一天(31種可能)和每一年(設置了10年)使用背景圖片的不同位置。
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 4px;} 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 ... 希望你能喜歡!
原文:Date Display Technique with Sprites

  Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |

没有评论:

发表评论