網頁藝術思考 - CSS 網頁設計藝術

Dec 04 Thu 2014 14:27
HTML5 form elements (ui elements) 新屬性 [2*]

html 5 使用者輸入元素 (ui elements) 新屬性

說明： html 5 在填表相關元素 (form-associated elements) 增加了不少有用的屬性 (attributes) 。有的是強化使用者易用性，也使觸控裝置有了處理的原則。有的是在瀏覽器增加了驗證 (form validation) 功能，簡化了以往只能倚賴的複雜的 javascript 程序。
適合：有 html 語法基礎概念者。
難度：
更新：2014-12-4
支援：詳細可參考 MDN 的整理。

友善的填表介面

`placeholder` ₪

顯示預填內容

姓名：

html 如：

<label for="fullname">姓名：</label>
<input type="text" id="fullname" name="fullname" maxlength="80" placeholder="薛洪度">

說明

屬性值作為預先顯示該項的填寫範例或提示，非實際填入內容。
:placeholder-shown css level 4 pseudo-class 可指定有 placeholder 元素的設計樣式。

`autofocus` ₪

游標自動跳入輸入項

登入者：

html 如：

<label for="logger">登入者：</label>
<input type="text" id="logger" name="logger" maxlength="30" placeholder="OneIsNot1" autofocus>

說明

當頁面開啟時，該元素會自動成為焦點 (游標已點入其中) 。
理所當然，一個頁面只有一個 autofocus 有作用。

`autocomplete` ₪

html 如：

<label for="email">Email：</label>
<input type="email" id="email" name="email" maxlength="120" placeholder="thanks@lot.friends" autocomplete="off">

說明

內定值為 autocomplete="on" ；瀏覽器會記錄該項使用者曾經輸入並送交的內容，日後輸入時會將記錄顯示成下拉選項，方便使用者直接挑選就可以完填，不需要再從頭到尾輸入。
autocomplete="off" ，則指定瀏覽器不要顯示下拉選項。

`list` ₪

html 如：

<form method="POST">
 <fieldset>
  <legend>下拉選項自動完填</legend>
  <ol class="RegularList">
  <li><label for="fCity">台灣六都您最愛哪一都？</label><input type="text" id="fCity" name="fCity" maxlength="30" placeholder="台北市" autocomplete="off" list="cityTW"></li>
  <li><button type="reset">清除</button><button type="submit">送交</button></li>
  </ol>
 </fieldset>
</form>
<datalist id="cityTW">
 <option value="台北市">
 <option value="新北市">
 <option value="桃園市">
 <option value="台中市">
 <option value="台南市">
 <option value="高雄市">
</datalist>

說明

list 屬性值指定為 datalist 元素的 id 值，在輸入項上輸入時，瀏覽器會取得該 datalist 中可能的選項顯示成下拉選項。
輸入項會取得 datalist 的子項 option 的 value 值；如果沒有 value 值，就取得 option 的內容作為值。
大量資料透過 ajax 技術可動態變動 datalist 的選項內容。
datalist 元素本身不會顯出，不限制置於文件中任何元素下。
list 屬性無法限制輸入內容，使用者仍可輸入非選項中的內容。需要限制輸入，可使用 pattern 屬性。
與原有 select 元素不同，這個方式在觸控裝置不再是不易操作的下拉鈕。

驗證 (validation)

`required` ₪

html 如：

<label for="user">用戶名稱：</label>
<input type="text" id="user" name="user" maxlength="30" placeholder="OneIsNot1" required>

html 如：

<label for="ageR2">年齡：</label>
<input type="radio" id="ageR2" name="ageRange" required><label for="ageR2">30歲未滿</label>
<input type="radio" id="ageR3" name="ageRange" required><label for="ageR3">30-39歲</label>
<input type="radio" id="ageR4" name="ageRange" required><label for="ageR4">40-49歲</label>
<input type="radio" id="ageR5" name="ageRange" required><label for="ageR5">50歲以上</label>

說明

指定輸入項目為必填。
如果沒填就按送交，則無法通過驗證 (invalid) ，瀏覽器會停止送交，並在項目上顯示必須填寫的提示。
:required css level 4 pseudo-class 可指定 required 元素的設計樣式。

`pattern` ₪

html 如： (限定英文字母大小寫或數字 4~12 字)

<label for="account">使用者名稱：</label>
<input type="text" id="account" name="account" maxlength="12" placeholder="OneIsNot1" required pattern="[A-Za-z0-9]{4,12}">

html 如：

<label for="mp">手機 (<samp>+886</samp>)：</label>
<input type="tel" id="mp" name="mp" maxlength="12" placeholder="0987 654 321" pattern="09[1-8][0-9]([\-|\s]?)[0-9]{3}\1[0-9]{3}">

說明

指定 ECMAscript Pattern Regular Expression 作為 pattern 屬性值，可過濾輸入內容。
如果不符合限定的模式，按送交則無法通過驗證 (invalid) ，瀏覽器會停止送交，並在項目上顯示不符合模式的提示。
這裡不需在前後加 / 建構符號，與平常語法不同，因此也沒有 flags。

`title` ₪

html 如：

<label for="pwd">密碼：</label>
<input type="password" id="pwd" name="password" maxlength="12" size="14" placeholder="6~12英數字組合" required pattern="(?=^[A-Za-z0-9]{6,12}$)((?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]))^.*$" title="密碼：6~12英數字組合，至少有一個大寫、小寫英文字母及數字，如 A12Rd6">

說明

驗證不過時，瀏覽器應顯示此屬性值，說明如何輸入要求的資料。
當然，在輸入項鄰近增加輸入的說明仍是需要的。

`min|max|step` ₪

html 如：

<label for="qty">訂購量 (公斤) ：</label>
<input type="number" id="qty" name="quantity" placeholder="2.5" required title="購買量，單次最多 6，最少  0.5，單位增減值為 0.5，如 0.5, 1, 1.5, 2,…" max="6" min="0.5" step="0.5">

說明

限制可輸入的最大、最小值 (max, min) ，可以是數值或日期時間值； step 指定單位增減值 (每按一次鈕)，接受小數值。
輸入值如不在限定範圍內，或不符單位增減變動值時，驗證不會通過，瀏覽器會停止送交，並在項目上顯示可能的值的提示。

`novalidate` ₪

html 如：

<form method="POST" novalidate>
 <fieldset>
  <legend>停用驗證</legend>
  <ol>
  <li><label for="user">用戶名稱：</label><input type="text" id="user" name="user" maxlength="12" placeholder="OneIsNot1" title="帳號，12字以內" autocomplete="off" required></li>
  <li><label for="email">Email：</label><input type="email" id="email" name="email" maxlength="120" placeholder="thanks@lot.friends" title="有效的電子信箱，如 thanks@lot.friends" autocomplete="off"></li>
  <li><button type="reset">清除</button><button type="submit">送交</button></li>
  </ol>
 </fieldset>
</form>

說明

這是 form 的專用屬性，瀏覽器會停止驗證，但不會阻礙像是運用 Javascript 處理的驗證。
需要測試 server-side 或是 Javascript 驗證時，當然就可以運用此屬性。
:invalid, :valid css level 4 pseudo-class 可指定 form 或其輸入項元素，驗證不過或通過的設計樣式。

`formnovalidate` ₪

html 如：

<form method="POST">
 <fieldset>
  <legend>停用驗證</legend>
  <ol>
  <li><label for="user">用戶名稱：</label><input type="text" id="user" name="user" maxlength="12" placeholder="OneIsNot1" title="帳號，12字以內" autocomplete="off" required></li>
  <li><label for="email">Email：</label><input type="email" id="email" name="email" maxlength="120" placeholder="thanks@lot.friends" title="有效的電子信箱，如 thanks@lot.friends" autocomplete="off"></li>
  <li><button type="reset">清除</button><button type="submit" formnovalidate>送交</button></li>
  </ol>
 </fieldset>
</form>

說明

瀏覽器會停止驗證，同 novalidate ，差別是此為 submit 送交鈕的專用屬性。
輸入項不是在 form 元素的下層時，就顯得有用了。

輸入項不必是 `form` 元素的下層

`form` ₪

訂單

訂購量 (公斤) ：

html 如：

<form method="POST" id="order">
 <fieldset>
  <legend>用戶資料</legend>
  <ol class="RegularList">
  <li><label for="account">使用者名稱：</label><input type="text" id="account" name="account" maxlength="12" placeholder="OneIsNot1" required pattern="[A-Za-z0-9]{4,12}"></li>
  </ol>
 </fieldset>
</form>
<fieldset>
 <legend>訂單</legend>
 <ol class="RegularList">
 <li><label for="qty">訂購量 (公斤) ：</label><input type="number" id="qty" name="quantity" placeholder="2.5" required title="購買量，單次最多 6，最少  0.5，單位增減值為 0.5，如 0.5, 1, 1.5, 2,…" max="6" min="0.5" step="0.5" form="order"></li>
 <li><button type="reset" form="order">清除</button><button type="submit" form="order">送交</button></li>
 </ol>
</fieldset>

說明

輸入項不是直接在 form 元素下層，以 form 屬性指定應屬的 form 元素的 id 。
輸入項不局限須在 form 元素的下層，可讓 html 結構及動態內容更具彈性。

散佈、展示請參閱 Creative Commons 授權條文，禁止重混，引述請增加原文連結。

不老師發表在痞客邦留言(0) 人氣()

個人分類：Attributes屬性

▲top

Nov 26 Tue 2013 14:32
CSS Gradient 漸層視覺設計範例 [5*]

css gradient 漸層設計冥想

說明： css level 3 (css 3) gradient 歷經數年數次的規則編修，終於有了底定的態勢，多家瀏覽器也在本文發表的當年有了更完整的支援，讓我們不需再完全只能依賴像素化圖形製作漸層。特別僅運用 CSS gradient 技術，設計出令人意想不到的圖案 (patterns) ，期望能激發更多的設計想像空間。
適合：想模仿範例自行製作者，須熟悉 html 及 css 語法，並有使用繪圖軟體漸層經驗。
難度：
更新：2013-12-19
支援：詳細可參考 Can I Use (至更新時，部分仍為廠商專屬擴充特性，須加上辨識詞)。

Linear Gradients 直線形漸層 ₪

標準語法

linear-gradient(direction, color-stop, ……, color-stop)
repeating-linear-gradient(direction, color-stop, ……, color-stop)

說明

以函數 (function) 形式表示，當作如 background-image, list-style-image 之類的值。
direction 參數，表示漸層顔色變化的方向。以 deg (角度) 為單位，惟 0deg 是由下往上的垂直方向 (漸層為水平呈現) ，正的角度依順時鐘旋轉。内定值 (没有指定時) 為 180deg ，也就是由上往下的垂直方向。
direction 參數也可由 top, bottom, left, right 等特別字 (keywords) 表示，如 to top, to right, to bottom, to left ，分別表示 0deg, 90deg, 180deg, -90deg 。而如 to bottom right 則表示漸層分佈由 gradient box 左上角往右下角 (斜對角) 的方向。當作 background-image 時， gradient box 通常就是 background-size 的範圍。
color-stop 參數，表示漸層的顔色及分佈，可分爲二部分，顔色及色佈，中間至少需以一半形空格分隔，當然可以有很多組 color-stop 。顔色表示方式可參考 color units ；色佈 (顔色分佈位置) 可以 css 各種標準尺寸單位表示 (如 %, px, em, …) ，可以接受小於 0% 及大於 100% ，有時候 0% 或 100% 的位置可省略，如果都沒有指定色佈，瀏覽器應由 0% 至 100% 自動平均分配位置。而如需精準計算尺寸，可參考 w3c 圖示。
repeating-linear-gradient() 與 linear-gradient() ，差別在前者會無限重複呈現，仿如 ……, color-stop, color-stop,…… 。

