html 5 使用者輸入元素 (ui elements) 新屬性
- 說明: html 5 在填表相關元素 (form-associated elements) 增加了不少有用的屬性 (attributes) 。有的是強化使用者易用性,也使觸控裝置有了處理的原則。有的是在瀏覽器增加了驗證 (form validation) 功能,簡化了以往只能倚賴的複雜的 javascript 程序。
- 適合:有 html 語法基礎概念者。
- 難度:
- 更新:
- 支援:詳細可參考 MDN 的整理。
linear-gradient(direction, color-stop, ……, color-stop)
repeating-linear-gradient(direction, color-stop, ……, color-stop)
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-gradient(size at cp, color-stop, ……, color-stop)
repeating-radial-gradient(size at cp, color-stop, ……, color-stop)
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) 表示:farthest-side
farthest-corner
farthest-side
時的比例。此為内定值 (没有指定時) 。closest-side
closest-corner
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);
參考→基本範例教學
撰文時,各家瀏覽器尚有些許瑕疵; firefox 僅在部分細微處有偏色問題; IE 僅有一範例錯誤,表現很佳;出乎意料地, google chrome 非常糟。範例中有標註最正確呈現的瀏覽器,讀者可自行比較。部分範例以 css animation
加入動畫效果,以彰顯一般繪圖軟體或 flash 很難處理的技術。
css gradient 視覺冥想 (範例來源連結)
animation
動畫特性,搭配 3D transform
造形,讓我們不需用到 3D 動畫軟體,不需要撰寫程式,不需要 3D 繪圖,就能做出 3D 立體透視效果。特別僅運用 CSS 技術,做出簡單的 3D 立方體及動畫範例。CSS 3D 動畫瘋 (範例來源連結)
Cycle2 Slideshow 附縮圖列 (範例來源連結)
Cycle2 多組同步循環輪播片 (範例來源連結)
Cycle2 輪播中的輪播片 (範例來源連結)
transform
能旋轉、傾斜、縮放變形 boxtransform
特性 (css properties) ,直接就可以旋轉、歪斜、放大、縮小、移動元素 (elements) 的 box ,甚至 3D 的迴旋、透視。包括整個元素所有的內容也都隨之變形,不再侷限只能在僵硬的矩形框,對網頁排版及設計上會有很大的彈性和突破,而且對網頁正常的編排不會有相互排擠問題,一格黏接一格耗時費工的殘腦時代終將走入歷史。本篇僅先就 2D transform
的部分討論。transform: transform-function;
none
;表示沒有套上任何變形。transform-origin
特性 (稍後說明) ,可指定不同的位置點;例如我們想以元素的左上角為旋轉中心軸,或是中心軸改在元素的外面也可以。transform-function
(transformation functions) ₪函數括號內的角度 θ
參數必須有單位,可以是 deg
(角度 ° ) 、 rad
(弧度) 、 grad
(梯度) ,大小寫都可接受; m
, a
, b
, c
, d
, e
, f
參數為數字,不需要單位; o
參數為合法的尺寸值 (length) 或 % (百分比) 。
rotate(θ)
θ
度。skewX(θ)
θ
度。skewY(θ)
θ
度。skew(θx,θy)
θx
度、 縱向傾斜 θy
度。參數如果只指定 1 個,省略的第 2 個參數,會視為 0 ,也就是只有沿橫向傾斜。September, 2012 w3c 草書又復原此項scaleX(m)
m
倍。scaleY(m)
m
倍。scale(mx,my)
mx
倍、縱向縮放 my
倍,等於是結合 scaleX(mx)
, scaleY(my)
。參數如果只指定 1 個,省略的第 2 個參數,會等於第 1 個,也就是橫向、縱向以相同比例縮放。translateX(o)
o
距離。translateY(o)
o
距離。translate(ox,oy)
ox
距離、縱向移動 oy
距離,等於是結合 translateX(ox)
, translateY(oy)
。參數如果只指定 1 個,省略的第 2 個參數,會視為 0 ,也就是只有橫向移動。matrix(a,b,c,d,e,f)
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;
center
, top
, right
, bottom
, left
) ,依據字意即可表示方向和位置,所以 2 個值沒有順序問題。center
(50%) 。transform-origin:100px 20px;
transform-origin:right;
各家瀏覽器廠商都有自創的 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
就是 。
transform
) 突破網頁排版障礙css transform
變形效果支援的 html 元素,舉凡圖片 (img
) 、視訊影片 (video
) 、多媒體物件 (object
) 都可以旋轉、傾斜,這讓設計者輕輕鬆鬆就能做出令人驚歎的視覺效果。
元素經過變形後,瀏覽器會以插補像素 (interpolation) 運算後重新繪製呈現,以降低出現鋸齒或模糊的現象,這是值得讚許的技術,因為不再需要花不必要的工夫去處理變形後圖形失真或文字模糊的問題。各家瀏覽器插補運算方式當然不盡相同,所以看起來會有些許差異。
至更新時, transform
特性在部分瀏覽器,如 google chrome, safari 等,仍為的專屬擴充特性,所以在特性前需要加上廠商辨識詞,稍後範例的語法以較淡色呈現這部分。而新版的 firefox 及 ie 10 已不需加廠商辨識詞。
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)
元素的所有內容,包括文字、圖片也都旋轉,而且不會影響其它版面編排。
-moz-transform:rotate(3deg);
-webkit-transform:rotate(3deg);
-o-transform:rotate(3deg);
-ms-transform:rotate(3deg);
transform:rotate(3deg);
以 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)
以 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);
以 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);
連續指定沿著橫軸及縱軸傾斜。
-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(mx,my)
transform:matrix(mx,0,0,my,0,0)
以 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);
以中心為基準,縱向橫向縮放都會向上下或左右兩個方向內縮或擴大。
-moz-transform:scaleY(1.8);
-webkit-transform:scaleY(1.8);
-o-transform:scaleY(1.8);
-ms-transform:scaleY(1.8);
transform:scaleY(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);
簡單地只指定 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(ox,oy)
transform:matrix(1,0,0,1,ox,oy)
橫向移動,正值向右、負值向左。這樣的效果和以往運用 position:relative;
指定位移 (offset) 的方法簡直沒什麼兩樣,但是這個移動方式除了語法單純易懂外,還可結合其它變形,更具發揮設計的便利。
-moz-transform:translateX(60px);
-webkit-transform:translateX(60px);
-o-transform:translateX(60px);
-ms-transform:translateX(60px);
transform:translateX(60px);
以百分比為單位,橫向移動以元素本身的寬度計算,縱向移動則以的高度計算;這和 css box 以容納區 (containing block) 尺寸為百分比計算的基準不同。
-moz-transform:translateX(50%);
-webkit-transform:translateX(50%);
-o-transform:translateX(50%);
-ms-transform:translateX(50%);
transform:translateX(50%);
縱向移動,正值向下、負值向上。
-moz-transform:translateY(0.75em);
-webkit-transform:translateY(0.75em);
-o-transform:translateY(0.75em);
-ms-transform:translateY(0.75em);
transform:translateY(0.75em);
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);
同時在一個元素加入 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);
與前例套用相同 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;
特性 (儲存格間沒空隙) ,各家瀏覽器產生有趣的呈現,讀者可以自行試試。::first-letter
, ::first-line
都不支援。box-shadow
產生陰影效果或光暈效果的特性box-shadow: x y blur spread color inset;
none
(只有一個字) 。x y
) 為必要值,必須指定;其餘的值可不定義。color
特性指定的顏色值。inset
) ,改放在第 1 個位置也可以。沒有定義就是一般在外的陰影。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);
接下來會有更多例子討論。
box-shadow
輕鬆呈現質感好、多變化的陰影效果或光暈效果。外陰影 (或外光暈) 會依據 border-box 來計算尺寸及位移,而內陰影 (或內光暈) 則依據 padding-box 來計算。
稍後會看到範例的語法,都有增加了前兩段廠商專屬擴充特性,提供給部分瀏覽器未正式支援標準語法之前的較舊版本使用,加不加這段應視網站的適用領域,並不影響較新版瀏覽器,語法中以較淡色呈現。
-moz-
的:適用 firefox 等較舊版 Gecko 系列。-webkit-
的:適用 safari, google chrome 等較舊版 webkit 系列。border
。background:#def;
border:1px solid silver;
display:inline-block;
padding:0.5em 0.75em;
以下範例的每項主題都有加了對應的 css 效果,沒看到應該有的效果?
-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);
-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);
-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);
-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);
-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 陰影呈現在儲存格上。button
, input
) ,在 ie, google chrome 須指定新的背景色,或背景透明才會有效。box-shadow
的 color
值才會有效。box-shadow
- w3c 官方文件 (英文) 。id
或 class
的麻煩。用在程式動態產生的 html ,又不能預先指定 id
或 class
的元素,也會很有助益;或是也可以找出屬性值 (attribute value) 有局部相同的元素。部分為 css level 3 (css 3) 新的規範。 jQuery attribute selectors 物件 (object) 相對應的語法也附帶列出,這部分瀏覽器都可支援。selector[att]
att
屬性的元素。<dfn lang="en">selector</dfn>
<label for="mail">email</label>
dfn[lang]
label[for]
jQuery('[att]')
或$('[att]')
例:$('label[for]')
selector[att=val]
att
屬性且屬性值與 val
完全相符的元素。<input type="text"/>
<button type="reset">清除</button>
<a href="http://www.w3.org/" rel="external">W3C</a>
input[type="text"]
button[type="reset"]
a[rel="external"]
jQuery('[att=val]')
或$('[att=val]')
例:$('input[type="text"]')
selector[att^=val]
(此項為 css 3)att
屬性且屬性值字首 (由開端起算的字串) 與 val
完全相符的元素。 val
為空白時,不會指出任何元素。<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/">…
body[class^="ch4"]
object[type^="image/"]
a[href^="http://www.w3.org"]
jQuery('[att^=val]')
或$('[att^=val]')
例:$('body[class^="ch4"]')
selector[att$=val]
(此項為 css 3)att
屬性且屬性值字尾 (由末端回算的字串) 與 val 完全相符的元素。 val
為空白時,不會指出任何元素。<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"/>…
*.st[id$="-2"]
img[src$="photo.png"]
jQuery('[att$=val]')
或$('[att$=val]')
例:$('img[src$="photo.png"]')
selector[att*=val]
(此項為 css 3)att
屬性且屬性值至少有一段字與 val
完全相符的元素。 val
為空白時,不會指出任何元素。<a href="http://tw.info.yahoo.com/SecurityCenter/">…<a href="http://tw.campaign.money.yahoo.com/atm/">…
a[href*=".yahoo.com"]
jQuery('[att*=val]')
或$('[att*=val]')
例:$('a[href*=".yahoo.com"]')
selector[att|=val]
att
屬性且屬性值與 val
完全相符的元素,或是由開端至 - (減號) 前字元完全相符的元素。<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">…
div[class|="article2"]
a[hreflang|="en"]
jQuery('[att|=val]')
或$('[att|=val]')
例:$('div[class|="article2"]')
selector[att~=val]
att
屬性且屬性值有一個字以上以空格分隔,其中一個字與 val
完全相符的元素。 val
為空白時,不會指出任何元素。<h2 title="Fashion Taipei">…<h2 title="Culture Taipei">…<h2 title="New Taipei City">…
<a href="../ch1.htm" rel="first start begin">第一頁</a>
h2[title~="Taipei"]
a[rel~="start"]
jQuery('[att~=val]')
或$('[att~=val]')
例:$('h2[title~="Taipei"]')
較詳細瀏覽器支援問題及 bugs 討論,可參訪 sitepoint (英文)
$('img[src$=".png"]')
$('img[src$=.png]')
本來語法是被寬鬆地允許,但在 jQuery 1.6 以後做了更嚴謹、更快速的處理,「屬性值」如果包含特別的符號,如例中的 . (句號) ,不加引號就會出現語法錯誤。
var f='.png';
$('img[src$='+f+']')
var f='.png';
$('img[src$="'+f+'"]')
有不少以前的 plugin 都已經出現這種錯誤,光除錯就必須再花很多時間,所以養成良好的書寫習慣是重要的,省東省西不見得省時間。
以下將會討論如何巧妙運用 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 設計,希望能激發更多設計想法為主,避免陷入步驟式或教條式的悲慘學習模式。
最外圍的 .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
顏色,如果想另外定義顏色,方法同前。
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 bugsie 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 裡了 (綠字) ,有興趣可以自行試試。
rgba
及 hsla
為 css level 3 (css 3) 起,新一代表示色彩的單位 (color units),最大的進展就是增加了「a
」這個可以定義顏色不透明度 (opacity) 的 alpha 值;顏色的指定,當然包括了背景色 (background
) 、邊線色 (border
) 、前景色或文字色 (color
) 、以及 text-shadow
, box-shadow
的陰影色、 gradient
的顏色等,這讓以往網頁設計需要繁瑣過程的半透明效果變得簡單輕鬆多了。本篇也附帶討論舊式未支援的瀏覽器,可做到類似效果的幾種設計概念。有二種表示方式:
rgba(red 值, green 值, blue 值, alpha 值)
rgb(128,128,128) = rgb(50%,50%,50%) = #808080
。rgba(255, 0, 0, 0.6)
→ 不透明度 60% 紅色
rgba(0%, 0%, 100%, 0.4)
→ 不透明度 40% 藍色
hsla(hue 值, saturation 值, lightness 值, alpha 值)
hsla(0, 100%, 50%, 0.3)
→ 不透明度 30% 紅色
hsla(120, 100%, 20%, 0.4)
→ 不透明度 40% 暗綠色
hsla(240, 0%, 50%, 0.6)
→ 不透明度 60% 中亮灰色
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 是不允許的。
顏色單位 (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);
}
實際呈現可參閱 [範例三]
當然,半透明文字的顏色也會與背景色疊合成另一個半透明色,再讓最後面的背景圖片穿透上來。
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 格式的半透明圖片,例如 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
。
alpha(opacity)
不透明度指定給 ie 6ie 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 專用 (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;
才會作用。
友善的填表介面
placeholder
₪:placeholder-shown
css level 4 pseudo-class 可指定有placeholder
元素的設計樣式。autofocus
₪autofocus
有作用。autocomplete
₪autocomplete="on"
;瀏覽器會記錄該項使用者曾經輸入並送交的內容,日後輸入時會將記錄顯示成下拉選項,方便使用者直接挑選就可以完填,不需要再從頭到尾輸入。autocomplete="off"
,則指定瀏覽器不要顯示下拉選項。list
₪list
屬性值指定為datalist
元素的id
值,在輸入項上輸入時,瀏覽器會取得該datalist
中可能的選項顯示成下拉選項。datalist
的子項option
的value
值;如果沒有value
值,就取得option
的內容作為值。datalist
的選項內容。datalist
元素本身不會顯出,不限制置於文件中任何元素下。list
屬性無法限制輸入內容,使用者仍可輸入非選項中的內容。需要限制輸入,可使用pattern
屬性 。select
元素不同,這個方式在觸控裝置不再是不易操作的下拉鈕。驗證 (validation)
required
₪:required
css level 4 pseudo-class 可指定required
元素的設計樣式。pattern
₪pattern
屬性值,可過濾輸入內容。/
建構符號,與平常語法不同,因此也沒有 flags。title
₪min|max|step
₪max, min
) ,可以是數值或日期時間值;step
指定單位增減值 (每按一次鈕),接受小數值。novalidate
₪form
的專用屬性,瀏覽器會停止驗證,但不會阻礙像是運用 Javascript 處理的驗證。:invalid, :valid
css level 4 pseudo-class 可指定form
或其輸入項元素,驗證不過或通過的設計樣式。formnovalidate
₪novalidate
,差別是此為 submit 送交鈕的專用屬性 。form
元素的下層時,就顯得有用了。輸入項不必是
form
元素的下層form
₪form
元素下層,以form
屬性指定應屬的form
元素的id
。form
元素的下層,可讓 html 結構及動態內容更具彈性。