CSS各種濾鏡製作10種美術效果字

來源:互聯網
上載者:User
css|濾鏡   如果靈活應用CSS各種濾鏡的特點並加以組合,我們可以得到許多意想不到的效果。這是一些效果示範,供各位參考。

  效果一:

www.webjx.com

  這個效果用了shadow濾鏡,代碼如下:

filter:shadow(color=black,direction=135)

  效果二:

www.webjx.com

  用blur濾鏡做出的效果,代碼如下:

filter:blur(direction=135,strength=10)

  效果三:

www.webjx.com

  用dropshadow濾鏡做出的效果,代碼如下:

filter:dropshadow(color=#888888,offx=8,offy=8,positive=1)

  效果四:

www.webjx.com

  用glow濾鏡做出的效果,代碼如下:

filter:glow(color=royalblue,strength=5)

  效果五:

www.webjx.com

  這個效果用到了兩種濾鏡:shadow和alpha,代碼如下:

filter:alpha(opacity=100,finishiopacity=0,style=1)
shadow(color=#ff3366,direction=135)

  效果六:

www.webjx.com

  這個效果也用到兩個濾鏡mask和shadow,和本文最頂端的例子一樣,只是顏色不同,代碼如下:

filter:mask(color=#f7f7f7) shadow(color=royalblue,direction=135)


  注意:mask的顏色要和網頁背景色一致,字型的顏色由shadow決定。

  效果七:

www.webjx.com

  這個效果和效果六類似,效果六中的mask用的是和背景同樣的顏色,而本例mask則用的是紅色,同樣的,字型顏色由shadow決定。代碼如下:

filter:mask(color=red)
shadow(color=black,direction=135)

  效果八:

www.webjx.com

  如果說效果六的字型是陰文的話,那麼這個效果的字型應該算是陽文了,用兩個濾鏡實現mask和dropshadow,注意mask的顏色要和網頁背景色一致,或者把mask和chroma成對使用,也可達到同樣效果(下面有介紹)。代碼如下:

filter:mask(color=#f7f7f7f)
dropshadow(color=royalblue,offx=-3,offy=-3,positive=1)

  效果九:

www.webjx.com

  這個有光暈的文字用了兩個濾鏡glow和droshadow,代碼如下:

filter:glow(color=pink,strength=10)
dropshadow(color=royalblue,offx=3,offy=3,positive=1)

  效果十:

www.webjx.com

  用glow濾鏡可以做空心字,方法是將字型顏色設定為背景色,再將glow濾鏡的strenght的值設定為1或2即可。這個效果的代碼如下:

filter:glow(color=green,strength=2)
shadow(color=#66cc99 ,direction=135)


相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。