CSS gradient 漸層創意設計

1,492 views
Skip to first unread message

不惑仔

unread,
Nov 28, 2013, 1:21:54 AM11/28/13
to css-anim...@googlegroups.com
CSS gradient 無接縫背景桌布

參考→展示規則說明

  1. 先試做圓
    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%);
    }
  2. 整區佈滿小圓點
    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;
    }
  3. 再來試做直角三角形
    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);
    }
  4. 整區佈滿三角形
    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;
    }

更多參考→展示

Reply all
Reply to author
Forward
0 new messages