本篇介紹CSS3的漸層,而就漸層這功能聽起來,似乎沒有什麼樣的變化,但其實透過復合式的背景可以堆疊出相當多的變化。
本篇CSS效果發表於<http://ashareaday.wcc.tw/#2013-09-24 >(建議使用Chrome瀏覽器)
本篇CSS效果發表於<http://ashareaday.wcc.tw/#2013-09-24 >(建議使用Chrome瀏覽器)
漸層
.gradient {
background: #bf2c73;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff3b99), color-stop(100%, #7f1d4d));
background-image: -webkit-linear-gradient(#ff3b99, #7f1d4d);
background-image: -moz-linear-gradient(#ff3b99, #7f1d4d);
background-image: -o-linear-gradient(#ff3b99, #7f1d4d);
background-image: linear-gradient(#ff3b99, #7f1d4d);
}
CSS3漸層在各個瀏覽器的前輟詞並不相同,但在這邊不會特別介紹,主要會利用sass做範例(必須承認,不用sass寫那些前輟詞真的很痛苦...)
+background-image(linear-gradient(left, #E80C7A,rgba(#E80C7A,.5), #E85D2D))
+background-image(linear-gradient(bottom, #E80C7A,rgba(#E80C7A,.5), #E85D2D))
//從下方開始
+background-image(linear-gradient(-35deg, #E80C7A,rgba(#E80C7A,.5), #E85D2D))
//旋轉
這是最基本的漸層,除了垂直之外也可以改成水平甚至是有角度的。
+background-image(radial-gradient(#E80C7A,rgba(#E80C7A,.5), #E85D2D))
//放射狀
另外還有放射狀的漸層。
多重背景
+background-image(linear-gradient(left, rgba(#E80C7A,.5) 20%, transparent 50%))
+background-image(linear-gradient(top, rgba(#E80C7A,.5), transparent 70%))
這邊是兩個不同方向的漸層,下面要將他們合併。
+background(linear-gradient(left, rgba(#E80C7A,.5) 20%, transparent 50%),linear-gradient(top, rgba(#E80C7A,.5), transparent 70%))
//兩個漸層只要用逗點隔開即可,這樣就可以做出多層次的漸層
在CSS3中背景可以做兩層以上,而不只是漸層,所有的背景圖案都可以,只要用逗點隔開就可以一直堆疊下去;所以在這邊我們只要把漸層語法用逗點隔開,就可以堆疊漸層。
圖樣背景
來源:http://codepen.io/html5web/pen/HDCrK
+background-image(linear-gradient(-45deg, #000 5px, transparent 50px))
background-size: 50px 50px
//利用background-size去控制每個背景的大小
如果要做類似圖樣的背景,我們可以設定背景的大小background-size,就可以做出一塊一塊的圖樣。
+background-image(radial-gradient(#fff 3px, transparent 5px, #fff 7px, transparent 9px, #fff 11px, transparent 13px, #fff 15px, transparent 17px, #fff 19px, transparent 21px, #fff 23px, transparent 25px, #fff 27px, transparent 29px, #fff 31px, transparent 33px))
background-color: #111
background-size: 30px 30px
//漸層還可以設定每個顏色的距離,只要在顏色後方輸入數值
漸層還可以設定每個顏色的區段距離,只要在色彩後方輸入數值就可以了。
旋轉吧漸層
來源:http://codepen.io/agriboz/pen/izLak
+background(linear-gradient(45deg, #557777 50%, transparent 50%),linear-gradient(90deg, #ee6655 100%, transparent 100%),linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%,linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%,linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%,linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%,linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%,linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%)
//很抱歉,這顏色就是那麼的....長
background-repeat: no-repeat
background-size: 50% 50%
+border-radius(50%)
margin: 0 auto
width: 150px
height: 150px
border: 1em solid tomato
+transition(all, 3s)
//加點動態
&:hover
+transform(rotate(3600deg))
甚至結合其他語法,可以有更豐富的玩法,像是這結合了border-radius、transition、transform等等,讓這個元素像是轉盤一樣在旋轉。
可以到本網站看動態效果 http://ashareaday.wcc.tw/#2013-09-24
+background(linear-gradient(45deg, #557777 50%, transparent 50%),linear-gradient(90deg, #ee6655 100%, transparent 100%),linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%,linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%,linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%,linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%,linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%,linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%)
background-repeat: no-repeat
background-size: 50% 50%
//移除動態及一些其他設定,僅保留重要的設定值
而這個效果很特別他每個漸層顏色是設定50%有色彩,另外50%是透明,然後每45度做一次顏色。
+background(linear-gradient(45deg, #557777 50%, transparent 50%),linear-gradient(90deg, #ee6655 100%, transparent 100%),linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%,linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%,linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%,linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%,linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%,linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%)
background-repeat: no-repeat
//在移除background-size: 50% 50%
並且每個漸層色只有50%*50%的大小,就是1/4的區域,如果沒有background-size: 50% 50%,他就會像上面這範例這樣。