CSS gradient 漸層創意設計

1,490 views

gradient漸層視覺設計

Skip to first unread message

不惑仔

unread,

Nov 28, 2013, 1:21:54 AM11/28/13

to css-anim...@googlegroups.com

CSS gradient 無接縫背景桌布: 參考→展示及規則說明

先試做圓

html 片段

<section class="cssGradient1"></section>
<section class="cssGradient2"></section>

css 片段

*.cssGradient1{
 min-height:20em;
 background-color:hsl(0,0%,0%);
 background-image:radial-gradient(10px,hsl(120,100%,50%),hsl(120,100%,50%) 99%,transparent 99%);
}

整區佈滿小圓點

css 片段

*.cssGradient1{
 min-height:20em;
 background-color:hsl(0,0%,0%);
 /*縮小 gradient box 範圍*/
 background-size:20px 20px;
 /*縮小圓的尺寸以留一點空隙*/
 background-image:radial-gradient(farthest-side,hsl(120,100%,50%),hsl(120,100%,50%) 80%,transparent 80%);
 /*由左上角開始*/
 background-position:0 0;
}

再來試做直角三角形

css 片段

*.cssGradient2{
 min-height:20em;
 background-color:hsl(0,0%,0%);
 background-image:linear-gradient(45deg,hsl(60,100%,60%),hsl(60,100%,60%) 180px,transparent 180px);
}

整區佈滿三角形

css 片段

*.cssGradient2{
 min-height:20em;
 background-color:hsl(0,0%,0%);
 /* gradient box 縮小成正方形*/
 background-size:60px 60px;
 /*三角形佔正方形一半*/
 background-image:linear-gradient(45deg,hsl(60,100%,60%),hsl(60,100%,60%) 50%,transparent 50%);
 /*由左上角開始*/
 background-position:0 0;
}