HTML Reserved Colors｜可用於設計和幫助開發的色票複製工具
閱讀時間約 2 分鐘
簡介
雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色，一直以來開發上都是在找好適合的顏色後，使用 Sass 將色票紀錄到變數再做使用，不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近 140 種網頁保留色，覺得似乎記住或是有系統的管理這些顏色有助於提升開發效率，因此決定做一個能夠幫助開發、同時也能作為美術作品來展示的 web app。色卡的外觀設計上，聯想到在 2020 年風靡一時的新擬物風格 Neumorphism (即 New Skeuomorphism)，對於使用亮暗陰影就能做出 3D 視覺效果而深受啟發，未曾嘗試過的好奇心驅使我完成了這次的作品。
外觀與互動設計
- 以 Neumorphism 新擬物風格作為主視覺，再加上可愛的圓角，呈現出比 Pantone 色票 更為討喜、耐看的色票卡片
- 顏色名稱的字體大小和上下間距，依照長度做三段漸進調整
- 封鎖不必要的文字選取、拖拉和右鍵點擊操作，並設計雙擊左鍵 (觸控設備點兩下) 直達頁首
- 在鼠標碰觸到顏色名稱、HEX/RBG 碼時，更換鼠標為滴管圖案以提示可複製區域，同時也將預設和客製化鼠標改得稍大一些，且統一顏色為較淡一點的黑色 (`#222`)
- 點擊複製顏色名稱、HEX/RBG 碼時，加入複製成功的音效，提升使用體驗
- 將網站設計為可在網址後加入 Query String 參數 `colors`，實現方便的顏色分享功能 (範例)
開發紀錄
- 自製 色彩資料 API
- 使用相似於 Preact 的 micro-library petite-vue，開發無需 build
- 排版採手機優先 (mobile first)，並使用 Flexbox 讓色票卡片達到自適應效果，以及使用 `rem` 和 `em` 作為元件單位，達成在任何尺寸裝置上 (120 吋超大螢幕也 ok！)，保持一致絕佳比例的響應式設計
- 將網頁元素預設為不可見 (`opacity: 0`)，等資料掛載後再配合動畫做淡入 (fade in)，讓動畫的銜接更為順暢
- 使用優雅的無聲定時播放音效方式來製造音檔緩存
留言0
查看全部
Ray C的沙龍 的其他內容
你可能也想看
迎新活動「方格新手村」：新格友註冊加入方格子，知名日料吃到飽餐券送給你！
👉 還不是 vocus 的會員嗎？點此註冊，參與新手村活動 👈
近期站上也出現了不少新格友，為了歡迎各位的加入，「方格新手村」隨之登場！
即日起，只要是新註冊帳號於活動期間內發佈 3 則文章，就有機會抽獎獲得知名日料吃到飽餐券。原格友也可以一起同樂，我們準備了小任
2024-06-21
103
什麼人適合國泰世華 CUBE App ？整理5大推薦原因你覺得哪間網銀的 App 最好用？
近幾年，我為了拿到很多家銀行的回饋，辦了很多家銀行的帳戶，數一數至少也有十幾間！
比較下來，國泰世華 CUBE App ，是我用起來最順手的 👍
國泰究竟贏在哪裡呢？讓我整理 5 個原因給大家～
發佈在
波琳達的沙龍
2024-07-05
68
川普當選，對台股是利多還是利空？川普在槍擊事件中所表現出來的英勇形象，讓他贏得美國總統大選幾乎已成定局。沒想到他隨口的一句話「台灣搶走美國的晶片生意，所以要付保護費」，就讓台積電在短短三天跌掉超過100 元，台股也跌掉1100點以上。台積電、台股會就此一路下跌嗎？未來該如何因應？
發佈在
施昇輝的小資幸福講堂
2024-07-20
82
HTML 程式札記 : 語意化標籤HTML 語意化標籤，不僅可以使網頁結構更加清晰、易於理解，也對搜索引擎優化(SEO)和提升網頁無障礙訪問性(Accessibility)有明顯的幫助。本文將介紹 HTML 語意化標籤的定義、重要性以及常見的語意化標籤。
發佈在
梧笙の領域展開
2024-02-11
4
HTML 程式札記 : <img> 圖片在網頁設計中，圖片是增強用戶體驗的重要元素。本文將介紹如何在 HTML 中使用圖片，包括基本語法、屬性設定等，幫助你更好的在網頁中使用圖片。
發佈在
梧笙の領域展開
2024-02-08
6
基礎HTML學習筆記一個網頁只會有一個h1
標籤(h1.p.img)裡面可以放多個屬性(src.background.color)
建立 HTML 環境
告訴大家這是html5的語法
關於整個專案的資訊放這裡面
頁籤標題
寫給別人看的要放這裡面
Emmet 預設安裝
/*語意使用英文*/
/*使
發佈在
王聖禮的沙龍
2021-08-30
3
【自學程式】HTML 屬性是什麼？解析常見 HTML 屬性用法在HTML程式語言中，有一種能讓HTML元素與其他程式語言（CSS、JavaScript）運作的更加順利的語法，它叫做「HTML屬性（HTML Attribute）」。
那HTML屬性是怎麼運作的呢？
2021-06-15
5
【自學程式】什麼是HTML標籤？初學網頁開法必備的四個HTML標籤HTML一種建立網頁架構的程式語言，對於初學程式的人來說，HTML是非常好上手的。
它沒有不像是CSS及JavaScript，沒有複雜的邏輯，只要更改程式碼，馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
2021-06-07
9
【自學程式】如果網頁是一台小車車？淺談網頁三巨頭：HTML、CSS及JavaScript
許多初學網頁開發的朋友們，一開始都不太理解HTML、CSS、 JavaScript之間的差異性，導致初期規劃學習計畫時毫無頭緒。
會有這樣的困擾，主要在於不了解HTML、CSS、 JavaScript之間的關係，以及這三者在網頁運作時所扮演什麼角色，導致越學越阿雜的狀況。
2021-05-18
10
迎新活動「方格新手村」：新格友註冊加入方格子，知名日料吃到飽餐券送給你！
👉 還不是 vocus 的會員嗎？點此註冊，參與新手村活動 👈
近期站上也出現了不少新格友，為了歡迎各位的加入，「方格新手村」隨之登場！
即日起，只要是新註冊帳號於活動期間內發佈 3 則文章，就有機會抽獎獲得知名日料吃到飽餐券。原格友也可以一起同樂，我們準備了小任
2024-06-21
103
什麼人適合國泰世華 CUBE App ？整理5大推薦原因你覺得哪間網銀的 App 最好用？
近幾年，我為了拿到很多家銀行的回饋，辦了很多家銀行的帳戶，數一數至少也有十幾間！
比較下來，國泰世華 CUBE App ，是我用起來最順手的 👍
國泰究竟贏在哪裡呢？讓我整理 5 個原因給大家～
發佈在
波琳達的沙龍
2024-07-05
68
川普當選，對台股是利多還是利空？川普在槍擊事件中所表現出來的英勇形象，讓他贏得美國總統大選幾乎已成定局。沒想到他隨口的一句話「台灣搶走美國的晶片生意，所以要付保護費」，就讓台積電在短短三天跌掉超過100 元，台股也跌掉1100點以上。台積電、台股會就此一路下跌嗎？未來該如何因應？
發佈在
施昇輝的小資幸福講堂
2024-07-20
82
HTML 程式札記 : 語意化標籤HTML 語意化標籤，不僅可以使網頁結構更加清晰、易於理解，也對搜索引擎優化(SEO)和提升網頁無障礙訪問性(Accessibility)有明顯的幫助。本文將介紹 HTML 語意化標籤的定義、重要性以及常見的語意化標籤。
發佈在
梧笙の領域展開
2024-02-11
4
HTML 程式札記 : <img> 圖片在網頁設計中，圖片是增強用戶體驗的重要元素。本文將介紹如何在 HTML 中使用圖片，包括基本語法、屬性設定等，幫助你更好的在網頁中使用圖片。
發佈在
梧笙の領域展開
2024-02-08
6
基礎HTML學習筆記一個網頁只會有一個h1
標籤(h1.p.img)裡面可以放多個屬性(src.background.color)
建立 HTML 環境
告訴大家這是html5的語法
關於整個專案的資訊放這裡面
頁籤標題
寫給別人看的要放這裡面
Emmet 預設安裝
/*語意使用英文*/
/*使
發佈在
王聖禮的沙龍
2021-08-30
3
【自學程式】HTML 屬性是什麼？解析常見 HTML 屬性用法在HTML程式語言中，有一種能讓HTML元素與其他程式語言（CSS、JavaScript）運作的更加順利的語法，它叫做「HTML屬性（HTML Attribute）」。
那HTML屬性是怎麼運作的呢？
2021-06-15
5
【自學程式】什麼是HTML標籤？初學網頁開法必備的四個HTML標籤HTML一種建立網頁架構的程式語言，對於初學程式的人來說，HTML是非常好上手的。
它沒有不像是CSS及JavaScript，沒有複雜的邏輯，只要更改程式碼，馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
2021-06-07
9
【自學程式】如果網頁是一台小車車？淺談網頁三巨頭：HTML、CSS及JavaScript
許多初學網頁開發的朋友們，一開始都不太理解HTML、CSS、 JavaScript之間的差異性，導致初期規劃學習計畫時毫無頭緒。
會有這樣的困擾，主要在於不了解HTML、CSS、 JavaScript之間的關係，以及這三者在網頁運作時所扮演什麼角色，導致越學越阿雜的狀況。
2021-05-18
10