Alwane 網頁配色擷取工具,輸入網址就能取得顏色代碼相關資訊

Alwane 網頁配色擷取工具,輸入網址就能取得顏色代碼相關資訊

如果想知道某個網站配色方式,除了打開開發人員工具或是檢視原始碼,也有第三方服務可以使用,即使無法完整複製別人的配色,也能快速得知網站使用的顏色代碼或配色模式,取得顏色的色碼或色彩名稱。有沒有任何更直覺、簡單的方式來完成這些工作呢?若你有類似的需求,接下來要介紹的服務或許可以滿足,這項服務會擷取特定網頁使用的顏色,讓顏色相關資訊更一目瞭然。

CSSgram 以 CSS 和 Sass 編寫而成 Instagram 濾鏡效果

CSSgram 以 CSS 和 Sass 編寫而成 Instagram 濾鏡效果

很多早期會使用 Instagram 的朋友都很喜歡對相片套用濾鏡效果的設計,雖然現在有各種應用程式可以做到,甚至成為內建相片編輯功能,但在當年可以說非常強大,無論相片有沒有拍好,只要加入濾鏡質感馬上提升,還能帶出本來沒有的文青風格。不得不說濾鏡是 IG 會獲得廣泛使用者的原因之一,在這幾年它也陸續加入更多濾鏡效果,如果你很喜歡這些風格,也可以將它使用於自己的網站或部落格。

Darkmode.js 為網站加入深色模式,只要一段程式碼就能實現

Darkmode.js 為網站加入深色模式,只要一段程式碼就能實現
Copyright : Brian Jackson / 123RF Stock Photos

macOS 10.14 Mojave 加入全新「深色模式」功能,iOS 13 預告也會加入此模式,如果你曾經將電腦切換為深色,應該會發現有些應用程式可完美支援,也會一併轉為暗色介面,但在不支援深色模式的應用程式表現出來的顏色會更刺眼,嚴重影響到使用體驗。如果你是應用程式開發者,可能後續都得再加上對於深色模式的支援,讓顏色更接近暗色,亦可在使用者選擇不同模式時自動調整為最合適的配色效果。

Gmail Classic Theme 讓信箱重新回到舊版介面(Chrome 擴充功能)

Gmail Classic Theme 讓信箱重新回到舊版介面(Chrome 擴充功能)

Google 旗下的免費信箱服務 Gmail 堪稱是最成功的產品之一,2004 年僅提供內部員工和受邀請的使用者進行測試,在當時來說提供 1 GB 容量簡直不可思議!直到 2007 年 Google 宣布將 Gmail 註冊完全開放,直到今日應該已經成為每個人都會有的 Email 信箱。如果你是 Gmail 使用者應該會發現 2018 年四月 Gmail 有了新介面,轉為 Google 現用的 Material Design 風格,也將字型改為 Product Sans(一款由 Google 開發的字型)。

如何讓網頁變成黑白?使用 CSS Filter 套用濾鏡樣式表教學

如何讓網頁變成黑白?使用 CSS Filter 套用濾鏡樣式表教學

上個月台灣發生震驚社會的宜蘭普悠瑪列車出軌事故,造成許多旅客輕重傷甚至死亡,也對台灣交通運輸安全打上一個大大的問號,各種資訊隨著時間不斷被揭露出來,讓我懷疑需要多好的運氣才能平安度過每一天?發生憾事後再多道歉和賠償也無法撫平傷痛,或許平常就該認真謹慎面對所有大小事情,扣除天災更多的是人禍,往往都是過於疏忽怠慢、不夠嚴謹造成的。

Site Palette 從網站獲取配色,快速產生完整調色盤資訊(Chrome 擴充功能)

Site Palette 從網站獲取配色,快速產生完整調色盤資訊(Chrome 擴充功能)

最近介紹過一些令人印象深刻的色彩工具,多半都是 Google Chrome 外掛,例如我個人很喜愛的「CSSPeeper 為設計師量身打造,更聰明視覺化檢視網站 CSS 樣式表」,能以更簡單、有組織性的方式呈現網站樣式和各元件,對開發者來說是非常實用的工具。當然瀏覽器可以做的事情也很多,包括一行程式碼將瀏覽器變成網頁編輯器,直接從網頁中修改內容,在開發網站測試時會省時省事很多。

CSSPeeper 為設計師量身打造,更聰明視覺化檢視網站 CSS 樣式表(Chrome 擴充功能)

CSSPeeper 為設計師量身打造,更聰明視覺化檢視網站 CSS 樣式表(Chrome 擴充功能)

對於網頁設計或開發者來說,想要改善使用者網頁瀏覽體驗通常會從參考其他網站設計著手,我在發現不錯的網站都會去看一下原始碼或樣式表,雖然 Google Chrome 本身就有強大的開發人員工具可以使用,但如果遇到要查詢某個網頁使用的字型或色彩時還是習慣以 Fontface NinjaType Sample 這類工具快速找到我要的資訊。

文青必備!Instagram.css 使用樣式表為網站圖片加入 IG 濾鏡效果

文青必備!Instagram.css 使用樣式表為網站圖片加入 IG 濾鏡效果
(Copyright: scyther5 / 123RF Stock Photo

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

CSS Reference 前端設計師必備手冊!收錄 CSS 樣式表屬性說明及範例

CSS Reference 前端設計師必備手冊!收錄 CSS 樣式表屬性說明及範例
(Copyright: welcomia / 123RF Stock Photo

前幾天介紹過「HTML Reference 網頁開發者必備手冊!收錄所有 HTML 元素及屬性說明」,有讀者說這個網站比 W3Schools 更方便快速,對於開發者來說實在非常實用,但可能有些人和我一樣接觸 HTML 機會不多,反倒是很常要改網頁樣式,假如你平常會需要和 CSS 為伍,本文要推薦的網站會更適合你。

Gutenberg 開放原始碼網頁列印樣式下載,讓輸出網頁更正確美觀

Gutenberg 開放原始碼網頁列印樣式下載,讓輸出網頁更正確美觀

現今已經很少人會把網頁內容列印出來,PDF 表格表單大多能在線上處理,再加上家裡可能也不太放印表機,其實超商就能列印影印傳真,實在是沒有必要再添購一台機器放家裡佔空間。但對網頁設計者來說,有時候仍得兼顧到使用者列印內文的需求,但要怎麼樣才能讓列印出來的畫面符合使用者期待呢?至少列印時該出現的部分要出現,不該出現的廣告也盡量避免,顏色什麼的調整一下,其實可以透過 CSS 樣式來最佳化列印效果。