<-- IE錯誤修正 --> 文青必備!Instagram.css 使用樣式表為網站圖片加入 IG 濾鏡效果 - RiS社群 | FileMaker 中小企業應用



快速發表主題
返回   RiS社群 | FileMaker 中小企業應用 > 交流平台 / 老少咸宜 (General forums) > 創意新點子 + 遇(預)見新未來 + IT 新知/技術 (Future) > 精選好用APP等相關網站資源 (Website Reviews)

精選好用APP等相關網站資源 (Website Reviews) 本區除了同步注入"免費資源網路社群 "最新資訊外,也不定時將一些提供更多值得關注的App或網站介紹,盡量滿足男女老少們喜愛!


FileMaker 教學 FileMaker 14 教學課程 FileMaker 教學
FileMaker 課程(僅接受公司/單位或1對1專屬教學

輕鬆學會FileMaker
帶你認識FileMaker

FileMaker俱樂部 加入FileMaker獲取官方資訊 FileMaker俱樂部
FileMaker俱樂部

回覆
 
LinkBack 主題工具 顯示模式
  #1 (permalink)  
舊 3 週前
進階會員
 
註冊日期: 2008-08-09
住址: 台灣/台北
文章: 5,660
燈泡 文青必備!Instagram.css 使用樣式表為網站圖片加入 IG 濾鏡效果

Click the image to open in full size.(Copyright: scyther5 / 123RF Stock Photo)近年越來越多人使用的 Instagram,這款圖片影片分享社群應用程式開始於 2010 年,後來在 2012 年被 Facebook 收購成為旗下服務,Pseric 很早就開始使用 Instagram,最令我印象深刻的是「濾鏡」(Filters)功能(也算是早期大家會想玩 IG 的原因),可將照片快速轉成很有質感的色調,以前還沒開始流行時大家都以為你怎麼這麼會拍照,後來幾乎大部分跟拍照或圖片編輯有關的應用都已內建濾鏡。



當然濾鏡有其可取之處,對於不知道要怎麼調整相片細節的一般使用者來說可快速讓本來拍得不那麼好的照片加分不少,只是久了大家也看膩、麻痺了,濾鏡再怎麼調都不如一開始就拍出好看照片,因此透過各種選項來調整細節,就能讓照片看起來更有自己的風格。

之前曾在網路上看到很有趣的專案,本文要介紹的Instagram.css」就是透過 CSS 語法來為相片加入 Instagram 濾鏡效果,如果你想讓自己網站或部落格內的相片有 IG 文青感,那麼不用再丟進去應用程式處理,直接套用 CSS 就能做出相同效果。

Instagram.css 在網站上展示 CSS 效果,看起來就跟 Instagram 處理後如出一轍,這個專案開放原始碼,可直接從 GitHub 頁面來獲取原始碼或免費下載,透過 figure 語法指定樣式屬性就能讓相片套用某一種濾鏡效果,有興趣的朋友不妨來這裡研究一下。

網站名稱:Instagram.css
網站鏈結:https://picturepan2.github.io/instagram.css/

使用教學

STEP 1

開啟 Instagram.css 專案首頁,可以看到這些套用 CSS 濾鏡特效的範例,命名方式也和 IG 相同,那麼要怎麼樣把效果套用到自己的網站呢?首先,點選上方「GitHub」鏈結來存取專案頁面。

Click the image to open in full size.

STEP 2

從 GitHub 的 /dist/ 路徑就能找到 instagram.css(或已壓縮最小化的 instagram.min.css)兩個檔案。

Click the image to open in full size.

依照 Instagram.css 的 GitHub 頁面說明,將樣式表下載、上傳到自己空間,透過語法來載入就能使用。如果你只會用到其中幾種濾鏡效果,也可將 CSS 的部份段落複製出來使用,最後再以 figure 語法就能為圖片加入不同的特效。

Click the image to open in full size.

完整的濾鏡名稱可以在 GitHub 頁面找到。Instagram.css 使用 Autoprefixer 來確保大多數樣式可相容於早期的瀏覽器,對於主要瀏覽器來說,這些效果都可以被正常支援及顯示。

值得一試的三個理由:
  1. 以 CSS 樣式表為網站內的圖片套用 Instagram 濾鏡特效
  2. 免下載、安裝繪圖軟體,透過語法就能辦到
  3. 開放原始碼專案,可依照個人需求做細部調整修改
喜歡 文青必備!Instagram.css 使用樣式表為網站圖片加入 IG 濾鏡效果 嗎?歡迎將免費資源網路社群加入書籤,以 FacebookTwitterGoogle+ 追蹤更新,獲取更多科技新知及免費資源相關介紹教學。

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.


來源...

回覆時引用此篇文章
回覆

主題工具
顯示模式

發表文章規則
不允許您發表新主題
不允許您發表文章
不允許您上傳附件
不允許您編輯自已的文章

開啟 BB 代碼
關閉 HTML 程式碼
Trackbacks are 關閉
Pingbacks are 關閉
Refbacks are 開啟



所有時間均為 +9。現在的時間是 10:45 AM
Powered by vBulletin® 版本 3.7.2
版權所有 ©2000 - 2018,Jelsoft Enterprises Ltd.
Advertisement System V2.6 By   Branden
RiS 社群 ( 感謝正洋資訊顧問有限公司技術指導 ) - 使用3.7.2永久合法版權。
Ad Management by RedTyger



Content Relevant URLs by vBSEO 3.6.0 PL2