|
四、投影
原本想用reflect來實現(xiàn)投影的，但是效果不理想，投影會夾雜著原圖層的背景色，做不出來半透明到透明的效果來，而且reflect是webkit獨有的，firefox沒有，另想它法，然而不可能為了投影效果添加新標簽，得不償失，在拋棄IE的情況下自然而然的會想到偽類，真的很實用，上面邊框漸變已經(jīng)用了after，所以這里的投影我用before來做，同時，偽類做投影還有個好處：偽類層是相對于原圖層的，所以修改原圖層位置變形狀態(tài)的時候，偽類層也會相對的修改。定位在對應(yīng)的面正下方，向著用戶的只有前跟右，所以就做了兩個投影，如圖：
普通狀態(tài)盒子是閉合的，如“前”面所示，偽類層也跟著原圖層一樣進行了斜切變換，然后我設(shè)置了鼠標滑過就“打開”的效果，僅僅是這樣一行代碼：
.box .box_right:hover{-moz-transform:skew(0deg, 0deg);}
讓不用去修改偽類投影層，它自動的就適應(yīng)了原圖層，恢復(fù)了變換狀態(tài)，所以我說它真的很實用。
還有一個點，就是投影是由上至下呈半透明至透明的漸變，對于背景色這個很容易就可以實現(xiàn)，但是邊框呢？
我還沒處理邊框的狀態(tài)是這樣的：
下面的投影是“平”，所以邊框線的漸變投影必須得做出來，那怎么才能實現(xiàn)邊框的縱向漸變，網(wǎng)上有很多關(guān)于漸變邊框的做法，不過都是橫向的利用多重邊框的特性來制作，縱向的沒有，我嘗試用border來寫，給border-color寫個漸變，結(jié)果根本讀不出來，單單調(diào)節(jié)border的透明度也只是做到單色透明，不能漸變透明，觀察之后，想出了個“爛點子”，我上面說了，投影是由上至下呈半透明至透明的漸變，那么把兩個不透明的東西疊加在一起會怎么樣？
比如一個透明度為0.3的層疊在另外一個透明度為0.3的層上面，那就會在交界的地方產(chǎn)生一個透明度為0.6的區(qū)域，如圖：
說到這樣你應(yīng)該懂了吧，我寫了這么一句修改面的寬度：
.under .box_before:before{ width:201px;}
讓兩個面半透明面重疊，這樣中間重疊區(qū)域就會變深，做出了“偽邊框”的效果，至于到透明部分，
0 + 0 = 0，所以透明的區(qū)域依然透明，從而實現(xiàn)了邊框縱向漸變的效果。
出處：藍色理想
責任編輯：bluehearts
上一頁 純CSS3透明水晶盒 [4] 下一頁 純CSS3透明水晶盒 [6]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 5 頁 純CSS3透明水晶盒 [5]