語法實例

background-image:linear-gradient(30deg,hsl(30,100%,80%), hsl(120,80%,50%));
background-image:linear-gradient(to bottom left, hsl(240,100%,50%), hsl(60,100%,75%) 35%, hsl(240,100%,50%));
list-style-image:repeating-linear-gradient(45deg, hsl(260,100%,50%), hsl(260,100%,50%) 5%, transparent 5%, transparent 10%);

Radial Gradients 放射形漸層 ₪

標準語法

radial-gradient(size at cp, color-stop, ……, color-stop)
repeating-radial-gradient(size at cp, color-stop, ……, color-stop)

說明

以函數 (function) 形式表示，當作如 background-image, list-style-image 之類的值。
size at cp 參數，表示放射形漸層橢圓形的半徑尺寸 (size) 及圓心位置 (cp) 。圓心為漸層的始點，指定方式與 background-position 相同，内定值 (没有指定時) 為 center ，表示 gradient box 中心點。當作 background-image 時， gradient box 通常就是 background-size 的範圍。半徑 (size) 可以是 css 各種標準尺寸單位表示 (如 %, px, em, …) ，二個值以半形空格分隔表示橢圓形水平與垂直半徑，如果僅一個值表示正圓形，但一個值不接受 % 為單位；而 % 是以 gradient box 的範圍來計算。漸層橢圓形的尺寸是獨立的，不一定要符合 gradient box 。
size 也可依 gradient box 為基準，由幾個特別字 (keywords) 表示：
1. farthest-side
  
  以離圓心最遠的一邊，水平與垂直的距離為半徑。
2. farthest-corner
  
  以離圓心最遠的一角為漸層橢圓形的邊緣 (100% color-stop) ，水平與垂直半徑比例依據 farthest-side 時的比例。此為内定值 (没有指定時) 。
3. closest-side
  
  以離圓心最近的一邊，水平與垂直的距離為半徑。
4. closest-corner
  
  以離圓心最近的一角為漸層橢圓形的邊緣 (100% color-stop) ，水平與垂直半徑比例依據 closest-side 時的比例。
color-stop 參數，表示漸層的顔色及分佈，可分爲二部分，顔色及色佈，中間至少需以一半形空格分隔，當然可以有很多組 color-stop 。顔色表示方式可參考 color units ；色佈 (顔色分佈位置) 可以 css 各種標準尺寸單位表示 (如 %, px, em, …) ，可以接受小於 0% 及大於 100% ，有時候 0% 或 100% 的位置可省略，如果都沒有指定色佈，瀏覽器應由 0% 至 100% 自動平均分配位置。 0% 表示漸層橢圓形圓心； 100% 表示漸層橢圓形邊緣。
repeating-radial-gradient() 與 radial-gradient() ，差別在前者會無限重複呈現，仿如 ……, color-stop, color-stop,…… 。

語法實例

background-image:radial-gradient(100px, hsl(50,100%,70%), hsl(240,100%,30%));
background-image:radial-gradient(60px 120px at 60px 120px, hsl(0,100%,95%), hsl(0,100%,90%) 30%, hsl(0,100%,95%) 40%, hsl(0,100%,95%) 42%, hsl(0,75%,86%) 99%, transparent) ;
background-image:repeating-radial-gradient(farthest-side at top, hsl(240,100%,96%), hsl(240,100%,96%) 6px, transparent 6px, transparent 16px);
list-style-image:repeating-radial-gradient(hsl(120,100%,50%), hsl(120,100%,50%) 2px, transparent 2px, transparent 3px);

參考→基本範例教學

CSS 漸層無接縫背景桌布創意發想

撰文時，各家瀏覽器尚有些許瑕疵； firefox 僅在部分細微處有偏色問題； IE 僅有一範例錯誤，表現很佳；出乎意料地， google chrome 非常糟。範例中有標註最正確呈現的瀏覽器，讀者可自行比較。部分範例以 css animation 加入動畫效果，以彰顯一般繪圖軟體或 flash 很難處理的技術。

css gradient 視覺冥想 (範例來源連結)

參考資源

css Image Values : gradients - w3c 官方文件 (英文) 。

散佈、展示請參閱 Creative Commons 授權條文，禁止重混，引述請增加原文連結。

不老師發表在痞客邦留言(3) 人氣()

個人分類：CSS單位(units),值(value)

▲top

Jun 03 Mon 2013 20:55
CSS 3D 動畫範例展演 [5*]

css 3D 動畫 (3D animation) ：立方體

說明： css level 3 (css 3) animation 動畫特性，搭配 3D transform 造形，讓我們不需用到 3D 動畫軟體，不需要撰寫程式，不需要 3D 繪圖，就能做出 3D 立體透視效果。特別僅運用 CSS 技術，做出簡單的 3D 立方體及動畫範例。
適合：想模仿範例自行製作者，須熟悉 html 及 css 語法。
難度：
更新：2013-6-3
支援：依據個別範例内標註。 (不過，可能玩過頭，瀏覽器有點招架不住。)

css 3D 立方體動畫

CSS 3D 動畫瘋 (範例來源連結)

參考資源

css animations - w3c 官方文件 (英文) 。
css transforms - w3c 官方文件 (英文) 。

散佈、展示請參閱 Creative Commons 授權條文，禁止重混，引述請增加原文連結。

不老師發表在痞客邦留言(0) 人氣()

個人分類：CSS網頁設計魔法

▲top

May 01 Wed 2013 16:45
jQuery Cycle2 輪播廣告範例展演 [5*]

javascript 輪播廣告範例三則

說明： jQuery Cycle 2 plugin 運用 html 5 的技術有了很大的轉變，與第一代 jquery cycle 的架構大不相同，提供設計者更多彈性，也就有了更多的設計發想空間。特別運用部分技術，設計富有更多想像的視覺輪動效果。範例也儘可能地符合 WAI 及台灣政府無障礙網頁的相關規範。 Cycle 2 plugin 使用方法可參考教學及基本解説。
適合：想模仿範例自行製作者，須熟悉 html, css, jQuery 及 javascript 語法。
難度：
更新：2013-5-1
支援：jQuery 1.7 以後。

輪播廣告設計 (一) ：含縮圖列

Cycle2 Slideshow 附縮圖列 (範例來源連結)

輪播廣告設計 (二) ：多組輪播同步循環

Cycle2 多組同步循環輪播片 (範例來源連結)

輪播廣告設計 (三) ：輪播中的輪播

Cycle2 輪播中的輪播片 (範例來源連結)

參考資源

jQuery Cycle 2 plugin - 官網 (英文) 。
jQuery Cycle 2 plugin - 基本解説。

散佈、展示請參閱 Creative Commons 授權條文，禁止重混，引述請增加原文連結。

不老師發表在痞客邦留言(0) 人氣()

個人分類：輪播廣告

▲top

Apr 26 Fri 2013 13:48
CSS3 動畫範例展演 [5*]

css 3 動態視覺範例二組：

說明： css level 3 (css 3) 引領視覺設計進入了動畫層次，讓我們可以很容易製作出以往必須倚靠動畫程式才能完成的效果。特別僅運用 CSS 技術，設計出一連串令人意想不到的動態效果，期望能激發更多的設計想像空間。
適合：想模仿範例自行製作者，須熟悉 html 及 css 語法。
難度：
更新：2013-4-26
支援：依據個別範例内標註。

(一) CSS 動畫設計特效發想

CSS 動態視覺狂想曲 (範例來源連結)

(二) css 動態視覺發想

css 玩視覺特效 (範例來源連結)

參考資源

css animations - w3c 官方文件 (英文) 。
css transitions - w3c 官方文件 (英文) 。
css Image Values - w3c 官方文件 (英文) 。

散佈、展示請參閱 Creative Commons 授權條文，禁止重混，引述請增加原文連結。

不老師發表在痞客邦留言(5) 人氣()

個人分類：CSS網頁設計魔法

▲top

Jul 13 Wed 2011 17:47
旋轉、傾斜、縮放的變形效果 transform (CSS properties) [2*]

css `transform` 能旋轉、傾斜、縮放變形 box

說明：運用 css level 3 (css 3) 的 transform 特性 (css properties) ，直接就可以旋轉、歪斜、放大、縮小、移動元素 (elements) 的 box ，甚至 3D 的迴旋、透視。包括整個元素所有的內容也都隨之變形，不再侷限只能在僵硬的矩形框，對網頁排版及設計上會有很大的彈性和突破，而且對網頁正常的編排不會有相互排擠問題，一格黏接一格耗時費工的殘腦時代終將走入歷史。本篇僅先就 2D transform 的部分討論。
適合：有 html 及 css 語法基礎概念者。
難度：
更新：2013-03-11
支援：詳細可參考 Can I Use 。(至更新時，部分仍為廠商專屬擴充特性，須加上辨識詞)

標準語法

transform: transform-function;

說明

特性值不像一般的數值，而是以像數學函數的方式表示；因為數據需要經過較複雜的公式運算出四邊形四角的位置。依照各種不同的變形效果，有數種變形函數，稍後說明。
預設值 none ；表示沒有套上任何變形。
如果變形函數中使用百分比 (%) 做為移動的數據，以元素本身的 box 尺寸為百分比計算基準。注意，這和 css box 以容納區 (containing block) 尺寸為計算基準不同。
同一元素可套用多個變形函數，函數間以半形空格間隔，瀏覽器會依序套用。
預設變形的參考點在 box 中心，旋轉、傾斜、縮放、移動等都以參考點為基準。透過 transform-origin 特性 (稍後說明) ，可指定不同的位置點；例如我們想以元素的左上角為旋轉中心軸，或是中心軸改在元素的外面也可以。
適用元素： transformable element 。
適用媒體： visual 。
不被繼承。

變形函數 2D transform-function (transformation functions) ₪

函數括號內的角度 θ 參數必須有單位，可以是 deg (角度 ° ) 、 rad (弧度) 、 grad (梯度) ，大小寫都可接受； m, a, b, c, d, e, f 參數為數字，不需要單位； o 參數為合法的尺寸值 (length) 或 % (百分比) 。

