てるてるブログ

てるてるぼうずの日常やらお勉強やら

CSSグラデーションを簡単に!ジェネレーターなどのまとめ

Posted on | 6月 26, 2015 | No Comments

eyecatch

CSS3では背景にグラデーションを指定出来ます。
ブラウザによって書き方が違ったり、色の指定とかもめんどいのですが画像無しで手軽にグラーでションが使えるのは便利。

ブラウザ上でグラデーションのCSSを作成出来るジェネレーターも増えてますね。



基本的にはグラデーションの指定は下記のコードで可能。
あくまでもW3C推奨のものなので、旧ブラウザようやらグラデの角度やらが加わるとやっぱ面倒。

下記のサイトに詳しく載ってました。

/* 上から下に */
background: linear-gradient(to bottom, pink, white);
/* 左から右に */
background: linear-gradient(to right, pink, white);
/* 円形 */
background: radial-gradient(pink, white);
グラデーション
グラデーション
グラデーション

ジェネレーター

配色見本

  • uiGradients

    http://uigradients.com/
    キレイなグラデーションの見本をランダムに表示。
    enterキーでcssコードを表示してくれます。

  • iOS7 colors

    http://ios7colors.com/
    iOS7風のグラデーションの配色見本。
    カラーコードは表示されますがCSSコードは表示されません。

  • colorful gradients

    http://colorfulgradients.tumblr.com/
    配色見本のみですが量があって参考になります。

イラストレータのスウォッチみたいに作ったグラデを保存とかできるといいのになぁと思ったりします。
自分で作れって話しですね(^^;)

トラックバックURL:

Comments

Leave a Reply





*

About

てるぼうず

てるてるぼうずな日常やらお勉強やら

旧ブログ倉庫 »
旧ブログの記事をお探しの方はこちらから

Admin