DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 與眾不同的CSS3技巧
與眾不同的CSS3技巧
編輯:CSS詳解     

你們中有許多人可能已經聽到過有關CSS3的不少傳言,但是我們現在能真正用到的CSS3技巧又有哪些呢?本文,我將向你展示一些與眾不同的CSS3技巧,這些技巧在一些主要的浏覽器中表現良好(如Firefox,Chrome,Safari,Opera浏覽器)。這些效果會在不支持的浏覽器中降級渲染(如IE浏覽器)。使用浏覽器特定的聲明,許多提議的CSS3樣式都可以馬上拿來使用。

CSS Techniques You Should KNow

如果你不知道浏覽器的特定聲明是什麼,你只需要記住它們都是CSS樣式屬性前與內核提供商有關的特定前綴。因為CSS3目前還沒得到全面的支持,所以我們需要使用這些特定聲明。具體的形式如下:

  • Mozilla/Firefox/Gecko浏覽器的前綴: -moz-
  • Webkit (Safari/Chrome)浏覽器的前綴: -webkit- (注意:一些Wbkit的前綴只能在Safari下使用,Chrome不支持。)

你可能已經看到了,使用這些聲明的有一個缺點,那就是如果我們想在Firefox,Safari和Chrome中都得到CSS3的效果,我們需要使用到上面所有這些前綴。也不用驚訝,IE浏覽器不支持CSS3,因此也就不像其他主要浏覽器有一個特定的前綴聲明。

好了,我們已經講的夠多了,我們馬上嘗試一下。注意:樣式聲明去掉這些前綴就是W3標准的實際規范提議。

關於這個頁面的Demo(實例)說明

所有這些例子都是在這個頁面裡面,如果你不能正常查看實例的效果(或者只能查看部分),那說明你正在使用的浏覽器並不支持這些CSS3效果

陰影效果

陰影效果接受多個參數值。第一個是陰影的顏色,它還接受另外四個長度(lenght)值,前兩的長度值分辨是X(水平)偏移量和Y(垂直)偏移量。接下一個參數是反映模糊度的數值。第四也是最後一個值是用來定義模糊的散布程度。

box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;

陰影效果演示

漸變效果

CSS3的漸變樣式剛開始很容易讓人混淆,尤其-moz 和-webkit的漸變之間還存在不同。在-moz中,你首先需要定義漸變的方向,然後定義起始和終止的顏色。而-webkit的漸變則稍稍復雜一些,首先你需要定義漸變的類型,然後接下來兩個值定義方向,最後兩個值定義了漸變的起始顏色和終止顏色。

-moz-linear-gradIEnt(-90deg,#1aa6de,#022147);
-webkit-gradIEnt(linear, left top, left bottom, from(#1aa6de), to(#022147));

:漸變效果演示實例

RGBA顏色模式

RGBA的顏色定義實際用起來沒有給人的感覺那麼復雜,它接受四個參數值,以此是:紅色值,綠色值,藍色值,以及透明度。我們不用hex(#)16進制值的顏色,我們以RGB的模式來設置顏色,其中,透明度可以設置顏色的透明效果。透明度的取值范圍在0到1之間,0是完全不透明,1是顏色完全透明。下面這些演示例子的透明度都是0.5,元素的透明度是50%,rgba不需要附加任何特定的浏覽器前綴聲明。

background-color: rgba(0, 54, 105, .5);

HSL色彩模式(色調H,飽和度S ,亮度L)

除了RGBA,CSS3也支持HSL顏色模式。這給我們在顏色和色調的選擇上提供了充足的余地。在HSL這種色彩模式中的H代表色調,S代表色度,L代表亮度。色調是色盤上角度值  ,而保飽和度和亮度則是顏色的百分比值。

background-color: hsl(209,41.2%, 20.6%);

HSL演示實例

邊框顏色

要使用這一CSS樣式,你需要分別定義border-topborder-rightborder-bottom, 和border-left 才能獲得下面的效果。你注意到定義一個8像素的邊框,然後邊框又定義了8種不同的顏色。這因為邊框的顏色數量必須與邊框的像素寬度值相對應。

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

邊框顏色演示

文本選擇顏色設置

我不得不要說文本選擇顏色的定義是一個相當激動人心的新功能。當我第一次在CSS技巧上看到這個是,我在覺得它非常貼心。有了::selection這對偽對象(pseudo-element),你可以在用戶選一段文本元素時改變顏色和背景。如果你問的看法,我會覺得這非常漂亮。雖然::selection已經從目前的CSS3草案中移除鳥,但是我們希望稍後它在添加進來。

::selection {background: #3C0; /* Safari */color: #90C;}::-moz-selection {background: #3C0; /* Firefox */color: #90C;}

文本選擇顏色演示

變形

有了變形樣式,你可以讓元素的外觀在鼠標懸停時變大。給Scale(比例)值設置一個大於1的數值,元素就會便打。反過來或,如果值小於1,元素的大小就會縮小。除了Scale比例,它還有其他許多不同的變形方式可用。你可以訪問Firefox的開發者頁面,查看它們所能實現的效果

-moz-transform: scale(1.15);-webkit-transform: scale(1.15);

變形效果演示

多欄布局

有了這個新的多欄布局樣式,你可以給文本呈現類似”報紙“排版的效果。跟在CSS2中的實現方法相比,CSS3中,我們實現這類效果要簡單的多。下面,我指定鳥所需要的列數量,以及分離的規則類型,欄與欄之間的空隙有多大。用起來很簡單是吧

-moz-column-count:3;-moz-column-rule: solid 1px black;-moz-column-gap: 20px;

多欄布局演示

總結

我希望跟我一樣,對CSS3的這些特性感到激動。他給網頁設計師和開發者更多的力量,並且讓許多方面都簡化不少。現在,我們只需等待所有浏覽器支持它。當然,我這裡演示的知識CSS3新功能的冰山一角。如果你想了解更多信息,技巧和幫助,我建議你訪問下面這些網站學習。

  • CSS: Current Work
  • CSS3.info
  • Mozilla CSS Extensions
  • The WebKit Open Source Project
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved