filter.css 利用 CSS 就能將照片套用各種不同的風格特效

filter.css 利用 CSS 就能將照片套用各種不同的風格特效

在網頁要呈現照片的特殊效果,難免都要用到圖片編輯軟體中的濾鏡功能,不過現在透過 CSS 也能達到濾鏡的功能,filter.css 這個網站提供一組 CSS 語法並搭配說明,讓 div 區塊中的圖片就能立即套用濾鏡,呈現不同的風格特效。

§相關文章,還可以參閱:

如何使用 filter.css?

1.使用瀏覽器進入 filter.css 網站,可先來看看各種濾鏡所做出的特效。

filter.css 利用 CSS 就能將照片套用各種不同的風格特效

2.將網頁下拉,點擊[ Get'em on GitHub ],進入 CSS 語法下載網頁後,再點擊[ Download ZIP]。

filter.css 利用 CSS 就能將照片套用各種不同的風格特效

filter.css 利用 CSS 就能將照片套用各種不同的風格特效

3.解壓縮後,將 filter.css 檔,複製到要使用的網頁開發專案中;接下來便是要如何使用,將上圖的網頁頁面繼續往下,便可看到說明。

filter.css 利用 CSS 就能將照片套用各種不同的風格特效

filter.css 利用 CSS 就能將照片套用各種不同的風格特效

4.實作。

filter.css 利用 CSS 就能將照片套用各種不同的風格特效

filter.css 利用 CSS 就能將照片套用各種不同的風格特效

※實測目前不支援 Microsoft IE 與 Edge 瀏覽器

製作網頁如果預期會有較長時間的等待,通常會在等待的時間加入一個 loading 的動畫圖示來告知,避免用戶誤以為網頁沒有反應而離開,想要加入一個等待載入的動態圖示,可以來試試 loading.io 網站所提供可自訂圖示動態速度與顏色的動畫圖示產生器,不但可產生 GIF 檔外,還可產生出 CSS 或 SVG 檔,還提供範例語法,讓你輕易地運用到網頁裡。

使用虛擬桌面來將工作進行分門別類的區分,以增進工作效率,是很多 Windows 作業系統使用者想要的作法,但長久以來 Windows 作業系統想要使用虛擬桌面的功能,都只能靠其他應用程式來輔助,而在 Windows 10 則是將虛擬桌面納入內建的標準功能,而其使用的快速鍵則是 Windows + Tab 來列出虛擬桌面,當然,我們可使用滑鼠來操作工作列上的[ 工作檢視 ]同樣可管理虛擬桌面。