譯自:Quick Tip: Understanding CSS3 Gradients
中文:理解CSS3漸變
為了顯示一個漸變而專門制作一個圖片的做法是不靈活的,而且很快會成為一種不好的做法。但是遺憾的是,截至寫這篇文章,可能還必須這樣做,但是希望不會持續太久。多虧Firefox 和Safari/Chrome,我們現在可以使用最少的努力實現強大的漸變。在本文中,我們將展示CSS漸變的簡單實現以及該屬性在Mozilla和webkit內核瀏覽器中的不同。
PS:本文原文本來提供了一個視頻,但是由于眾所周知的原因,我們無法觀看這個在Youtube上的視頻,想看的同學請自己想辦法觀看(最高720P) : http://www.youtube.com/watch?v=9D2hyM5SSCE
盡管Mozilla和Webkit通常對CSS3屬性采取同樣的語法,但是對于漸變,他們很不幸的不能達成一致。Webkit是第一個支持漸變的瀏覽器內核,它使用下面的結構:
/* Syntax, taken from: http://webkit.org/blog/175/introducing-css-gradients/ */
-webkit-gradient(
/* In practice... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
不要擔心這些語法會讓你看花眼,我也是這樣的!只要記得我們需要用一個逗號來隔開這個參數組。
Firefox,從3.6版本才開始支持漸變,更喜歡和Webkit略微不同的語法。
/* Syntax, taken from: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ */
-moz-linear-gradient( [
/* In Practice */
background: -moz-linear-gradient(top, red, blue);
如果你不需要從一個顏色到另一個顏色的100%漸變怎么辦?這就是color stop起作用的時候了。一個普遍的設計技術是使用一個較短而細微的漸變,比如:
注意頂部的淺灰色到白色的細小的漸變
在過去,標準的做法就是制作一個圖片,并將其設為一個元素的背景圖片,然后讓其水平平鋪。然而使用CSS3,這是個小Case。
background: white; /* fallback for older/unsupporting browsers */
background: -moz-linear-gradient(top, #dedede, white 8%);
background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));
border-top: 1px solid white;
這次,我們讓漸變結束于8%,而不是默認的100%。請注意我們也在頭部采用了一個邊框,以形成對比。這很常用。
如果我們想要添加多一種(幾種)顏色,我們可以這樣做:
background: white; /* fallback for older/unsupporting browsers */
background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);
IE并不支持CSS漸變,但是提供了漸變濾鏡,可以實現最簡單的漸變效果:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=""#ffffff"", endColorstr=""#ff0000""); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=""#ffffff"", endColorstr=""#ff0000"")"; /* IE8 */
PS:事實上,我們在《RGBa色彩的瀏覽器支持》提到的IE的解決方法,就是使用這個漸變濾鏡。
Copyright@ 2011-2016 版權所有:大連千億科技有限公司 遼ICP備11013762-3號 google網站地圖 百度網站地圖 網站地圖
公司地址:大連市沙河口區中山路692號辰熙星海國際2317 客服電話:0411-39943997 QQ:2088827823 37482752
法律聲明:未經許可,任何模仿本站模板、轉載本站內容等行為者,本站保留追究其法律責任的權利! 隱私權政策聲明