iT邦幫忙

2022 iThome 鐵人賽

DAY 15
0

今天將帶給大家濾鏡特效,分別有模糊、亮度、對比、灰階等,今天筆者會帶大家做出毛玻璃特效、悽涼風格以及復古風格的圖片,讓我們開始吧!


按照 tailwind 的慣例,同樣都能客製參數。
先匯入我們需要的圖片
https://ithelp.ithome.com.tw/upload/images/20220930/20152251R1SX8IQkhI.png
再加上想要的文字後,準備為無聊的圖片來點魔術吧!
https://ithelp.ithome.com.tw/upload/images/20220930/20152251CUmDynTaaT.png

  1. 毛玻璃 (Blur)
    Blur 的預設參數已有分模糊的深淺,將 blur- 樣式加入元素內,這裡以 blur-sm 為例:
    https://ithelp.ithome.com.tw/upload/images/20220930/201522518qy6C2PNLw.png
  2. 悽涼 (Grayscale)
    套用灰階的風格都會讓圖片增添一種非常淒涼的感覺:
    https://ithelp.ithome.com.tw/upload/images/20220930/20152251SqEIxUcC4L.png
  3. 復古 (Sepia)
    再來增添一點歷史氣息:
    https://ithelp.ithome.com.tw/upload/images/20220930/20152251m8OW8hYwzv.png

今天的介紹可說是最輕鬆的一次,主要是 filter 內的樣式沒有太多的變化,學 CSS 時第一次看到覺得有趣且發現 tailwind 竟然也有這種樣式可以快速套用且客製化,於是還是想分享給大家!
今天就算是小周末偷個懶了/images/emoticon/emoticon20.gif


上一篇
Day 14:背景圖片相關樣式【Tailwind – Background-image 應用】
下一篇
Day 16:偽元素竟然也可以寫在HTML裡?【Tailwind – 偽元素篇】
系列文
【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言