|
打過了趟深圳回來后，已經(jīng)快半個月，在廣州購書中心逛了下，發(fā)現(xiàn)2本前端書《重構(gòu)HTML-改善WEB應用的設計》、《CSS3 實戰(zhàn)》，看了一半《重構(gòu)HTML》，發(fā)現(xiàn)看不下去，里面寫的感覺不是很受用，可能是現(xiàn)在水平有限，參透不了，于是放下看《CSS3》。之前腦子里面的CSS3都是在網(wǎng)上看的。這次買了本書，踏踏實實的打個大框架出來，免得過段時間不用又亂了文理，基本把書過了一遍后，手也就癢癢的，想做個東西出來。
相信大家有看過這個例子：3D盒子，應該他是最早這樣寫的吧，書上第282頁有個綜合實戰(zhàn)“設計動態(tài)立體盒子”的例子，實現(xiàn)方式跟它一樣，我的盒子也是以它為原型來設計的，不過在實現(xiàn)方面有做修改、優(yōu)化，以及增添了一些細節(jié)，下面是我的盒子Firefox截圖：
- 透明化了盒子，通透性強了，因為透明了，所以背部的三個面也就要做出來了，所以總共6個面，比原作多3個；
- 投影鏡像，讓盒子的立體感更強烈；
- 邊角線的處理，讓盒子面與面之間過渡和諧
你可以點擊這里下載 源代碼（只是寫了moz下的效果，webkit的就沒寫了）
盒子的HTML結(jié)構(gòu)很簡單，如下：
<div class="box">
<div class="inBox box_before">前</div>
<div class="inBox box_back">后</div>
<div class="inBox box_left">左</div>
<div class="inBox box_right">右</div>
<div class="inBox box_top">上</div>
<div class="inBox box_bottom">下</div>
</div>
一個大盒子包住“前、后、左、右、上、下”6個面，因為定位產(chǎn)生層高的關(guān)系，所以它的順序其實是“后、下、左、前、上、右”，下面的div就會自然的疊在上面，就可以不寫z-index了。
出處：藍色理想
責任編輯：bluehearts
上一頁 下一頁 純CSS3透明水晶盒 [2]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 純CSS3透明水晶盒 [1]
第 2 頁 
