400-800-9385
網站建設資訊詳細

前端制作開發在頁面中投影的制作

發表日期:2020-12-14 10:15:15   作者來源:林志平   瀏覽:14   標簽:前端制作開發    
關于CSS3 filter:drop-shadow濾鏡與box-shadow和text-shadow的應用。
在網站制作中很常見設計圖中對投影的使用,加上一些輕微的投影,可以增加頁面內容的一些層次感、圖片的空間感、立體感,也能突出頁面內容的一些細節,視覺上也令人覺得更加真實。在項目制作中,我遇到了如下圖的效果需要制作,打算使用box-shadow、text-shadow和 filter:drop-shadow共同完成。文本的陰影用text-shadow制作,邊框的投影用box-shadow制作,三角形的投影用filter:drop-shadow制作。下面粗略總結一下關于box-shadow、text-shadow和 filter:drop-shadow的使用方法。
 

制作


 
關于頁面中的投影,大多是使用box-shadow制作出一些投影,譬如內容邊框的投影,不過有的地方使用box-shadow并不能完全達到想要的效果,那么就可以使用filter:drop-shadow,關于box-shadow和filter:drop-shadow的用法,如下:
box-shadow: 投影方式(inset是內陰影,outset是外陰影) X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影顏色;
filter:drop-shadow:  X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影顏色;
關于文本的陰影則可以用text-shadow制作。用法如下:
text-shadow:  X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影顏色;
關于三者的兼容性,box-shadow從IE9+瀏覽器就可以兼容了,filter:drop-shadow是要在IE13才可以兼容,而移動端的要從Android4.4才可以兼容。如果不考慮兼容,就可以使用。text-shadow從IE10開始兼容。
filter:drop-shadow是有穿透的效果,任何不是透明的部分都可以加上投影,包括在文本上也可以使用,甚至是半透明的圖片也可以使用。
例如下圖中的小圖標,第一個小圖標是有添加效果的png圖片,第二個小圖標是根據如下代碼制作的投影。

雖然是png圖但是投影是在整張圖的邊框,這個效果并不美觀,第三個小圖標是用如下代碼制作的投影
 
,是根據圖片非透明部分投影的,這個效果明顯是更美觀的。
 
 

制作效果

 
 
如沒特殊注明,文章均為方維網絡原創,轉載請注明來自http://www.xbqpzs.tw/news/5916.html
(^ω^)MG大丰收闯关 山东群英会任二稳赚技巧 北京麻将规则怎么算胡 1.10篮网vs雄鹿视频直播 十一选五任三稳赚50元 今天甘肃快3走势图解 喜乐彩票app下载单双 排列三试机号今日金胆 海南麻将无番的怎么打 南宁麻将十三幺多少分 ag捕鱼王2技术打法 快乐十分下期推算 陕西11选5开奖结果 快乐十分开奖 浙江飞鱼体彩开奖结果 乐享北京麻将官方下载 沈阳麻将群二维码