Category Archives: CSS

[CSS]content

這是一個在元素前面或後面插入內容的方法(搭配 selector:before和selector:after)

HTML:

CSS:

這樣在畫面就會顯示成 Google~~http://www.google.com~~

Continue Reading

[CSS]float水平並排時自動延展

利用float並排區塊時,當區塊的高大於父區塊的高時,常會遇到父區塊無法自動延展的狀況

例如 CSS

HTML

解決的方法就是在#content加入overflow:hidden。 hidden的意思是內容嵌入顯示區域,如果設定了高度,當資料量超過區塊時捲軸不會出現(多出來的資料會隱藏)。反之若定義最小高度(min-height)或沒有定義高度,區塊就會隨著資料量延伸

Continue Reading

[CSS]z-index

在開發網頁時,有時候為了一些特殊的網頁效果,必須讓某些圖片蓋在另一個區塊上。但有時候為了應付這樣子的效果,反而讓HTML的結構或畫面的延展變的不太容易調整,透過CSS的z-index屬性可以調整區塊的權重,自由選擇哪一個區塊在最上方顯示。

z-index的值需填入整數(預設或auto代表權重是0)

範例: HTML

CSS

以上的效果會讓div1的壓在div2的上方

Continue Reading

[CSS]transform 3D & perspective

CSS3的transform可以做2D的操作,當然也有3D

但需要再一個擁有perspective屬性的父元素才能顯現3D的效果

例如:

perspective屬性固名思義就是透視的意思;該屬性可以定義3D視覺的角度,讓底下子元素使用3D特效時能夠完整顯示。

perspective使用方法

另外還有個屬性叫perspective-origin 功能是用來定義X和Y軸為基礎的3D位置(定義初始位置)

perspective-origin使用方法 屬性值:(x軸:left、center、right、長度、百分比) (y軸:top、center、bottom、長度、百分比)

注意:perspective和perspective-origin受影響的是子元素,而非元素本身

最後就可以對div做3D的效果(rotateX和rotateY)

Continue Reading

[CSS]transform 2D

之前有看到google將搜尋的頁面傾斜,這個功能透過CSS3的transform就可以達成

CSS3 2D transform特性可以旋轉、傾斜、放大縮小和移動元素,對網頁的視覺觀感上提供很大的幫助

使用方法:

變形函式 transform-function: 函式裡的θ參數要有單位,有三種單位可以使用:deg (角度) 、 rad (弧度) 、 grad (梯度)。

1.rotate(θ):以參考點為中心軸 2D 旋轉 θ 度。 2.skew(θx,θy):以參考點為中心軸沿著橫向傾斜 θx 度、縱向傾斜 θy 度( 可以拆開成skewX(θ)和skewY(θ) ) 3.scale(x,y):指定元素由參考點 2D 橫向縮放 x 倍、縱向縮放 y 倍( 可以拆開成scaleX(x)和scaleY(y),此函式的參數不需要單位 ) 4.translate(x,y):指定元素由參考點 2D 橫向移動 x 距離、縱向移動 y 距離( 可以拆開成translateX(x)和translateY(y),此函式的參數單位為px ) 5.matrix(a,b,c,d,e,f):指定元素由參考點依據數學變形矩陣 (transformation matrix) 的 6 個參數值產生 2D 變形( 此函式的參數為數字,不需要單位 ) …

Continue Reading

[CSS]CSS3漸層色

以往做漸層色區塊都是以做好的圖片來拼貼處理

現在CSS3已經有linear-gradient可以直接做漸層了,只要填入要從起始色碼以及漸層到哪個色碼就可以了

不過因為CSS3不同瀏覽器都有不一樣的支援程度,所以使用上還是略為麻煩,建議使用linear-gradient漸層前先讓區塊上個單色的background,以免瀏覽器不支援時變白色

以下為linear-gradient用法

Continue Reading

[jQuery]Accordion element.style

在Accordion中,下層的div會自動加上element.style的css

最近遇到一個狀況,在同一頁面同時使用Accordion和其它外部的jQuery UI套件時

element.style的height屬性都會變成0,導致手風琴無法展開(正常情況下會是div原本的高度)

經過查證,如果把另外的jQuery UI套件拿掉就又正常了

不過要從一個jQuery UI套件裡找出哪邊有問題又很麻煩和費時

其實只要針對Accordion的autoHeight下手就可以(拿掉autoHeight,直接使用原先你所預訂的高度就好)

Continue Reading

[CSS]圓角、圓形

CSS:

Firefox:

Chrome、Safari:

另外如果要讓某個div變成圓形,只要四個角圓角的角度大於等於寬度的一半就可以了

Continue Reading