[CSS3]グラデーション その３

[CSS3]グラデーション　その３

2014年6月2日(月曜日)

暑いですねー！もうすっかり夏気分になってきました。６月上旬でこれだと８月になるころには……恐ろしいですねー、考えたくもないですねー。夏の暑さが苦手なスタッフ「ほ」です。

ここ数回、ずーっとイラストレーターのネタをやってきましたが、そろそろ別のネタも混ぜていきたいと思います。

今回は、途中になっていたCSSのグラデーションの話を続けていきます。

前回までのエントリーはこちらです。

前回は、線状グラデーションの調整を行いました。

今回は放射状のグラデーションを調整していきたいと思います。

まずはおさらい。

放射状のグラデーションはこうやって記述します。


.box {
      background-image:radial-gradient(white,blue);
}

この指定により、中心が白、まわりが青になる放射状のグラデーションが表示されます。

放射状のグラデーションでは、ボックスの中心＝グラデーションの中心となっていますが、この中心点をずらすことができます。

初期設定では、パーツのど真ん中がグラデーションの中心ですが、以下の指定で位置を変えることができます。


.box {
      background-image:radial-gradient(at left top,white,blue);
}

これで左上を基準に放射状のグラデーションが適用されます。

さらに位置を変えてみましょう。


.box {
      background-image:radial-gradient(at 100px 100px,white,blue);
}

これでグラデーションの中心が左上から右に100px、下に100pxずれます。

以前のエントリーでご紹介しているborder-radiusと併用すれば


.box {
      background-image:radial-gradient(at 100px 100px,white,blue);

border-radius:50%; }

CSSだけで球体の表現が可能になります。

これが、画像ファイルなしで作れるなんて、ちょっと感動ですよね？

うまく使えば、カッコイイボタンとか作れそうです。

「こんなの作ってみたよ！」という方、いらっしゃいましたら教えてください。

さて、今回はここまでです。

放射状のグラデーションは、実はもうちょっと設定があるのですが、「こういうときに使えば便利ですよねっ！」と力強く言える例が浮かばないので、また日を改めてご紹介使用と思います。

次回は、CSSの色指定に焦点を当てたいと思います。

バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎！ステップアップ編としてDreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

この記事を書いた人
最新の記事

スタッフ「ほ」

ホームページ制作講座、イラストレーター講座、フォトショップ講座を担当しています。カップヌードルはシーフード派。 Webクリエイター能力認定試験認定インストラクター

スタッフブログ