rotate(θ): 指定元素以參考點為中心軸 2D 旋轉 θ 度。
skewX(θ): 指定元素以參考點為中心軸沿著橫向傾斜 θ 度。
skewY(θ): 指定元素以參考點為中心軸沿著縱向傾斜 θ 度。
skew(θ_x,θ_y): 指定元素以參考點為中心軸沿著橫向傾斜 θ_x 度、縱向傾斜 θ_y 度。參數如果只指定 1 個，省略的第 2 個參數，會視為 0 ，也就是只有沿橫向傾斜。September, 2012 w3c 草書又復原此項
scaleX(m): 指定元素由參考點橫向縮放 m 倍。
scaleY(m): 指定元素由參考點縱向縮放 m 倍。
scale(m_x,m_y): 指定元素由參考點 2D 橫向縮放 m_x 倍、縱向縮放 m_y 倍，等於是結合 scaleX(m_x), scaleY(m_y) 。參數如果只指定 1 個，省略的第 2 個參數，會等於第 1 個，也就是橫向、縱向以相同比例縮放。
translateX(o): 指定元素由參考點橫向移動 o 距離。
translateY(o): 指定元素由參考點縱向移動 o 距離。
translate(o_x,o_y): 指定元素由參考點 2D 橫向移動 o_x 距離、縱向移動 o_y 距離，等於是結合 translateX(o_x), translateY(o_y) 。參數如果只指定 1 個，省略的第 2 個參數，會視為 0 ，也就是只有橫向移動。
matrix(a,b,c,d,e,f): 指定元素由參考點依據數學變形矩陣 (transformation matrix) 的 6 個參數值產生 2D 變形。矩陣的目的主要在運算出四邊形四角的座標，屬於數學問題，這裡就不作太多討論了。事實上，前述的各項變形函數都是簡化這個矩陣而拆解出來的，稍後範例會看到對照。有一些線上工具可以比較容易幫我們產生這些參數值。

語法實例

transform:rotate(3deg);
transform:skewX(20deg);
transform:scaleY(1.8);
transform:translateX(60px);
transform:translate(180px) rotate(-5deg) scale(0.8);
transform:matrix(0,1.611,1.611,0.278,5,5);

後面會有更多例子討論。

`transform-origin` 特性 (property) 指出變形的參考點座標 (中心軸) ₪

標準語法

transform-origin: x y;

說明

共有 2 個特性值，每個值之間以至少一個半形空格間隔。
2 個值可以是尺寸值 (length) 或 % (百分比) 或方位關鍵字 (keywords) ； % 以元素本身的 box 尺寸為百分比計算基準。
使用尺寸值或 % ，依序表示參考點橫座標 (x) 、縱座標 (y) 。 padding-box 的左上角座標為 (0,0) 。
預設值為 50% 50% ；就是在 box 中心點。
使用方位關鍵字 (center, top, right, bottom, left) ，依據字意即可表示方向和位置，所以 2 個值沒有順序問題。
如果省略第 2 個值，會視為 center (50%) 。
適用元素：transformable element。
適用媒體： visual 。
不被繼承。

語法實例

transform-origin:100px 20px;
transform-origin:right;

廠商專屬擴充特性 (vendor-specific extensions) ₪

各家瀏覽器廠商都有自創的 css 特性或值 (多半指非 w3c 標準規範) ，可提供更多額外的功用。廠商經常為了搶先支援 w3c 未正式發佈的規範，也會先以擴充特性來處理。

廠商專屬擴充特性的語法： - (減號) 接上廠商辨識詞 (vendor identifier) ，再接 - (減號) 作為類似前置詞，然後再接 css 特性或值。最前面的 - (減號) 換成 _ (底線) 也可以，目前大多習慣用 - 。

以下列出幾個較常見的瀏覽器供應廠商：

-moz-特性：適用 firefox 等 Mozilla Gecko 系列。
-webkit-特性：適用 safari, google chrome 等系列。
-o-特性：適用 opera 系列； opera 15 後改版成 -webkit-。
-ms-特性：適用 ie 等 microsoft 系列。

例如在 ie 用到的濾鏡特性 -ms-filter 就是。

思考 - css 變形效果 (css `transform`) 突破網頁排版障礙

css transform 變形效果支援的 html 元素，舉凡圖片 (img) 、視訊影片 (video) 、多媒體物件 (object) 都可以旋轉、傾斜，這讓設計者輕輕鬆鬆就能做出令人驚歎的視覺效果。

元素經過變形後，瀏覽器會以插補像素 (interpolation) 運算後重新繪製呈現，以降低出現鋸齒或模糊的現象，這是值得讚許的技術，因為不再需要花不必要的工夫去處理變形後圖形失真或文字模糊的問題。各家瀏覽器插補運算方式當然不盡相同，所以看起來會有些許差異。

至更新時， transform 特性在部分瀏覽器，如 google chrome, safari 等，仍為的專屬擴充特性，所以在特性前需要加上廠商辨識詞，稍後範例的語法以較淡色呈現這部分。而新版的 firefox 及 ie 10 已不需加廠商辨識詞。

每個範例的 css 都有指定相同的背景顏色、相同的 border 。另外加了紅色瞄準標記，只是為了表示變形參考點位置，所以語法內沒有列出。

background:rgba(90%,95%,100%,0.85);
border:1px solid silver;
display:inline-block;
padding:0.5em 0.75em;

以下範例的每項主題都有加了對應的 css 效果，沒看到應該有的效果？

旋轉效果 `transform:rotate(θ)`

旋轉的變形矩陣語法 `transform:matrix(cosθ,sinθ,-sinθ,cosθ,0,0)`

以元素 box 中心點為旋轉軸，順時針旋轉 3° 。 (游標移入可比較原來的樣子)

元素的所有內容，包括文字、圖片也都旋轉，而且不會影響其它版面編排。

-moz-transform:rotate(3deg);
-webkit-transform:rotate(3deg);
-o-transform:rotate(3deg);
-ms-transform:rotate(3deg);
transform:rotate(3deg);

以元素 box 右下角為旋轉軸，逆時針旋轉 3° (負數角度) 。 (游標移入可比較原來的樣子)

以 transform-origin 特性指定右下角為旋轉的基準點。

-moz-transform-origin:right bottom;
-moz-transform:rotate(-3deg);
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(-3deg);
-o-transform-origin:right bottom;
-o-transform:rotate(-3deg);
-ms-transform-origin:right bottom;
-ms-transform:rotate(-3deg);
transform-origin:right bottom;
transform:rotate(-3deg);

翻轉效果，倒過來看…還有什麼不可能？

旋轉 180° 、或是範例的 π 弧度 (轉半圈) ，就會翻倒了。 (游標移入中心可比較原來的樣子)

-moz-transform:rotate(3.14159rad);
-webkit-transform:rotate(3.14159rad);
-o-transform:rotate(3.14159rad);
-ms-transform:rotate(3.14159rad);
transform:rotate(3.14159rad);

傾斜效果 `transform:skewX(θ)`, `transform:skewY(θ)`, `transform:skew(θ_x,θ_y)`

傾斜的變形矩陣語法 `transform:matrix(1,tanθ_y,tanθ_x,1,0,0)`

以元素 box 下緣中間為基準，沿著橫向 (橫軸) 平行方式傾斜 20° 。 (游標移入可比較原來的樣子)

以 transform-origin 特性指定下緣中間為傾斜的基準點，只用特性值 bottom ，另一方向視為 center 。

-moz-transform-origin:bottom;
-moz-transform:skewX(20deg);
-webkit-transform-origin:bottom;
-webkit-transform:skewX(20deg);
-o-transform-origin:bottom;
-o-transform:skewX(20deg);
-ms-transform-origin:bottom;
-ms-transform:skewX(20deg);
transform-origin:bottom;
transform:skewX(20deg);

以元素 box 左側中間為基準，沿著縱向 (縱軸) 以平行方式傾斜 5° 。 (游標移入可比較原來的樣子)

以 transform-origin 特性指定左緣中間為傾斜的基準點，只用特性值 left ，另一方向視為 center 。

-moz-transform-origin:left;
-moz-transform:skewY(5deg);
-webkit-transform-origin:left;
-webkit-transform:skewY(5deg);
-o-transform-origin:left;
-o-transform:skewY(5deg);
-ms-transform-origin:left;
-ms-transform:skewY(5deg);
transform-origin:left;
transform:skewY(5deg);

沿橫向傾斜 -25°，也沿縱向傾斜 5° 。 (游標移入可比較原來的樣子)

連續指定沿著橫軸及縱軸傾斜。

-moz-transform:skewX(-25deg) skewY(5deg);
-webkit-transform:skewX(-25deg) skewY(5deg);
-o-transform:skewX(-25deg) skewY(5deg);
-ms-transform:skewX(-25deg) skewY(5deg);
transform:skewX(-25deg) skewY(5deg);

縮放效果 `transform:scaleX(m)`, `transform:scaleY(m)`, `transform:scale(m_x,m_y)`

縮放的變形矩陣語法： `transform:matrix(m_x,0,0,m_y,0,0)`

以元素 box 左側中間為基準，橫向 (僅寬) 放大 1.2 倍。 (游標移入可比較原來的樣子)

以 transform-origin 特性指定左側中間為放大的基準點，只用特性值 0 ，垂直方向視為 center 。

-moz-transform-origin:0;
-moz-transform:scaleX(1.2);
-webkit-transform-origin:0;
-webkit-transform:scaleX(1.2);
-o-transform-origin:0;
-o-transform:scaleX(1.2);
-ms-transform-origin:0;
-ms-transform:scaleX(1.2);
transform-origin:0;
transform:scaleX(1.2);

以元素 box 中心為基準，縱向 (僅高) 放大 1.8 倍。 (游標移入可比較原來的樣子)

以中心為基準，縱向橫向縮放都會向上下或左右兩個方向內縮或擴大。

-moz-transform:scaleY(1.8);
-webkit-transform:scaleY(1.8);
-o-transform:scaleY(1.8);
-ms-transform:scaleY(1.8);
transform:scaleY(1.8);

以元素 box 左側中間為基準，橫向縮小 0.8 倍、縱向放大 1.8 倍。 (游標移入可比較原來的樣子)

scale() 指定 2 個參數依序表示橫向、縱向縮放，等於是結合 scaleX(), scaleY() 。以 transform-origin 特性指定左側中間為縮放的基準點，只用特性值 0 ，垂直方向視為 center 。

-moz-transform-origin:0;
-moz-transform:scale(0.8,1.8);
-webkit-transform-origin:0;
-webkit-transform:scale(0.8,1.8);
-o-transform-origin:0;
-o-transform:scale(0.8,1.8);
-ms-transform-origin:0;
-ms-transform:scale(0.8,1.8);
transform-origin:0;
transform:scale(0.8,1.8);

以元素 box 中心為基準，橫向縱向等比例縮小 0.8 倍。 (游標移入可比較原來的樣子)

簡單地只指定 1 個參數表示橫向、縱向縮放同一比例，也就是等同 scale(0.8,0.8) 的意思。

-moz-transform:scale(0.8);
-webkit-transform:scale(0.8);
-o-transform:scale(0.8);
-ms-transform:scale(0.8);
transform:scale(0.8);

鏡射效果，就像倒影或照鏡子效果。

負數的縱向縮放參數產生上下顛倒的效果，負數的橫向縮放參數產生左右顛倒的效果，就像倒影或照鏡子效果。 (游標移入桃紅色符號中央可比較原來的樣子)

