CSSでグラデーションを使うときにhsl()が便利すぎる。（CSS おれおれ Advent Calendar 2012 – 19日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 19日目 CSS 3では色の指定にhsl()を使う事が出来ます。すなわち色相 (Hue; 0-359)、彩度 (Saturation; 0%-100%)、輝度 (Lightness; 0%-100%) による色の指定です。さらに不透明度を加えたhsla()もあります。 グラデーションをlinear-gradient()で実現するとき、このhsl()を使うと綺麗に記述する事が出来ます。 実例 こんなグラデーションを実装します。 #rrggbbを使ったグラデーションの例 まずは#rrggbbで書いた例です。 background-image: linear-gradient( top, #ffffff 0%, #a3daf5 50%, #75c7f0 51%, #19a1e6 100% );
面倒なCSS3グラデーションのスタイルシートをグラデーションの画像から簡単に生成するツール -GradienFinder
Photoshopなどの使い慣れたソフトウェアで作成したグラデーション画像から、CSS3グラデーションのスタイルシートを生成するオンラインツールを紹介します。 GradienFinder ドロップすると、すぐにグラデーション画像が反映され、スタイルシートが生成されます。 CSS: 生成されたスタイルシート background: -webkit-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,rgb(128, 128, 128) 100%); background: -o-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,r
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ultimate CSS Gradient Generator from ColorZilla
