• css3

    グラデーション

    2012/07/24

    css3といえばグラデーション。一度は使いたいグラデーション。

    sun.png

     

    大好きなcss3の記事を書いていこうと思います。

    ※スマホで使える-webkit-対応のみ書きます。

     

     

    まずは基本グラデーションの話。

    css3のグラデーションは「線形((linear)グラデーション」と「円形(radial)グラデーション」の2種類があります。

     

    線形グラデーション

     

    スクリーンショット(2...

    これは白⇒赤に変わるグラデーションです。
    200px ×200pxのボックスの背景にグラデーションを適用させています。


    記述の仕方はこれ。

    
    background:-webkit-gradient(linear, 開始位置(x) 開始位置(y), 終了位置(x) 終了位置(y), from(#開始の色), to(#終了の色));
    
    

    上のグラデーションのソース

    
    background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f00));
    
    

    開始位置がleft top⇒終了位置がleft bottomなので、左上から左下にグラデーションを適用しています。

     

    senンショット(20...

    こんな感じ!

     


     

    円形グラデーション

     

    スクリーンショット(2...

    白⇒緑の円形グラデーションです。

    同じく200px ×200pxのボックスの背景にグラデーションを適用させています。


    記述の仕方はこれ。

    
    background: -webkit-gradient(radial, 開始点位置(x) 開始点位置(y), 開始点の円の半径(px), 終了点位置(x) 終了点位置(y), 終了点の円の半径(px), from(#開始の色), to(#終了の色));
    
    

     

    上のグラデーションのソース

    
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(#fff), to(#56a200));
    
    


    これはちょっとわかりにくいので(私が)ゆっくり解説しようと思います。

    まず、「開始点位置」、「終了点位置」というのは、言い換えると「グラデーションを開始する円の中心点の位置」、「グラデーションを終わる円の中心点の位置」という意味です。

    上のグラデーションの場合、開始点、終了点、ともに50% 50%に指定しています。つまりボックスのちょうど真ん中です。(center centerでも同じ結果です)

    開始円と終了円の中心点は同じ位置ということになります。

     

    そして、開始円の半径は0px、終了円の半径は100pxに指定しています。

     


    絵でかくとこんな感じ。
     

     

    開始点、終了点は、同じ真ん中の白い点にあたります。

    開始円の半径は0pxを指定しているのでありませんが、色は白(#fff)を指定しています。

    終了円は薄緑の円(#56a200)になります。

     

    en2012-07-2...

    開始円から終了円へ、このようにグラデーションが適用されます。

     


    color-stop

     

    グラデーションは開始色⇒終了色の1パターンだけではなく、color-stopを使うことで複数色指定することができます。

    線形グラデーションの記述の仕方はこれ。

    
    background:-webkit-gradient(linear, 開始位置(x) 開始位置(y), color-stop(ストップする位置,色), 終了位置(x) 終了位置(y), from(#開始の色), to(#終了の色));
    
    


    円形グラデーションの記述の仕方はこれ。

    
    background: -webkit-gradient(radial, 開始点位置(x) 開始点位置(y), 開始点の円の半径(px),終了点位置(x) 終了点位置(y), 終了点の円の半径(px), from(#開始の色), color-stop(ストップする位置,色),
     to(#終了の色));
    
    

    color-stopを使えば、グラデーションの幅も広がりますね。

     

    サイバーパンク!

    siver.png


    
    background: -webkit-gradient(radial, 90% 10%, 10, 80% 20%, 100, from(#F60),
    color-stop(40%, #FC3), to(#09F));
    
    

     

    サマターイム!

    sun.png


    
    background: -webkit-gradient(radial, 90% 10%, 10, 80% 20%, 100, from(#F60), color-stop(40%, #FC3), to(#09F));
    
    

     

    なんつって。

    色々試してみるととっても楽しいです!

     

    タグ:CSS3

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

back