CSS3のグラデーション

グラデーションでメタリックなテクスチャをつくる

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
線形グラデーションの繰返しを組合わせて、メタリックなテクスチャを表現してみます。
講師:
11:59

字幕

このレッスンでは線形の グラデーションを利用して メタリックなテクスチャを作ってみたいと思います 今ブラウザーで開いているページには 丸いボーダー グレーのボーダーの中に メタリックなテクスチャが作ってあります これはいくつかの線形のグラデーションを 組み合わせています まずベースになるのが上から下への グラデーションです 少し明るめのグレーからさらに明るいグレー そして暗いグレーという風に グラデーションが作ってあります それから縦線がいっぱい 入っているように見えますね これが実はひとつひとつ グラデーションになっていまして 3つの横方向のグラデーションを 組み合わせることによって このような表現になっています ではこれを順番に作っていくことにしましょう Dreamweaverで開いている HTMLドキュメントには まだグラデーションの設定はしてありません body要素の中にあるrib要素 idが box でそのstyleと言うのが 幅と高さが300ピクセル そして border-radiusで 同じ値を与えることによって 丸いボーダーにしています そしてそのボーダーには 5ピクセルの実線の暗いグレーで アウトラインが作ってあります では今の状態を確認しましょう ファイルメニューから ブラウザーでプレビューします まだこの丸いボーダーが作ってあるだけで この中にグラデーションで テクスチャを入れていきます グラデーションは背景に入れます このbox のセレクターの中に background ですね そして線形グラデーションですから ここは一旦 改行しておきます linear-gradient と そして括弧は閉じてしまいますけれども 水平方向 右にグラデーションを 線形に入れたいので to right とします そしてカラーの指定なんですけれども これは HSLa という指定にしたいと思います その点についてご紹介しておきましょう HSLaモデルと言うのはカラーをHは色相です そしてSは彩度 Lは輝度 そして最後のaはアルファということで HSLaと頭文字を取って HSLaモデルという風に言っています この形でカラーを設定するには 関数は文字通り‟hsla関数” というものを使います 構文は次の通りで色相 彩度 輝度 アルファを順番に指定します まず色相ですがカラーサークルと言うカラーを 円形に並べたものがモデルとしてありまして その中のどの角度にあるのかという 度数値を入れます ですから0~360 もっとも360になると 戻ってきてしまいますけれども ただし角度だからと言って Degreeのdegは 入れないという事にご注意ください 数値だけです 次に彩度 これは0%~100% 鮮やかさですね 0%にするとどんなカラーであっても グレースケールになってしまいます 100%が元通りという事になります 次に輝度 これも0~100の パーセンテージになります 0にするとどんな色でも黒になりますし 100にするとどんな色でも白になります そして50%が元通りという事になります 最後にカラーこれはアルファで 0が完全に透明 1が完全に不透明ということになります もう1つ アルファがいらないと アルファは完全に不透明 1の状態だという場合には HSLaでなくaが取れたHSL という 関数がありますのでそれを使うと簡単でしょう 改めてhsla関数でカラーを 指定することにします HSLaですね そしてカラーは角度0 これは赤になります そして彩度は50% そして輝度は50% まずアルファは0で スタートしてしまう事にします そしてまたHSLaですね 同じく赤で50%で やはり50% そしてアルファは0.5にしましょう これで確認してみたいと思います 一旦ファイルを保存しまして ブラウザーでプレビューです 透明から… まあ背景が白ですから 白く見えますけれども 透明から50%の彩度の赤に グラデーションが線形に右方向にかかりました カラーを追加しましょう コピーして楽をしてしまいます コピーをしてペーストと 頭のところの設定は同じです そしてパーセンテージを加えることにします ここで6% そして終点の方もパーセンテージを加えます 7.5%という風にしましょう かなり詰まったグラデーション ということになりますね 一旦保存して確認します 透明の領域があって このちょっとしたところで いきなり赤に変わって そのままずっと赤が 塗られるという事になっています これでは面白くありません このパターンを 繰り返すという風にしたいと思います linear-gradient の関数を少し書き換えます どうするかと言うと 頭にrepeating としてあげます そして確認してみましょう ブラウザーでプレビューです まず透明な領域があって ちょっとした所で いきなり赤になる このままさっきはずっと赤だったんですが repeating と加えることによって そのパターンを繰り返してくれます 縦じまが入るという事ですね さらに手を加えていくことにしましょう 今度は縦に repeating でない 普通のグラデーションを追加します 改行しましてコピーしてしまいましょう 縦にグレーのグラデーションを入れますので 縦という事なので度数で入れましょう 180度です deg が必要です そして今回はアルファはいらないので hslだけにします そして0% それから78% さらに加えて コピーしてしまいましょう ショートカットを使わせてもらいます command もしくはctrl + Cですね そしてペーストはcommand +V もしくはctrl + Vです 3つ加えました そしてカッコ閉じ そしてここは90%にしましょう かなり明るいグレーという事になります それから78%に戻し 少し暗めのグレーにします 位置のパーセンテージを加えましょう 47% 真ん中よりちょっと手前ですね 同じく真ん中よりちょっと 下という事になりますけれども53% こんなグレーを付け加えました では保存して確認しましょう 縦にグレーのグラデーションが加わりました 赤ではメタリックな感じになりませんので これを白にします 輝度を100%にすれば白になりますね そして白になってしまうんですから 彩度は50%にしても関係ありませんので もう0にしてしまいましょう ここは全部輝度100%という事にします これで確認しましょう 保存して ブラウザーでプレビューです 白い縦じまが加わったという事ですね 見やすいようにアルファが 0.5にしてありますけども もっと控えめにした方が雰囲気が出るので 少しアルファを下げます アルファは0.5から0.1控えめにします さらに付け加えましょう コピーを使わせてもらいます command +C もしくはctrl + C そしてcommand +V もしくはctrl + V ですね 今度は黒です 黒のグラデーション 位置のパーセンテージを少し変えます ですから間隔が変わるという事になりますね もうちょっと狭まった間隔です 一旦分かりやすいように0.5としておきます 保存してブラウザーでプレビュー 縦の黒い線がまた違う間隔で入りました これをもう少し控えめにしましょう 黒は強いのでさらに控えめにして0.05です もう1つ白のグラデーションを加えます コピーをここに持ってきましょう そして HSL まではいいんですけれど… HSLaですね aまではいいんですけれども パーセンテージを変えていきます もっと細かい間隔ということで そしてここは0.2ぐらいにしておきましょうか 保存して確認しましょう ブラウザーでプレビューです うっすらと縦じまが白い線が加わりましたね これでメタリックな テクスチャができあがりました このレッスンでは 線形のグラデーションを組み合わせて メタリックなテクスチャを作りました まずベースとなるのは linear-gradientですね そしてHSLという関数でグレーの縦方向の ベースのグラデーションを作りました そして今度はその上に かぶさるような形になりますけれども repeating-linear-gradient という関数で 線形グラデーションの繰り返しという パターンを使いました その時は 今度はHSLaでアルファが加わった HSLaモデルでカラーを指定し 細かい間隔で白 黒 白の縦線を入れることで メタリックな雰囲気を出したという事です

CSS3のグラデーション

CSS3のグラデーション機能はW3Cで勧告候補となり、最新のブラウザであれば使えるようになりました。このコースでは線形や放射状のグラデーションの構文や使い方を詳しく解説します。グラデーションを使ったパターンやテクスチャの作例を一歩一歩段階的に作り進めながら、必要に応じて文法的な説明も加え、細かな設定やオプションまで広くカバーしています。

1時間56分 (22 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年07月27日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。