-moz-transform:scaleY(-1.8);
-webkit-transform:scaleY(-1.8);
-o-transform:scaleY(-1.8);
-ms-transform:scaleY(-1.8);
transform:scaleY(-1.8);

移動效果 `transform:translateX(o)`, `transform:translateY(o)`, `transform:translate(o_x,o_y)`

移動的變形矩陣語法： `transform:matrix(1,0,0,1,o_x,o_y)`

以元素 box 中心點為基準，向右橫向移動 60 像素。 (游標移入可比較原來的樣子)

橫向移動，正值向右、負值向左。這樣的效果和以往運用 position:relative; 指定位移 (offset) 的方法簡直沒什麼兩樣，但是這個移動方式除了語法單純易懂外，還可結合其它變形，更具發揮設計的便利。

-moz-transform:translateX(60px);
-webkit-transform:translateX(60px);
-o-transform:translateX(60px);
-ms-transform:translateX(60px);
transform:translateX(60px);

以元素 box 中心點為基準，向右橫向移動本身寬度 50% 的距離。 (游標移入可比較原來的樣子)

以百分比為單位，橫向移動以元素本身的寬度計算，縱向移動則以的高度計算；這和 css box 以容納區 (containing block) 尺寸為百分比計算的基準不同。

-moz-transform:translateX(50%);
-webkit-transform:translateX(50%);
-o-transform:translateX(50%);
-ms-transform:translateX(50%);
transform:translateX(50%);

以元素 box 中心點為基準，向下縱向移動 0.75em。 (游標移入可比較原來的樣子)

縱向移動，正值向下、負值向上。

-moz-transform:translateY(0.75em);
-webkit-transform:translateY(0.75em);
-o-transform:translateY(0.75em);
-ms-transform:translateY(0.75em);
transform:translateY(0.75em);

以元素 box 中心點為基準，向左 40 像素、向下 8 像素，整個朝左下方向移動。 (游標移入可比較原來的樣子)

translate() 指定 2 個參數依序表示橫向、縱向移動距離，等於是結合 translateX(), translateY()。如果只指定 1 個，省略的第 2 個參數，會視為 0 ；沒有另外指定縱向移動，translate(50px) 跟 translateX(50px)會是一樣的。

-moz-transform:translate(-40px,8px);
-webkit-transform:translate(-40px,8px);
-o-transform:translate(-40px,8px);
-ms-transform:translate(-40px,8px);
transform:translate(-40px,8px);

同時綜合多種不同變形效果。

以元素 box 中心點為基準，橫移 180 像素、旋轉 -5° 、縮小 0.8 。 (游標移入可比較原來的樣子)

同時在一個元素加入 3 種變形效果，以半形空格間隔，會依序運算套用。

-moz-transform:translate(180px) rotate(-5deg) scale(0.8);
-webkit-transform:translate(180px) rotate(-5deg) scale(0.8);
-o-transform:translate(180px) rotate(-5deg) scale(0.8);
-ms-transform:translate(180px) rotate(-5deg) scale(0.8);
transform:translate(180px) rotate(-5deg) scale(0.8);

以元素 box 中心點為基準，旋轉 -5° 、縮小 0.8 、橫移 180 像素。 (游標移入可比較原來的樣子)

與前例套用相同 3 種變形效果，但是由於順序不同，仔細觀察其實是不同結果。橫移是在最後發生，所以實際上是延著旋轉後的角度 -5° 橫移 (不是水平方向) 。

-moz-transform:rotate(-5deg) scale(0.8) translate(180px);
-webkit-transform:rotate(-5deg) scale(0.8) translate(180px);
-o-transform:rotate(-5deg) scale(0.8) translate(180px);
-ms-transform:rotate(-5deg) scale(0.8) translate(180px);
transform:rotate(-5deg) scale(0.8) translate(180px);

`matrix` 複雜的變形矩陣，稍舊版 ie 也能玩 `matrix` 。

如果需要使用 matrix 產生更複雜的變形，矩陣的數值實在很難以一般方式計算。真好！感謝 Zoltan 寫好了可以幫我們產生 6 個參數的線上工具程式 Matrix Construction Set ，不過要有支援 html 5 Drag and Drop 的瀏覽器才能使用；也感謝 WEB 前端開發 (CSS88.com) 做了線上工具程式可輸入 6 個參數立即看到測試結果。讀者自己玩玩看囉！

ie8 及較舊版，可使用 ie 專屬擴充特性 Matrix filter (ie9 起已不再支援) ，原理與 transform:matrix(a,b,c,d,e,f) 是一樣的，語法大致上會是這樣：

filter:progid:DXImageTransform.Microsoft.Matrix(…);

對照參數 M11→a, M21→b, M12→c, M22→d, Dx→e, Dy→f ，詳細可參閱 microsoft Matrix filter 。

`transform` 後的異常

表格 (如 table) ：所有瀏覽器有效。指定 border-collapse:collapse; 特性 (儲存格間沒空隙) ， firefox 原有 border 會消失。
表格儲存格、表格列：在外層 table 元素指定了 border-collapse:collapse; 特性 (儲存格間沒空隙) ，各家瀏覽器產生有趣的呈現，讀者可以自行試試。
擬元素 (Pseudo-elements) ： ::first-letter, ::first-line 都不支援。

參考資源

css Transforms - w3c 官方文件 (英文) 。
Matrix Filter - microsoft 官方文件 (英文) 。
Cross Browser CSS Transforms – even in IE by zoltan (英文) 。

散佈、展示請參閱 Creative Commons 授權條文，禁止重混，引述請增加原文連結。

不老師發表在痞客邦留言(19) 人氣()

個人分類：transform,animation,transition

▲top

Jun 16 Thu 2011 18:32
陰影效果及光暈效果的 box-shadow (CSS property) [1*]

css `box-shadow` 產生陰影效果或光暈效果的特性

說明：元素 (elements) 的 box 呈現陰影或光暈的效果。可指定陰影的位移距離、顏色、模糊程度、擴散程度，也支援內陰影，甚至多層次堆疊的陰影。運用這個 css level 3 (css 3) 的特性 (css property) ，讓我們可以很輕鬆就能呈現迷人的視覺效果，而不需要煩瑣地一張一張製作圖片。更具意義的是，產生的陰影不會對版面編排造成影響。
適合：有 html 及 css 語法基礎概念者。
難度：
更新：2011-06-16
支援： firefox, google chrome, opera, ie9 (至撰文時) 。

標準語法

box-shadow: x y blur spread color inset;

說明

共有 6 個特性值，每個值之間以至少一個半形空格間隔。預設值為 none (只有一個字) 。
前面 4 個都是尺寸值 (length，不接受 %) ，依序表示水平位移距離 (x) 、垂直位移距離 (y) 、模糊強度 (blur) 、擴散強度 (spread) ，不可被其它的值插進其間。
產生陰影，前 2 個位移值 (x y) 為必要值，必須指定；其餘的值可不定義。
模糊 (blur) 及擴散 (spread) 強度預設值 (沒有定義時) 一般為 0 。模糊不能為負值。
第 5 個可指定陰影顏色 (color) ， css 合法的顏色值表示法都可以，顏色值放在位移值前面也可以。沒有定義會使用 (或繼承) color 特性指定的顏色值。
第 6 個可指定為內陰影 (inset) ，改放在第 1 個位置也可以。沒有定義就是一般在外的陰影。
所有組合起來的值，可增加為多組，以 , (逗號) 分隔，依序表示由前至後堆疊的多層陰影。
適用元素：全部。
適用媒體： visual 。
不被繼承。

語法實例

box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
box-shadow:2px 2px 1px rgba(20%,20%,40%,0.5) inset;
box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);

接下來會有更多例子討論。

思考 - css `box-shadow` 輕鬆呈現質感好、多變化的陰影效果或光暈效果。

外陰影 (或外光暈) 會依據 border-box 來計算尺寸及位移，而內陰影 (或內光暈) 則依據 padding-box 來計算。

稍後會看到範例的語法，都有增加了前兩段廠商專屬擴充特性，提供給部分瀏覽器未正式支援標準語法之前的較舊版本使用，加不加這段應視網站的適用領域，並不影響較新版瀏覽器，語法中以較淡色呈現。

前面有 -moz- 的：適用 firefox 等較舊版 Gecko 系列。
前面有 -webkit- 的：適用 safari, google chrome 等較舊版 webkit 系列。

每個範例的 css 都有指定相同的背景顏色、相同的 border 。

background:#def;
border:1px solid silver;
display:inline-block;
padding:0.5em 0.75em;

以下範例的每項主題都有加了對應的 css 效果，沒看到應該有的效果？

至少需要 2 個尺寸值，先後表示陰影的「水平」 (x) 「垂直」 (y) 位移距離， 0 值表示沒有位移 (就是 box 的位置) 。

-moz-box-shadow:4px 4px rgba(20%,20%,40%,0.5);
-webkit-box-shadow:4px 4px rgba(20%,20%,40%,0.5);
box-shadow:4px 4px rgba(20%,20%,40%,0.5);

增加第 3 個尺寸值表示陰影的模糊強度 (blur) ，當然增加模糊度也會造成陰影更透明。

-moz-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
-webkit-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);

使用負數位移值，呈現不同方向的陰影。

-moz-box-shadow:-4px -4px 3px rgba(20%,20%,40%,0.5);
-webkit-box-shadow:-4px -4px 3px rgba(20%,20%,40%,0.5);
box-shadow:-4px -4px 3px rgba(20%,20%,40%,0.5);

加第 4 個尺寸值，表示陰影的擴散強度 (spread) ，也可以強化像光暈的效果。

-moz-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5);
-webkit-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5);
box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5);

使用負數 spread 值，像似縮減陰影周圍。

-moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);
-webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);

在最前或最尾加 inset 變成內陰影，可呈現凹入的視覺。

-moz-box-shadow:inset 3px 3px 3px rgba(20%,20%,40%,0.5);
-webkit-box-shadow:inset 3px 3px 3px rgba(20%,20%,40%,0.5);
box-shadow:inset 3px 3px 3px rgba(20%,20%,40%,0.5);

內陰影加 spread 值，加強凹入的真實感。

-moz-box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;
-webkit-box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;
box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;

更逼真、更有深度感的陰影。

多層次陰影：一組以上數值，產生由前至後層疊的陰影，以 , (逗號) 分隔。當然陰影的透明顏色是會堆疊顏色的。

-moz-box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);
-webkit-box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);
box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);

有透明區域的圖片 (img 元素) 定義 box-shadow ，當然會在整個 img 元素的 box (包括透明區域) 產生陰影。這個例子除了圖片加陰影，它的外層元素也指定了 inset 陰影，呈現更立體的視覺，語法內沒有寫出，請自行試試嘍。

-moz-box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);
-webkit-box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);
box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);

不同顏色交錯相疊的背影。

不同顏色的陰影，指定交錯的位移，也能呈現特別的視覺。陰影跨越到下方的元素也不會移動排版。

