網頁設計三兩事

Nerd Font:程式的紅綠燈

想像一下,當你駕駛到一個路口後發現沒有交通號誌會發生什麼情況?可能大多數的人會感到惶恐不安?!深怕一個閃神就會有不知名的冒失鬼衝出來釀成大禍。

同樣地,當你在編寫程式碼時,有時會遇到具有特定意義的行為,像是 Git 的操作,你可能需要 add、commit 或是切換分支,以往我們需要有足夠的上下文或資訊才能理解它們背後的含義。但,如果我們可以給這些特定的行為一個符號,是不是就可以透過符號輕易的了解目前的行為是什麼意思。

Nerd Font:程式的紅綠燈 閱讀全文 »

HTML 的 role 屬性是什麼意思?

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

HTML 的 role 屬性是什麼意思? 閱讀全文 »

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

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

網頁要如何實現平面刊物多欄或跨欄的效果? 閱讀全文 »

CSS 寫入模式 writing-mode

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

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

CSS 寫入模式 writing-mode 閱讀全文 »

網頁設計小眉角:一些少見卻好用的 HTML & CSS

input 的欄位預設會記錄輸入的值,以方便使用者在重複輸入的時候可以透過下拉直接點選,如帳號、電子信箱等等。但有時我們十分確定使用者不會在該欄位輸入兩次一模一樣的數值,或是不希望其他使用者發現我們輸入什麼內容時,會希望關掉 input 的紀錄功能,這時,你可以在 input 加入 autocomplete="off" 的屬性,這個屬性預設是 on 開啟,也就是會紀錄 input 的輸入內容。但,當你改成 off 後,下次你在該欄位輸入資訊時,瀏覽器就不會紀錄任何內容。

網頁設計小眉角:一些少見卻好用的 HTML & CSS 閱讀全文 »

返回頂端