今天飛肯小編要來跟大家分享的網站是 : 「 Image Effect 」，
究竟這個網站有甚麼特別好康的呢？
畢竟，有一些網頁設計初學者，不一定懂得如何使用 Photoshop 直接做圖片的後製處理，
再加上，假設有時需要將圖片轉換成 CSS 語法的情況之下，
這時，小編所介紹的這個網站就可以幫得上忙囉！
網站作者提供了多達20種免費使用的線上 CSS 濾鏡特效，
可讓大家在上傳自己的圖片之後，任意套用濾鏡並可立即觀看影像效果，
同時自動產生 CSS 或 SCSS 的語法碼，只要拷貝之後就可以使用在網頁上面了。
這麼操作簡易又便利的網站，趕緊一起來交個朋友吧~ ^_^
「Image Effects」- CSS 濾鏡特效
進入首頁，網站已先提供一張原始無調整之素材，作為範例：
【即時預覽濾鏡效果】
在上排選項中，小編先隨意點了「 Watercolor 」水彩特效縮圖，
下方就會提供即時預覽，右方也馬上產生相對應的 CSS 濾鏡語法：
再換一個特效試看看，這次小編點了「 Mosaic 」馬賽克拼貼效果：
哇嗚~原來用來打馬賽克的語法，只需要這麼短短幾行啊！ (← 劃錯重點)
【複製CSS / SCSS 語法】
相信大家都注意到了~
在 CSS 語法的按鈕旁邊，也有提供 SCSS 語法給需要的同學：
至於拷貝語法的按鈕，作者也幫大家一併準備好了~
只需要按下一鍵，就能複製整段語法，真貼心！
編按：居然連夜視鏡的濾鏡特效也有耶！ (← 再次劃錯重點 XD)
【上傳圖片】
看了飛肯小編的示範，大家應該迫不及待想上傳自己的圖片來試用看看了吧！
提供上傳圖片的 icon 按鈕，就設在網頁右上角喔~
假如大家想要更換成其他張圖片時，
只要點垃圾桶這個 icon 做取消，
接著，網頁就會回到一開始的原始範例圖片了。
假如大家對這個網站感興趣，或是想了解更多的 CSS 濾鏡特效，可以點下圖所標示的連結處：
這時，就會連結到關於此網站的說明頁面：
作者在這邊，也有幫大家補充示範，如何寫在 HTML 裡的語法：
最後，如果語法程度還不錯的同學，也可以跟這位作者來個互相交流與分享喔~ 🙂
當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！