-moz-box-shadow:8px 24px 2px rgba(100%,0%,0%,0.4),16px -4px 2px rgba(0%,100%,0%,0.4),24px 12px 2px rgba(0%,0%,100%,0.4);
-webkit-box-shadow:8px 24px 2px rgba(100%,0%,0%,0.4),16px -4px 2px rgba(0%,100%,0%,0.4),24px 12px 2px rgba(0%,0%,100%,0.4);
box-shadow:8px 24px 2px rgba(100%,0%,0%,0.4),16px -4px 2px rgba(0%,100%,0%,0.4),24px 12px 2px rgba(0%,0%,100%,0.4);

內、外都加陰影，同一個元素就可以搞定。

-moz-box-shadow:6px 6px 6px rgba(20%,20%,40%,0.5),inset 1px 1px 4px 2px rgba(20%,20%,40%,0.5);
-webkit-box-shadow:6px 6px 6px rgba(20%,20%,40%,0.5),inset 1px 1px 4px 2px rgba(20%,20%,40%,0.5);
box-shadow:6px 6px 6px rgba(20%,20%,40%,0.5),inset 1px 1px 4px 2px rgba(20%,20%,40%,0.5);

將 box-shadow 運用在像 :hover, :focus 之類具有使用者互動的指標 (selectors) ，也會有更多趣味的效果呈現，可以自行多嚐試嘍！

表格或表單控制元件在部分瀏覽器異常呈現

截至撰文時， safari 5 尚未支援 box-shadow 標準語法，必須使用前面提到的 -webkit- 語法。

雖說 box-shadow 可適用在全部元素，不過部分較特別的元素，如表格類、表單控制元件 (controls) ，在瀏覽器上會有不太正常的處理現象。撰文時，特別測試了一些提出來討論。

表格類

表格儲存格 (如 th, td) ：如果在外層 table 元素指定了 border-collapse:collapse; 特性 (儲存格間沒空隙) ，在 ie 陰影沒效。
表格列 (如 tr) ：在 google chrome, oprea 陰影沒效；在 ie 陰影呈現在儲存格上。

表單控制元件 (controls)

瀏覽器有預設背景色的控制元件 (如 button, input) ，在 ie, google chrome 須指定新的背景色，或背景透明才會有效。

在 google chrome 需指定 box-shadow 的 color 值才會有效。

參考資源

box-shadow - w3c 官方文件 (英文) 。

散佈、展示請參閱 Creative Commons 授權條文，禁止重混，引述請增加原文連結。

不老師發表在痞客邦留言(4) 人氣()

個人分類：background,border

▲top

Jan 30 Sun 2011 15:49
Attribute Selector 屬性指標 (CSS Selectors) [2*]

css attribute selectors (css 屬性指標)

說明：attribute selector 是善用元素 (elements) 既有的屬性 (attributes) 來指出元素，可有效降低不斷為元素命名 id 或 class 的麻煩。用在程式動態產生的 html ，又不能預先指定 id 或 class 的元素，也會很有助益；或是也可以找出屬性值 (attribute value) 有局部相同的元素。部分為 css level 3 (css 3) 新的規範。 jQuery attribute selectors 物件 (object) 相對應的語法也附帶列出，這部分瀏覽器都可支援。
適合：有 html 及 css 語法基礎概念者。
難度：
更新：2011-11-26
支援： firefox, safari, google chrome, opera, ie8, ie7-未支援 css3 (至撰文時)。

selector[att]

指出具有 att 屬性的元素。

語法實例

html 片段

<dfn lang="en">selector</dfn>
<label for="mail">email</label>

css selectors

dfn[lang]
label[for]

jQuery 物件語法

jQuery('[att]') 或 $('[att]')
例： $('label[for]')

selector[att=val]

指出具有 att 屬性且屬性值與 val 完全相符的元素。

語法實例

html 片段

<input type="text"/>
<button type="reset">清除</button>
<a href="http://www.w3.org/" rel="external">W3C</a>

css selectors

input[type="text"]
button[type="reset"]
a[rel="external"]

jQuery 物件語法

jQuery('[att=val]') 或 $('[att=val]')
例： $('input[type="text"]')

selector[att^=val] (此項為 css 3)

指出具有 att 屬性且屬性值字首 (由開端起算的字串) 與 val 完全相符的元素。 val 為空白時，不會指出任何元素。

語法實例

html 片段

<body class="ch41">…<body class="ch42">…<body class="ch43">…
<object type="image/png" data="photo.png">…<object type="image/jpg" data="photo.jpg">…
<a href="http://www.w3.org/">…<a href="http://www.w3.org/Style/CSS/">…<a href="http://www.w3.org/html/">…

css selectors

body[class^="ch4"]
object[type^="image/"]
a[href^="http://www.w3.org"]

jQuery 物件語法

jQuery('[att^=val]') 或 $('[att^=val]')
例： $('body[class^="ch4"]')

selector[att$=val] (此項為 css 3)

指出具有 att 屬性且屬性值字尾 (由末端回算的字串) 與 val 完全相符的元素。 val 為空白時，不會指出任何元素。

語法實例

html 片段

<div class="st" id="st1-2">…<div class="st" id="st2-2">…<div class="st" id="st3-2">…
<img src="images/photo.png"/>…<img src="../images/photo.png"/>…

css selectors

*.st[id$="-2"]
img[src$="photo.png"]

jQuery 物件語法

jQuery('[att$=val]') 或 $('[att$=val]')
例： $('img[src$="photo.png"]')

selector[att*=val] (此項為 css 3)

指出具有 att 屬性且屬性值至少有一段字與 val 完全相符的元素。 val 為空白時，不會指出任何元素。
語法實例
html 片段

<a href="http://tw.info.yahoo.com/SecurityCenter/">…<a href="http://tw.campaign.money.yahoo.com/atm/">…

css selectors

a[href*=".yahoo.com"]
jQuery 物件語法
jQuery('[att*=val]') 或 $('[att*=val]') 例： $('a[href*=".yahoo.com"]')

selector[att|=val]

指出具有 att 屬性且屬性值與 val 完全相符的元素，或是由開端至 - (減號) 前字元完全相符的元素。

語法實例

html 片段

<div class="article2">…<div class="article2-1">…<div class="article2-2">…
<a href="http://www.w3.org/" hreflang="en-us">…<a href="http://www.britishmuseum.org/" hreflang="en-uk">…

css selectors

div[class|="article2"]
a[hreflang|="en"]

jQuery 物件語法

jQuery('[att|=val]') 或 $('[att|=val]')
例： $('div[class|="article2"]')

selector[att~=val]

指出具有 att 屬性且屬性值有一個字以上以空格分隔，其中一個字與 val 完全相符的元素。 val 為空白時，不會指出任何元素。

語法實例

html 片段

<h2 title="Fashion Taipei">…<h2 title="Culture Taipei">…<h2 title="New Taipei City">…
<a href="../ch1.htm" rel="first start begin">第一頁</a>

css selectors

h2[title~="Taipei"]
a[rel~="start"]

jQuery 物件語法

jQuery('[att~=val]') 或 $('[att~=val]')
例： $('h2[title~="Taipei"]')

較詳細瀏覽器支援問題及 bugs 討論，可參訪 sitepoint (英文)

思考 - 養成良好的語言撰寫習慣

屬性值的引號 (quotes) 應括出來，尤其在 jQuery attribute selector。₪

如 jQuery ：

$('img[src$=".png"]')

常常有人會為了少打幾個字而省略引號，

$('img[src$=.png]')

本來語法是被寬鬆地允許，但在 jQuery 1.6 以後做了更嚴謹、更快速的處理，「屬性值」如果包含特別的符號，如例中的 . (句號) ，不加引號就會出現語法錯誤。

縱使以變數做為屬性值，也一樣會錯誤，如：

var f='.png';
$('img[src$='+f+']')

標準的寫法應是，

var f='.png';
$('img[src$="'+f+'"]')

有不少以前的 plugin 都已經出現這種錯誤，光除錯就必須再花很多時間，所以養成良好的書寫習慣是重要的，省東省西不見得省時間。

參考資源

css3 attribute selectors - w3c 官方文件 (英文) 。
jQuery selectors - 官方文件 (英文) 。

散佈、展示請參閱 Creative Commons 授權條文，禁止重混，引述請增加原文連結。

不老師發表在痞客邦留言(0) 人氣()

個人分類：Attribute Selectors

▲top

Oct 13 Mon 2008 17:42
CSS 設計 - 樹狀選單, 資料夾選單 (tree menu / folder menu) [5*]

樹狀選單加入樹狀線條的設計

說明：設計具有樹狀線條的資料夾選單或樹狀選單 (folder menu or tree menu)。本篇的討論僅適用一層子選單，更多層子選單的設計方式，以後再討論。
適合：有設計網頁及撰寫 css 語法經驗者。
難度：
更新：2008-10-13

以下將會討論如何巧妙運用 css 基本特性 (property) 來完成這個實例。

先了解 xhtml 這部分內容的安排。

<div class="TreeMenu">
 <div class="section">
  <h1>古文今讀</h1>
  <ul>
   <li><a href="#">上古神話</a></li>
   <li><a href="#">詩經</a></li>
   <li><a href="#">楚辭</a></li>
   <li><a href="#">諸子散文</a></li>
   <li><a href="#">漢賦選輯</a></li>
   <li><a href="#">樂府</a></li>
   <li><a href="#">駢文</a></li>
   <li><a href="#">唐詩</a></li>
   <li><a href="#">宋詞</a></li>
   <li><a href="#">元曲</a></li>
   <li><a href="#">章回小說</a></li>
  </ul>
 </div>
 <!--.section-->
 <div class="section">
  <h1>現代文藝</h1>
  <ul>
   <li><a href="#">小說</a></li>
   <li><a href="#">散文</a></li>
   <li><a href="#">性靈小品</a></li>
   <li><a href="#">新詩</a></li>
   <li><a href="#">翻譯小說</a></li>
  </ul>
 </div>
 <!--.section-->
</div>
<!--.TreeMenu-->

本篇範例的完整 css 設計內容。

思考 - css 設計的構思與佈局

我們儘量以探討方式介紹，引導如何構思及擴展 css 設計，希望能激發更多設計想法為主，避免陷入步驟式或教條式的悲慘學習模式。

開始：定義一些基本的 css 設計

最外圍的 .TreeMenu 指定寬度 (width) 、背景顏色 (background)、邊線 (border) ，而 h1 指定字體大小 (font) ， a 去掉底線， ul, h1 去除周圍距離 (padding, margin) 等等。

css

h1, ul {
 margin: 0;
 padding: 0;
}
.TreeMenu {
 width: 10em;
 background: rgb(92%,86%,100%);
 border: 1px solid rgb(60%,60%,80%);
}
.TreeMenu .section h1 {
 font-size: 100%;
 font-weight: normal;
}
.TreeMenu .section ul {
 list-style: none;
}
.TreeMenu .section li a {
 text-decoration: none;
}

`line-height` (行高) 是設計的主要概念

視覺性的瀏覽器通常會預先賦予每行「大於一個字」的行高 (line-height) ，為了避免不同瀏覽器間產生的差異，以及後面設計 css 時有所依據，先將整個選單內 line-height 定義為「字高度」的倍數，例中為 1.1 倍，看起來行距應該會較原來更緊一點。由於 line-height 特性 (property) 有繼承性 (inheritance) ，所以只需要定義一次在 .TreeMenu 或 .section 就可以；這裡也順便為分類標題 h1 加背景色修飾一下。

