バンフートレーニングスクールのサイトへ

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

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

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

今回は、途中になっていた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というアプリケーションを使った実践編もご用意しております。

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

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

The following two tabs change content below.
スタッフ 「ほ」

スタッフ 「ほ」

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

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