標籤:ATX rcc pap w3g kde gid ict cuc center
我們有時候想在頁面顯示一個公告或使用者提示資訊。
一個經常使用設計是使用書籤形狀。
我們能夠給書籤加入卷角效果。以使其更為逼真。所謂的“卷角”實際上能夠用小角度傾斜的陰影製作效果來類比。
用CSS3的虛擬元素實現這個效果非常easy。
先給出一個執行個體。我們在WOW網站頁面左側邊欄實現了例如以下的效果(紅框內):
我們再來看看詳細實現。
首先建立一個div元素容納文本資訊(能夠包括很多其它元素),class取名為“狗耳朵”也就是卷角的意思:
<div class="dog-eared-tip">put your tips here</div>
然後編寫例如以下的CSS代碼:
.dog-eared-tip{ padding: 7.5px 5px 7.5px 20px; background: #DEAA2F; font-size: 13px; position: absolute; text-align: center; width: 100%; color: black;}.dog-eared_tip:before, .work_tip:after { content: ""; position: absolute; z-index: -2; -moz-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); bottom: 15px; box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); height: 50%; left: 10px; max-height: 100px; max-width: 300px; width: 50%;}.dog-eared_tip:after { -moz-transform: rotate(3deg); -webkit-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); left: auto; right: 10px;}
上面的代碼首先設定了div的經常使用樣式如底色、字型、置中、邊距等。
然後為該div的:before和:after虛擬元素設定框陰影(box-shadow)和小角度旋轉(rotate方法),
並把before和after的位置放在div的底部,而且z序列為負數。這種實際效果就是虛擬元素本身被div所遮擋。可是剛好使得其外圍陰影部分露出底部。
注意,這裡請記得不要給div設定overflow不可見的樣式。否則陰影不可見。
基本上好了,還差最後一步,兩邊陰影的傾斜度在物理學上是對稱的,所以我們還須要調整一下:after虛擬元素的傾斜角度(-3°調整為3°)。
這樣:before相應於標籤的左下邊角。:after相應於標籤的右下邊角的捲曲陰影。
本例在IE11/Chrome/FF/Edge下能夠工作。
你還能夠使用CSS3中的偽類:hover和transition屬性。在本例基礎上加入滑鼠移至上方效果,
也就是當使用者懸停在書頁上時。呈現卷角被緩緩撫平的效果,我們把這個稱之為“會呼吸的紙”。
詳細可參考WOW首頁的實現。
by iefreer
怎樣使用CSS3實現書頁(書本)卷角效果