接續前面，增加一點 css 定義 (紅字)

.TreeMenu .section {
 line-height: 1.1;
}
.TreeMenu .section h1 {
 font-size: 100%;
 font-weight: normal;
 background: rgb(85%,70%,90%);
}

我們只以倍數定義行高，也沒有指定字體的尺寸 (font-size)，如此是為了使全部的設計，單純地以字高 (em) 的倍數來計算，不用去管字體到底幾個像素 (pixel) 大，或者一行有多少像素高。想指定 font-size 當然可以，不過行高最好還是以倍數的方式指定，設計時才不至於太難計算；這只是建議囉，全部都用像素為單位也沒問題，計算清楚，小腦袋瓜別爆掉就好。

產生樹狀的垂直線條

在 ul 左側加上線條，當做樹狀結構的垂直線，並且左邊空出一點距離，讓子選項內容 li 看起來向內縮排。這個距離應該是要對應分類標題 h1 來設計，我們指定了向內縮半個字 (0.5em)，所以線看起來像是由標題第一個字中間向下延伸；標題最前面如果變成小圖示 (icons) ，那就以圖示寬度的一半去定義縮排距離也可以。這裡應該以 margin 來指定內縮距離，因為我們必須讓垂直線緊貼著 li 。線條寬度沒有使用 em 定義，是因為 1px 寬幾乎沒什麼影響，但是如果需要設計較粗的線，單位最好一致。

在前面已指定的 ul 增加 css 定義 (紅字)

.TreeMenu .section ul {
 list-style: none;
 margin-left: 0.5em;
 border-left: 1px dotted;
}

我們沒有特別指定線條 border 的顏色，將會與該區域字的顏色相同，如果想另外定義顏色，可以像這樣，

border-left: 1px dotted rgb(255,0,0);

線條要改成實線也可以， dotted → solid ，當然其它形式的線條也可有更多變化。

產生樹狀的水平連接線條

在子選項 li 下方加上線條，當做樹狀結構子選項的橫連接線。這裡也讓 li 的內容 a 向內縮排，不過，不同於前面，我們必須保持每個 li 下方的線與左側 ul 的線緊緊相接，所以在 li 指定 padding ，僅讓內容 a 向內縮，但 li 本身沒有縮排。

接續前面，增加 li 的 css 定義

.TreeMenu .section li {
 padding-left: 0.5em;
 border-bottom: 1px dotted;
}

border 也沒有特別指定顏色，這樣可以對應前面 ul 的 border 顏色，如果想另外定義顏色，方法同前。

css `position:relative;` 讓 `a` 向下位移 (offset)

css position:relative; 主要的特點就是，元素可以由本身的 Box 位移，並且保留其它元素原來的排版。利用這個特點，只要讓 a 向下位移半行，而 li 會維持原來的位置及下方的橫線， a 的中間就會剛好壓在 li 的線上。前面已經指定 line-height:1.1; (1.1倍的字高)，所以半行就是 0.55em ，太棒了，只有 a 向下移，所有 a 以外的東西都不會動。

在前面已指定的 a 增加 css 定義 (紅字)

.TreeMenu .section li a {
 text-decoration: none;
 position: relative;
 top: 0.55em;
}

由於水平線條只有 1px 厚度，對整個位置並無影響，可以不需考量；但是如果指定了較粗的線條，就需要顧慮到線條的厚度會佔掉空間，向下位移的距離應該多加半個線的厚度，這也是為什麼前面有提醒要注意單位一致的原因，如果線的單位是 px ，而行高是 em，那還真有點難算。

背景顏色蓋掉重疊的線

明顯地，現在面臨兩個問題：一、字的背面不應該有線。二、因為 a 的向下位移，造成與下一個分類重疊。第二個問題稍後再討論。第一個問題比較容易處理，我們為 a 指定背景色就可以蓋住 li 的橫線了，由於 a 本身為行內層級元素 (inline-level elements) ，所以背景色只會在有字的區域呈現。如果 a 不想有背景顏色，只要指定與 .TreeMenu 相同的背景色， a 看起來就像沒有背景色的樣子。

在前面已指定的 a 增加 css 定義 (紅字)

.TreeMenu .section li a {
 text-decoration: none;
 position: relative;
 top: 0.55em;
 background: rgb(80%,85%,100%);
}

如果想讓字之後的整條線都蓋掉，只要把 a 轉換成區塊層級 (block-level) 呈現即可。

繼續為 a 增加 css 定義 (紅字)

.TreeMenu .section li a {
 text-decoration: none;
 position: relative;
 top: 0.55em;
 background: rgb(80%,85%,100%);
 display: block;
}

此時會看到子選項內容 a 之間有 1px 的間隔，這是因為 a 的實際高度本來就比 li 少 1px 高 (li 比 a 多了線條的高度)。

增加距離避免重疊，就算完成了。

只要在分類間加一點距離，重疊的問題就解決了，為 .section 下方加上 padding 應是較恰當的方式。為了分類裡面的上下距離看起來一樣 ([上古神話]上方與[章回小說]下方) ，我們指定了 padding-bottom:1.1em; ，與行高相等的距離。

在前面已指定的 .section 增加 css 定義 (紅字)

.TreeMenu .section {
 line-height: 1.1;
 padding-bottom: 1.1em;
}

換成在 ul 下方增加距離也可以，不過，只能以 margin 來定義，因為 padding 會使左側的線跟著向下延長，就不會與最後一個 li 的橫線緊接了。

目前應該已經算是完成囉，只剩下修飾更好而已。

`hasLayout` 處理 ie bugs

ie 7 或 ie 6 ，在 ul 或 a 可能會發生高度失準或背景圖片移位的問題，解決這類的 bugs 常用的方式是 hasLayout property 。由於目前在 ie 8 都還正常，為了清楚區隔，我們最好運用 css hacks 技巧。

視問題的區域，自行斟酌增加 css 定義

*+html .TreeMenu .section ul {
 zoom:1;
} /*hack ie7*/
* html .TreeMenu .section ul {
 zoom:1;
} /*hack ie6*/
*+html .TreeMenu .section ul a {
 zoom:1;
} /*hack ie7*/
* html .TreeMenu .section ul a {
 zoom:1;
} /*hack ie6*/

如果 a 還是有高度或不正常間隙問題

*+html .TreeMenu .section ul a {
 zoom:1;
 vertical-align:top;
} /*hack ie7*/
* html .TreeMenu .section ul a {
 zoom:1;
 vertical-align:top;
} /*hack ie6*/

在子選項前加小圖示，並且做最後修飾

以小圖示作為 a 的背景，並且指定左邊 padding 距離，讓 a 的內容文字向內縮排，才不會與小圖示重疊。例中的小球圖示 (ic008.png) 寬度 10px ，我們指定它的位置在 a 的最左側並且上下居中，這樣會讓小球剛好緊接在 li 的線後，然後左側 padding 距離為 15px ，讓字不要與圖看起來太緊鄰。另外，把 a 的背景顏色指定成與 .TreeMenu 相同。

我們也在 a 及標題 h1 上下加了一點 padding 距離，讓字看起來不會與邊緣太緊鄰。不過， a 上下各增加了 0.25em ，表示整行的高度也增加了，所以，向下位移的 top 定義也需要對等增加 0.25em 的距離 (0.55 + 0.25 = 0.8em) ；而 .section 下方的 padding 距離也應該增加為 1.6em (1.1em + 0.25em + 0.25em) 。

範例完整的 css 設計

h1, ul {
 margin: 0;
 padding: 0;
}
.TreeMenu {
 width: 10em;
 background: rgb(92%,86%,100%);
 border: 1px solid rgb(60%,60%,80%);
}
.TreeMenu .section {
 line-height: 1.1;
 padding-bottom:1.6em;
}
.TreeMenu .section h1 {
 font-size: 100%;
 font-weight: normal;
 background: rgb(85%,70%,90%);
 padding-top: 0.25em;
 padding-bottom: 0.25em;
}
.TreeMenu .section ul {
 list-style: none;
 margin-left: 0.5em;
 border-left: 1px dotted;
}
*+html .TreeMenu .section ul {
 zoom:1;
 padding-bottom:1px;
 margin-bottom:-1px;
} /*hack ie 7*/
* html .TreeMenu .section ul {
 zoom:1;
 padding-bottom:1px;
 margin-bottom:-1px;
} /*hack ie 6*/
.TreeMenu .section li {
 padding-left: 0.5em;
 border-bottom: 1px dotted;
}
.TreeMenu .section li a {
 text-decoration: none;
 position: relative;
 top: 0.8em;
 background: rgb(92%,86%,100%) url(ic008.png) no-repeat left center;
 display: block;
 padding: 0.25em 4px 0.25em 15px;
 margin-bottom: -1px;
}
*+html .TreeMenu .section ul a {
 zoom:1;
 vertical-align:top;
} /*hack ie 7*/
* html .TreeMenu .section ul a {
 zoom:1;
 vertical-align:top;
} /*hack ie 6*/

前面提到由於 li 的下方線條使 a 之間會有 1px 間距，只需要在 a 或 li 指定 margin-bottom:-1px; (綠字)，就會使 li 之間有 1px 重疊， a 之間就沒有間距了，不過， ie 7, ie 6 最後一個 li 的線會看不見，修正方式也加在 hacks 裡了 (綠字) ，有興趣可以自行試試。

散佈、展示請參閱 Creative Commons 授權條文，禁止重混，引述請增加原文連結。

不老師發表在痞客邦留言(4) 人氣()

個人分類：CSS網頁設計魔法

▲top

Jul 28 Mon 2008 14:07
半透明與透明效果設計 - CSS rgba, hsla 色彩單位 (CSS color units) [2*]

具有半透明值 (alpha 色版) 的 css 3 顏色單位

說明： rgba 及 hsla 為 css level 3 (css 3) 起，新一代表示色彩的單位 (color units)，最大的進展就是增加了「a」這個可以定義顏色不透明度 (opacity) 的 alpha 值；顏色的指定，當然包括了背景色 (background) 、邊線色 (border) 、前景色或文字色 (color) 、以及 text-shadow, box-shadow 的陰影色、 gradient 的顏色等，這讓以往網頁設計需要繁瑣過程的半透明效果變得簡單輕鬆多了。本篇也附帶討論舊式未支援的瀏覽器，可做到類似效果的幾種設計概念。
適合：有 html 及 css 語法基礎概念者。
難度：
更新：2011-06-12
支援： firefox, safari, google chrome, opera 10, ie9 (至更新時) 。

有二種表示方式：

rgba(red 值, green 值, blue 值, alpha 值)

red, green, blue 值

可以是 0 ~ 255 的整數值，與一般 8 位元顏色的十進位值相同，惟這類表示法不接受十六進位值 (如 ff, 8c) ；也可以是 0% ~ 100% 的百分比值。所以例如， rgb(128,128,128) = rgb(50%,50%,50%) = #808080 。

alpha 值 (alphavalue)

0.0 ~ 1.0 允許小數一位的數值， 0 →完全透明， 1 →完全不透明， 0.7 → 70% 不透明。 w3c 沒有明確地表示是否允許小數一位以上的數值，不過 firefox 小數二位的數值也可以呈現，真是令人讚賞。

