網頁設計三兩事

告別繁瑣的顏色變數管理,讓你的網頁配色更聰明!

作為網頁設計師或前端開發者,你是否也受夠了這種情況:每次在設計一個新網站時,總需要定義多組色彩,像是在網頁設定一個文字連結,並希望文字連結在按下前、按下後以及滑鼠 Hover 時都能有一些顏色的變化,方便用戶知道自己有沒有按過這個連結。這種情況你就需要為每個文字連結的狀態設定不同顏色 RGB 碼,一旦你要修改某個文字連結的顏色,就需要連同相關的狀態色一起調整。

告別繁瑣的顏色變數管理,讓你的網頁配色更聰明! Read More »

CSS 容器查詢單位 cqi

其實 cqi 的使用方式有點類似 rem 與 em 的關係。

當我們設定了 rem,就可以知道一個 em 實際是多少;當網頁需要調整整體比例時,只需要改動 rem 的值,就能讓所有使用 em 的元素跟著連動變化,維持一致的比例。也就是說,你可以簡單地將 cqi 理解成「容器內的 root 單位」

CSS 容器查詢單位 cqi Read More »

如何透過一個 QR Code 搞定多平台下載?

在遊戲產業中,特別是手遊,為了盡可能觸及到更多的玩家,開發商通常會同時推出符合 iOS 和 Android 這兩大主流平台的應用。並將遊戲上架到對應的 Apply Store 和 Google Play 應用商店,方便玩家在自己熟悉的平台裡快速下載。然而,這裡有一個常見的問題...

如何透過一個 QR Code 搞定多平台下載? Read More »

HTML 的 role 屬性是什麼意思?

由於 HTML 本身的限制,有時 HTML 的標籤無法充份表示該元素的用途,比較常見的情況我們會將 a 標籤模擬成按鈕的樣式,在一般的情況下這沒什麼問題。但遇到需要更嚴謹的語意應用時(如無障礙網頁),我們就需要用特別的方式來區分,這時我們會藉由 role 來輔助說明該元素的用途,增強語義。

HTML 的 role 屬性是什麼意思? Read More »

網頁要如何實現平面刊物多欄或跨欄的效果?

對於平面設計師來說,多欄或跨欄排版的應用非常普遍,像是報紙、雜誌、廣告 DM 等等,幾乎我們生活中看到的各種平面設計都會出現它的蹤跡。特別是遇到大量的文字內容,透過欄位的編排,除了增加閱讀趣味外,好的編排還可以讓內容更加容易閱讀,幫助理解,一舉多得。

網頁要如何實現平面刊物多欄或跨欄的效果? Read More »

CSS 寫入模式 writing-mode

一直覺的 CSS 是種很有生命力的語言,總能三不五時挖掘出新的功能,豐富我們對 Web 的想像力。

最近到 W3School 查詢標籤的用法,意外看到 writing-mode,有種相見恨晚的感覺。對網頁設計師來說,畫面的安排無非由點、線、面依次推導,內容因為文化的關係會有不同的表現方式。

CSS 寫入模式 writing-mode Read More »

返回頂端