【設計資源】 – 「 Image Effects 」 : 可線上套用 CSS 濾鏡特效好站

今天飛肯小編要來跟大家分享的網站是 : 「 Image Effect 」,
究竟這個網站有甚麼特別好康的呢?

畢竟,有一些網頁設計初學者,不一定懂得如何使用 Photoshop 直接做圖片的後製處理,
再加上,假設有時需要將圖片轉換成 CSS 語法的情況之下,
這時,小編所介紹的這個網站就可以幫得上忙囉!

網站作者提供了多達20種免費使用的線上 CSS 濾鏡特效,
可讓大家在上傳自己的圖片之後,任意套用濾鏡並可立即觀看影像效果,
同時自動產生 CSS 或 SCSS 的語法碼,只要拷貝之後就可以使用在網頁上面了。

這麼操作簡易又便利的網站,趕緊一起來交個朋友吧~ ^_^

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】 - 「 Image Effects 」 : 可線上套用 CSS 濾鏡特效好站 - index


「Image Effects」- CSS 濾鏡特效

進入首頁,網站已先提供一張原始無調整之素材,作為範例:

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】 - 「 Image Effects 」 : 可線上套用 CSS 濾鏡特效好站 - 1

在上排選項中,小編先隨意點了「 Watercolor 」水彩特效縮圖,
下方就會提供即時預覽,右方也馬上產生相對應的 CSS 濾鏡語法:

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】 - 「 Image Effects 」 : 可線上套用 CSS 濾鏡特效好站 - 2

再換一個特效試看看,這次小編點了「 Mosaic 」馬賽克拼貼效果:

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】 - 「 Image Effects 」 : 可線上套用 CSS 濾鏡特效好站 - 3

哇嗚~原來用來打馬賽克的語法,只需要這麼短短幾行啊!  (← 劃錯重點)


相信大家都注意到了~

在 CSS 語法的按鈕旁邊,也有提供 SCSS 語法給需要的同學:

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】 - 「 Image Effects 」 : 可線上套用 CSS 濾鏡特效好站 - 4

至於拷貝語法的按鈕,作者也幫大家一併準備好了~
只需要按下一鍵,就能複製整段語法,真貼心!

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】 - 「 Image Effects 」 : 可線上套用 CSS 濾鏡特效好站 - 5

編按:居然連夜視鏡的濾鏡特效也有耶! (← 再次劃錯重點 XD)


看了飛肯小編的示範,大家應該迫不及待想上傳自己的圖片來試用看看了吧!

提供上傳圖片的 icon 按鈕,就設在網頁右上角喔~

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】 - 「 Image Effects 」 : 可線上套用 CSS 濾鏡特效好站 - 6

假如大家想要更換成其他張圖片時,
只要點垃圾桶這個 icon 做取消,
接著,網頁就會回到一開始的原始範例圖片了。

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】 - 「 Image Effects 」 : 可線上套用 CSS 濾鏡特效好站 - 7


假如大家對這個網站感興趣,或是想了解更多的 CSS 濾鏡特效,可以點下圖所標示的連結處:

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】 - 「 Image Effects 」 : 可線上套用 CSS 濾鏡特效好站 - 8

這時,就會連結到關於此網站的說明頁面:

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】 - 「 Image Effects 」 : 可線上套用 CSS 濾鏡特效好站 - 9

作者在這邊,也有幫大家補充示範,如何寫在 HTML 裡的語法:

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】 - 「 Image Effects 」 : 可線上套用 CSS 濾鏡特效好站 - 10-1

最後,如果語法程度還不錯的同學,也可以跟這位作者來個互相交流與分享喔~   🙂

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】 - 「 Image Effects 」 : 可線上套用 CSS 濾鏡特效好站 - 11-2

 

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in Free Resource 好康報報, Good Design 好站報報 and tagged , , , , , .

迴響已被關閉。