バンフートレーニングスクール Illustrator/Photoshop/InDesign/Web作成が学べるスクール

03-5229-8285

カウンセリング

[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クリエイター能力認定試験 認定インストラクター

▲トップ

無料体験へのお申込み

バンフートレーニングスクールでは3種類の無料体験をご用意しております。
ご希望の体験を選択していただくと詳細とお申込みのページへ移動します。

ポストカード制作

イラストレーターとフォトショップを使ってのポストカード制作体験です。作成したポストカードはお持ち帰りいただけます。

パンフレット制作

インデザインを使ってのパンフレット制作体験です。文字と画像の流し込みからページ番号設定、文字への装飾まで行います。

ホームページ制作

WindowsやMacintoshでHTMLを記述してホームページを作成します。ページの基本である文字、画像、リンクの設定を行います。

資料のご請求

スクールのパンフレットを画面上でご覧いただけます。

パンフレット(PDF)を今すぐ見る

パンフレットの郵送をご希望の方は以下のフォームよりご請求ください。

お名前必須
フリガナ必須
ご住所必須
-
メールアドレス必須
備考

下記、プライバシーポリシーをお読みいただき、ご同意いただいた上で次の画面にお進みください

プライバシーポリシーを開く

同意して次へ