css陰影效果 (drop shadows)
一點陰影可以給平板的設計增加縱深的感覺, 很多時候我們都是直接用photoshop直接製作帶陰影的以供使用, 這裡介紹的是一種不需要修改, 而只需要用css完成的技巧.
網頁教學網
原理:給
備用的陰影影象 shadow.gif
html**如下:
網頁教學網
css**如下:
.image_shadow紅色**部分是為ie 6準備的, 不然....image_shadow img
clagnut陰影 : 網頁教學網
richard rutter提供了乙個類似的陰影方法, 他用的是相對定位來偏移影象.
css**如下:
.image_shadowwebjx.com.image_shadow img
webjx.com
上面的陰影都有點生硬(hard), 我們可以通過建立乙個額外的div標籤, 再運用乙個帶透明度的png蒙板來遮蓋陰影的邊緣.
具有alpha的陰影蒙板 shadow_mask.png
webjx.com
html**如下:
css**如下:
.image_shadow效果如下:.image_shadow div
.image_shadow div img
網頁教學網
網頁教學網
webjx.com
對於ie 6以下不支援png-24的透明效果, 我們要用到filter 和 hacks了
* html .images_shadow div另還有類似css sprites的方法建立陰影, 同樣可以做到自然. 但是額外標籤過多, 不推薦網頁教學網
CSS滑動門技術
製作網頁時,為了美觀,會製作設定特殊形狀的背景,裡面的字數不一樣,為了使各種特殊形狀能夠自適應元素中文字內容的多少,出現了css滑動門技術.是各種特殊形狀的背景能夠根據文字內容的多少拉伸滑動,可用性更強.最常見的是各種導航欄的滑動門.使用精靈技術 主要是背景位置 和padding撐開盒子,找一很長的...
css滑動門技術
為了使各種特殊形狀的背景能夠自適應元素中文字內容的多少，出現了css滑動門技術。使各種特殊形狀的背景能夠自由拉伸滑動，以適應元素內部的文字內容，可用性更強。最常見於各種導航欄的滑動門。工作原理 滑動門技術的關鍵主要在於拼接，利用css精靈sprite 主要是背景位置position 和盒子paddi...
盒子陰影 精靈技術 滑動門
我們可以設定盒子的陰影效果，可以使盒子更加美觀 語法格式box shadow 水平陰影 垂直陰影 模糊距離 陰影顏色 內 外陰影 h shadow 必需填寫，水平陰影的位置，允許為負值 v shadow 必需填寫，垂直陰影的位置，允許為負值 blur 模糊距離，可以不必填寫 spread 陰影的顏色...