作者:楊家榮 / 臺灣大學計算機及資訊網路中心程式組幹事
當網頁載入instagram.css濾鏡特效包,便可輕鬆即時套上各種色調的濾鏡特效,完全不需懂得如何操作與修改各類參數值,只需在您圖片上的CSS寫入您要的效果名稱即可達成。
過去您拍完相片上傳至臉書或部落格網站後,是否有時覺得相片似乎還少了一種感覺,不夠特別,不夠吸引人?有時想讓相片表現出歲月滄桑或其他情境的感覺,我們常會利用Photoshop或手機美圖APP等軟體工具來修圖。透過這類修圖工具慢慢調整色調、亮度、對比、曲線、飽和度等複雜參數,讓原本較為單調的相片變化出不同的風格與特色。
但並非每個人都知道怎樣調整修改才能調出好看的色調圖片,常常不斷耗時嘗試微調,卻一直調不出自己想要的感覺;而Instagram社群網站就有這種方便的應用程式功能,廣受大眾喜愛,能把您上傳的照片即時套用很有質感的風格濾鏡,讓您的照片與眾不同,大大提高朋友們的觀看率。
在GitHub網站中,有網友分享instagram.css濾鏡特效包,當網頁載入這支CSS濾鏡包,便可輕鬆即時套上各種色調的濾鏡特效,完全不需懂得如何操作與修改各類參數值,只需在您圖片上的CSS寫入您要的效果名稱即可達成。
Instagram.css濾鏡特效包
前往Instagram.css專案網頁:https://github.com/picturepan2/instagram.css。
進入專案網頁後,頁面上半部為該專案的維護與更新概況資訊(圖1),下半部為使用教學說明。
圖1:專案檔案更新概況
點選頁面上方的dist資料夾圖示,進入dist目錄內,可看到2支CSS檔案,選擇下載壓縮後的版本instagram.min.css,使用壓縮過後CSS的版本檔案,可節省網站流量並加快載入速度(圖2)。
圖2:Instagram.css主檔案
將這支instagram.min.css檔案插入您網頁HTML檔案中的<head>標籤區塊(圖3),其範例程式碼為:<link rel="stylesheet" href="css/instagram.min.css">。
圖3:載入instagram.css檔案
再把您的圖片插入HTML檔案結構的<body>區塊中(圖4),範例程式碼為:<img src="img/sample.jpg">。
圖4:載入圖片
在圖片程式碼外圍用另一個特殊標籤<figure>包圍住圖片程式碼(圖5),其範例程式碼為:<figure class="filter-[濾鏡名稱]"> <img src="img/sample.jpg"></figure>;再將您想使用的濾鏡特效名稱填入該特殊標籤中的[濾鏡名稱],即可馬上套用濾鏡效果。
圖5:套用濾鏡特效
使用者僅需透過簡單網頁語法,不需另外下載安裝繪圖軟體,不會破壞或改變原始圖檔,經由CSS樣式來轉換網頁圖片的風格色調,而且程式碼可不斷重複利用、修改複製;與透過軟體後製修改圖檔來相比,省去更多的時間、圖檔的體積與網路的流量。
為能完整呈現CSS濾鏡效果,各家瀏覽器有其最低的版本要求:
‧Chrome (18+)
‧Microsoft Edge (13+)
‧Firefox (35+)
‧Safari (6+)
‧Opera (15+)
以下為套用各種濾鏡效果的呈現方式:
‧1977 filter-1977
��
‧Aden filter-aden
‧Amaro filter-amaro
‧Ashby filter-ashby
‧Brannan filter-brannan
‧Brooklyn filter-brooklyn
‧Charmes filter-charmes
‧Clarendon filter-clarendon
‧Crema filter-crema
‧Dogpatch filter-dogpatch
‧Earlybird filter-earlybird
‧Gingham filter-gingham
‧Ginza filter-ginza
‧Hefe filter-hefe
‧Helena filter-helena
‧Hudson filter-hudson
‧Inkwell filter-inkwell
‧Kelvin filter-kelvin
‧Kuno filter-juno
‧Lark filter-lark
‧Lo-Fi filter-lofi
‧Ludwig filter-ludwig
‧Maven filter-maven
‧Mayfair filter-mayfair
‧Moon filter-moon
‧Nashville filter-nashville
‧Perpetua filter-perpetua
‧Poprocket filter-poprocket
‧Reyes filter-reyes
‧Rise filter-rise
‧Sierra filter-sierra
‧Skyline filter-skyline
‧Slumber filter-slumber
‧Stinson filter-stinson
‧Sutro filter-sutro
‧Toaster filter-toaster
‧Valencia filter-valencia
‧Vesper filter-vesper
‧Walden filter-walden
‧Willow filter-willow
‧X-Pro II filter-xpro-ii