語法實例：

rgba(255, 0, 0, 0.6) → 不透明度 60% 紅色

rgba(0%, 0%, 100%, 0.4) → 不透明度 40% 藍色
hsla(hue 值, saturation 值, lightness 值, alpha 值)

hue 值 (色相值)

以整數「角度」值表示，但是不加「°」角度符號。 0 或 360 →紅色， 60 →黃色， 120 →綠色， 240 →藍色，就好像彩虹色繞成一個圓。如同數學角度，負值或超過 360 是允許的，不過這樣用好像是有點自找麻煩。

saturation 值 (飽和度值)

0% ~ 100% 的百分比值， 0% →灰色調， 100% →最大飽和度。所以 0% 時，不論 hue 值是多少，都會以灰階單色呈現。

lightness 值 (亮度值)

0% ~ 100% 的百分比值， 0% →最暗 (暗黑)， 100% →最亮 (亮白)， 50% →正常亮度。 50% 以上漸漸增加白色， 50% 以下漸漸增加黑色。

alpha 值 (alphavalue)

0.0 ~ 1.0 允許小數一位的數值。

語法實例：

hsla(0, 100%, 50%, 0.3) → 不透明度 30% 紅色

hsla(120, 100%, 20%, 0.4) → 不透明度 40% 暗綠色

hsla(240, 0%, 50%, 0.6) → 不透明度 60% 中亮灰色

transparent 值 - 完全透明的關鍵字 (keyword) 值 ₪

alpha 值 = 1 時，完全不透明，實際上就等同沒有半透明 alpha 值的定義一樣，例如 rgba(255,0,0,1) = rgb(255,0,0) = #ff0000 。

alpha 值 = 0 時，完全透明，像似 css 2 的關鍵字 (keyword) 值 transparent ，當然不管是什麼顏色，透明都是看不見的；不過， transparent 代表的是透明黑色，即 transparent = hsla(0,0%,0%,0) = rgba(0,0,0,0) 。所以，這也就意味前景色 (color) 特性 (property) 也接受 transparent 值了，如 color:transparent; 或 color:rgba(0,0,0,0); ，而這在 css level 2 是不允許的。

思考 - 背景半透明效果輕鬆設計： css color module level 3

顏色單位 (color units) 在 css 設計裡，主要運用在指定背景色 (background) 、邊線色 (border) 、前景色或文字色 (color) ，而多了可以直接定義顏色不透明度 (opacity) 的模式，設計背景半透明效果可說是輕而易舉。

半透明背景色 (`background-color`) 效果

直接看範例一 xhtml

<div id="st1" class="st">
 <div class="inner">
  <h1>也讓時間等一等</h1>
  <p>積極很好。人，肯積極，多半心裡有目標。…
   …以下略，實際內容見範例內…
  </p>
 </div>
</div>

共同基本的 css 定義

html, body, h1, h2, h3 {
 margin: 0px;
 padding: 0px;
}
h1 {
 font-size: 100%;
 font-weight: normal;
}
p{
 margin-top: 1em;
 margin-bottom: 1em;
}
h1,p{
 padding: 1em 1.25em;
}
.st {
 color: white; /*文字白色*/
 /*div.st加背景圖片並定義與圖片同尺寸*/
 background: url(圖片檔案位址) no-repeat center;
 height: 534px;
 width: 800px;
 overflow: auto; /*內容超過高度時產生捲軸*/
 margin: 1.2em auto 0;
 text-align: justify;
 border:1px solid rgb(60%,60%,60%);
 border-right:none;
}

css 定義半透明背景色 (background)

#st1 .inner {
 padding: 1em 4%;
}
/*標題 h1, 段落 p 加半透明背景色*/
#st1 h1 {
 background: rgba(30%,0%,0%,0.6);
}
#st1 p {
 background: rgba(0%,10%,20%,0.6);
}

實際呈現可參閱 [範例一]

多層半透明色重疊效果 - 背景加上邊線色 (`border-color`)

共同的 css 定義與範例一相同。

範例二 xhtml

<div id="st2" class="st">
 <div class="inner">
  <h1>也讓時間等一等</h1>
  <p>積極很好。人，肯積極，多半心裡有目標。…
     …以下略，實際內容見範例內…
  </p>
 </div>
</div>

css 增加定義半透明邊線色 (border)

#st2 .inner {
 padding-bottom: 0.25em;
}
/*半透明背景色與例一雷同*/
#st2 h1 {
 background: rgba(40%,0%,0%,0.6);
 border-top: 2em solid;
 border-right: 260px solid;
 border-bottom: 0.5em solid;
 border-color: rgba(100%,100%,100%,0.2); /*20%白色*/
} /*三邊加上不同寬度的 border*/
#st2 p {
 background: rgba(0%,10%,20%,0.6);
 border-top: 12px solid rgba(100%,100%,100%,0.4);
 border-right: 12px solid rgba(55%,55%,65%,0.4);
 border-bottom: 12px solid rgba(30%,30%,40%,0.4);
 border-left: 12px solid rgba(80%,80%,90%,0.4);
} /*四邊加上40%不同顏色的 border*/

實際呈現可參閱 [範例二]

需要了解的是， css 指定元素的背景色或背景圖片 (background) 會顯示在 border edge 區域以內，也就是說， border 色與 background 色是重疊的，當 border 顏色定義成半透明時，就會與其後方背景顏色產生混合。在範例二中， h1 加了 20% 半透明白色 border ，但實際呈現的是疊合了暗紅的半透明背景色，因而，在最後面的背景圖片被不同的半透明顏色覆蓋，而產生不同的層次感，並且因為寬度不同的 border 而使設計更具活潑感；而 p 則在四邊運用不同的顏色與背景色混合，讓背景圖片產生較立體的半透明視覺效果。

這樣的雙層半透明網頁設計效果，只在一個元素 (element) 上定義樣式 (styles) 就可輕易完成，沒有 css level 3 時根本困難重重。

文字半透明 (`color`) 效果

顏色單位 (color units) 當然可以用在 css color 特性 (property) ， color 通常用來指定文字的顏色，所以也就可以讓文字變成半透明了。

共同的 css 定義與範例一相同。

範例三 xhtml

<div id="st3" class="st">
 <div class="inner">
  <h1>也讓時間等一等</h1>
  <p>積極很好。人，肯積極，多半心裡有目標。…
     …以下略，實際內容見範例內…
  </p>
 </div>
</div>

css 把標題首字變半透明色 (color)

#st3 h1::first-letter {
 /* h1 第一個字變粗大且半透明呈現*/
 font: 900 900% "標楷體",simhei,"細明體";
 vertical-align: -8%;
 color: rgba(85%,100%,100%,0.5); /*50%亮藍*/
}
/*半透明背景及邊線,與前例雷同*/
#st3 h1 {
 background: rgba(40%,0%,0%,0.4);
 border-bottom: 20px solid rgba(50%,20%,30%,0.4);
 border-left: 60px solid rgba(50%,20%,30%,0.4);
 padding: 1em 1.25em 0 0;
}
#st3 p {
 background: rgba(0%,10%,20%,0.6);
 border-top: 12px solid rgba(100%,100%,100%,0.4);
 border-right: 12px solid rgba(55%,55%,65%,0.4);
 border-bottom: 12px solid rgba(30%,30%,40%,0.4);
 border-left: 12px solid rgba(80%,80%,90%,0.4);
}

實際呈現可參閱 [範例三]

當然，半透明文字的顏色也會與背景色疊合成另一個半透明色，再讓最後面的背景圖片穿透上來。

css 3 `hsla` 讓定義色彩及明暗度更直覺

以色相、飽和度、亮度 (Hue, Saturation, Lightness - HSL) 指定顏色，也是 css 3 開始有的顏色單位，與色彩模型中的 HSB 有些類似，或許還有很多人不太習慣，不過許多情況它還挺方便用的。

共同的 css 定義與範例一相同。

範例四 xhtml

<div id="st4" class="st">
 <div class="inner">
  <h1>也讓時間等一等</h1>
  <p>積極很好。人，肯積極，多半心裡有目標。…
     …以下略，實際內容見範例內…
  </p>
 </div>
</div>

css 改變半透明色的飽和度及亮度

#st4 .inner {
 padding: 1em 4%;
}
#st4 h1 {
 background: hsla(120,60%,20%,0.6);
 border-top: 1.5em solid hsla(120,40%,12%,0.3);
 border-right: 80px solid hsla(120,40%,50%,0.3);
} /*背景及邊線都是綠色調*/
#st4 p {
 background: hsla(0,70%,30%,0.7);
 border-right: 80px solid hsla(0,70%,80%,0.2);
} /*背景及邊線都是紅色調*/

實際呈現可參閱 [範例四]

很多時候需要以同一種色調 (Hue or Tone)，呈現出不同明暗度的感覺，讓視覺上更有層次及立體感，範例中使用 hsla 定義顏色會是個好方法。眼尖的人應該已經看出，h1 或是 p 中指定的色相值 (Hue) 都是一樣的，也就是說用了同一種色調，而只是單純地在背景色 (background) 或是 border 定義不同的亮度值 (Lightness)，就可以產生更有深度的視覺效果；而如果希望降低或增加顏色的鮮艷度，如範例中只需要指定較低或較高的飽和度值 (Saturation) 就可以了， h1 就只是稍微改變了飽和度。使用 hsl 定義顏色，確實可以讓我們省卻不斷地挑選 rgb 顏色的麻煩，因為只要決定一個顏色，剩下就由亮度或飽和度來調整就可以了。

未支援 `rgba`, `hsla` 的瀏覽器也想半透明效果

未支援具有半透明 alpha 值色彩單位 (color units) 的瀏覽器，如果使用 rgba, hsla 指定色彩，只會略過該項定義，但不會因此而影響樣式表 (style sheets) 裡其它的定義。因此，我們可以另外替未支援的瀏覽器定義一組色彩，以範例一背景定義為例：

css 增加定義給未支援瀏覽器

#st1 h1 {
 background: rgb(30%,0%,0%); /*未支援瀏覽器指定不透明色*/
 background: rgba(30%,0%,0%,0.6);
}
#st1 p {
 background: rgb(0%,10%,20%); /*未支援瀏覽器指定不透明色*/
 background: rgba(0%,10%,20%,0.6);
}

未支援的瀏覽器只會執行第一項不透明顏色的定義，第二項會略過不產生任何影響；對於有支援半透明色彩的瀏覽器，雖然兩項定義都有效，但當然是以最後一項為執行的依據；所以，注意兩項順序顛倒就不會有半透明效果囉。這種作法，至少未支援的瀏覽器不至於結果差距太多。

以 png 格式半透明圖片作為背景

未支援的瀏覽器如果也想要有類似前述半透明效果的背景顏色，只要先製作一個很小的 png 格式的半透明圖片，例如 10×10 px 不透明度 (opacity) 70% 的黑色圖片 [圖例下載→ ] ，然後定義成背景圖片 (background-image)。以範例一的 p 為例：

css 改成定義背景為半透明 png 圖片

#st1 p {
 background: url(bg_bk70.png); /*未支援瀏覽器指定半透明背景圖片*/
 background: rgba(0,0,0,0.7); /*70%黑色*/
}

第一項除了 ie 6 沒辦法「正確」呈現外，其實較新型瀏覽器 (包括 ie 7) 都會有半透明黑色背景，唯一有點不方便的是，如果定義不同顏色的半透明背景，每次都必須製作不同的半透明 png 圖片。實際上，只需要第一項就可以在各家瀏覽器達到半透明背景的效果了。加上第二項將會更好，因為也可以讓有支援 alpha 值的瀏覽器直接運用更便利的 css 半透明顏色定義方式，對未來更有幫助，第二項的定義會將背景圖片 (background-image) 變成預設值 none (無)。

css 3 的 opacity 不透明度特性，像這樣 opacity:0.7; ，如果想要運用在此處，其實不是很恰當，因為 opacity 的定義會使整個元素 (element) 都變成半透明，包括內容裡的文字，如此可能影響閱讀，目前卻有很多人使用這種方法，有點匪夷所思，有興趣可以參閱久久前的某一個討論，裡面也有提到麻煩的 opacity 處理方式及以下將會提到的 ie filter 中的 alpha opacity。

filter 中的 `alpha(opacity)` 不透明度指定給 ie 6

ie 6 就需要用到 ie 專用 (ie only) 的 css filter 語法中 alpha 的不透明度 opacity ，不過這個方法也是整個元素 (element) 都會半透明呈現，而且元素必須指定 hasLayout property ；也由於是特定給 ie 6 的設計，所以最好運用 css hacks 技巧：

css 接著前例，定義半透明給 ie 6

* html #st1 p {
 background: rgb(0,0,0); /*背景黑色，也讓先前指定的背景圖片回復沒有*/
 zoom: 1; /*hasLayout*/
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); /*70%不透明度*/
}

這是 ie 專用 (ie only) 語法，所以其實 ie 7 也可以用。麻煩的問題是裡面文字內容也半透明了，雖然有一奇特方法， css 定義其內層元素 (element) 為 position: relative; 就可讓裡面內容回復成不透明。但是像範例中的 p ，內層沒有可定義的元素 (element) 也就沒輒了，其實部落格設計也會遇到沒辦法自己增加元素的問題。另外，像範例中有捲軸產生捲動內容，但是在 ie 如果內層定義成 position: relative; ，該元素 (element) 就像是「固定」在原位，不會隨捲軸捲動了。所以，指定 ie 這個特性時，只能多注意一點囉。

ie 6 也使用半透明 png 圖片作背景

另一種 ie 專用 (ie only) 的 css filter 語法中 AlphaImageLoader ，可以讓 ie 6 「較正確」呈現半透明 png 圖片，不過圖片會「插在」背景 (background) 及內容 (content) 之間，所以如果原先有指定背景，會變成像似兩個重疊的背景：

css 改成「插入」半透明 png 圖片當背景

* html #st1 p {
 background: none; /*先前指定的背景圖片改回沒有*/
 zoom: 1; /*hasLayout*/
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="bg_bk70.png",sizingMethod="scale");
 /*插入圖片並縮放至與元素同尺寸*/
}

圖片會由所在元素的 border box 左上角開始插入。語法中 filter 內的 src="bg_bk70.png" (綠字) ，明顯地，雙引號內就是指出圖片檔的位址。而 sizingMethod="scale" 可以有三種選擇：

sizingMethod="image" ：不論所在元素的 Box 大小，圖片一律以圖片本身尺寸完整顯示。如果 Box 尺寸大於圖片， Box 超過圖片的區域會被「裁掉」不顯示；如果 Box 尺寸小於圖片， Box 會保持尺寸，不會增大，而圖片則會「突出」 Box 範圍。這個定義是預設值，所以沒有 sizingMethod 這段時，仍會套用此定義。
sizingMethod="scale" ：圖片會自動依據元素的 border box 尺寸縮放，所以圖片呈現可能會寬高不等比例變形。
sizingMethod="crop" ：圖片會保持圖片本身尺寸，但是圖片超出 Box 範圍的部分，不會顯示，類似 css 定義背景圖片的呈現方式。

看起來似乎達到想要的半透明背景效果，也不會讓內容文字也變半透明。這樣的作法只是為了讓原本不能正確呈現的 ie 也能有我們想要的效果，嚴格說起來應算是 ie 的旁門左道，並非 w3c 標準規範。怪的是 ie 仍有不可預期的問題，使用時要先有心理準備就是了，像是內容如果包括需要滑鼠感應的元素 (如按鈕、輸入項之類) ，會變成無法執行，又得以 css 指定這類元素 position:relative; 才會作用。

參考資源

CSS 3 Color Units - w3c 官方文件 (英文) 。

散佈、展示請參閱 Creative Commons 授權條文，禁止重混，引述請增加原文連結。

不老師發表在痞客邦留言(8) 人氣()

個人分類：CSS單位(units),值(value)

▲top

把玩 css 網頁視覺設計、矜持 w3c 網頁標準語法 (html)、體認友善的無障礙網頁 (accessibility)。靜墨的荒莫 ～ 不老師

html 5 使用者輸入元素 (ui elements) 新屬性

友善的填表介面

placeholder ₪

autofocus ₪

autocomplete ₪

list ₪

驗證 (validation)

required ₪

pattern ₪

title ₪

min|max|step ₪

novalidate ₪

formnovalidate ₪

輸入項不必是 form 元素的下層

form ₪

css gradient 漸層設計冥想

Linear Gradients 直線形漸層 ₪

Radial Gradients 放射形漸層 ₪

CSS 漸層無接縫背景桌布創意發想

css 3D 動畫 (3D animation) ：立方體

css 3D 立方體動畫

javascript 輪播廣告範例三則

輪播廣告設計 (一) ：含縮圖列

輪播廣告設計 (二) ：多組輪播同步循環

輪播廣告設計 (三) ：輪播中的輪播

css 3 動態視覺範例二組：

(一) CSS 動畫設計特效發想

(二) css 動態視覺發想

css transform 能旋轉、傾斜、縮放變形 box

transform-origin 特性 (property) 指出變形的參考點座標 (中心軸) ₪

廠商專屬擴充特性 (vendor-specific extensions) ₪

思考 - css 變形效果 (css transform) 突破網頁排版障礙

旋轉效果 transform:rotate(θ)

旋轉的變形矩陣語法 transform:matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

傾斜效果 transform:skewX(θ), transform:skewY(θ), transform:skew(θx,θy)

傾斜的變形矩陣語法 transform:matrix(1,tanθy,tanθx,1,0,0)

縮放效果 transform:scaleX(m), transform:scaleY(m), transform:scale(mx,my)

縮放的變形矩陣語法： transform:matrix(mx,0,0,my,0,0)

移動效果 transform:translateX(o), transform:translateY(o), transform:translate(ox,oy)

移動的變形矩陣語法： transform:matrix(1,0,0,1,ox,oy)

同時綜合多種不同變形效果。

matrix 複雜的變形矩陣，稍舊版 ie 也能玩 matrix 。

transform 後的異常

css box-shadow 產生陰影效果或光暈效果的特性

思考 - css box-shadow 輕鬆呈現質感好、多變化的陰影效果或光暈效果。

表格或表單控制元件在部分瀏覽器異常呈現

css attribute selectors (css 屬性指標)

思考 - 養成良好的語言撰寫習慣

屬性值的引號 (quotes) 應括出來，尤其在 jQuery attribute selector。₪

樹狀選單加入樹狀線條的設計

思考 - css 設計的構思與佈局

開始：定義一些基本的 css 設計

line-height (行高) 是設計的主要概念

產生樹狀的垂直線條

產生樹狀的水平連接線條

css position:relative; 讓 a 向下位移 (offset)

背景顏色蓋掉重疊的線

增加距離避免重疊，就算完成了。

hasLayout 處理 ie bugs

在子選項前加小圖示，並且做最後修飾

具有半透明值 (alpha 色版) 的 css 3 顏色單位

transparent 值 - 完全透明的關鍵字 (keyword) 值 ₪

思考 - 背景半透明效果輕鬆設計： css color module level 3

半透明背景色 (background-color) 效果

多層半透明色重疊效果 - 背景加上邊線色 (border-color)

文字半透明 (color) 效果

css 3 hsla 讓定義色彩及明暗度更直覺

未支援 rgba, hsla 的瀏覽器也想半透明效果

以 png 格式半透明圖片作為背景

filter 中的 alpha(opacity) 不透明度指定給 ie 6

ie 6 也使用半透明 png 圖片作背景

本站搜尋

出爐文章

文章分類

CSS selectors語法(CSS教學) (3)

CSS property語法(CSS教學) (3)

CSS語法與一般規則(CSS教學) (2)

CSS設計研討 (3)

(x)HTML語法(教學) (2)

把玩 css 網頁視覺設計、矜持 w3c 網頁標準語法 (html)、體認友善的無障礙網頁 (accessibility)。靜墨的荒莫～不老師

`placeholder` ₪

`autofocus` ₪

`autocomplete` ₪

`list` ₪

`required` ₪

`pattern` ₪

`title` ₪

`min|max|step` ₪

`novalidate` ₪

`formnovalidate` ₪

輸入項不必是 `form` 元素的下層

`form` ₪

css `transform` 能旋轉、傾斜、縮放變形 box

`transform-origin` 特性 (property) 指出變形的參考點座標 (中心軸) ₪

思考 - css 變形效果 (css `transform`) 突破網頁排版障礙

旋轉效果 `transform:rotate(θ)`

旋轉的變形矩陣語法 `transform:matrix(cosθ,sinθ,-sinθ,cosθ,0,0)`

傾斜效果 `transform:skewX(θ)`, `transform:skewY(θ)`, `transform:skew(θ_x,θ_y)`

傾斜的變形矩陣語法 `transform:matrix(1,tanθ_y,tanθ_x,1,0,0)`

縮放效果 `transform:scaleX(m)`, `transform:scaleY(m)`, `transform:scale(m_x,m_y)`

縮放的變形矩陣語法： `transform:matrix(m_x,0,0,m_y,0,0)`

移動效果 `transform:translateX(o)`, `transform:translateY(o)`, `transform:translate(o_x,o_y)`

移動的變形矩陣語法： `transform:matrix(1,0,0,1,o_x,o_y)`

`matrix` 複雜的變形矩陣，稍舊版 ie 也能玩 `matrix` 。

`transform` 後的異常

css `box-shadow` 產生陰影效果或光暈效果的特性

思考 - css `box-shadow` 輕鬆呈現質感好、多變化的陰影效果或光暈效果。

`line-height` (行高) 是設計的主要概念

css `position:relative;` 讓 `a` 向下位移 (offset)

`hasLayout` 處理 ie bugs

半透明背景色 (`background-color`) 效果

多層半透明色重疊效果 - 背景加上邊線色 (`border-color`)

文字半透明 (`color`) 效果

css 3 `hsla` 讓定義色彩及明暗度更直覺

未支援 `rgba`, `hsla` 的瀏覽器也想半透明效果

filter 中的 `alpha(opacity)` 不透明度指定給 ie 6