CSS3のグラデーション

テキストにグラデーションを定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
背景のグラデーションをテキストで抜くことにより、テキストにグラデーションが加えられます。
講師:
04:24

字幕

このレッスンでは テキストにグラデーションを加えてみます 今ブラウザでお見せしているページ GRADIENT TEXT とありますけど このテキストには 上が黄色下が赤の リニアな線形グラデーションがかかっています もっとも厳密に言いますと テキストにグラデーションを かけているというのではなく 背景のグラデーションをテキストで抜く という方法をとっています そのプロパティの設定について ご説明しましょう Dreamweaver で開いている HTMLドキュメントには まだグラデーションの設定はされていません body 要素に h1 要素で Gradient Text という文字が打ってあります そして その h1のスタイルに対して font-size や font-family それからアッパーケースになっているので 小文字があっても全部大文字になります 現在の状態を確認しましょう ファイルからブラウザでプレビューです 普通に文字が 但しすべて大文字で 打たれてています ここにグラデーションを適用したいと思います まずは背景にグラデーションを加えましょう h1 のセクターの中の background ですね このプロパティに対してリニアグラデーション linear-gradient ですね カラーは黄色 イエローからレッドにしましょう 背景にグラデーションを加えてるだけですが この段階でとりあえず確認をしておきましょう ファイルを保存して ブラウザでプレビューします 文字でなくて背景に黄色から赤 縦方向のグラデーションが入りました これをテキストのほうに 設定していきたいと思います プロパティを2つ加えます まずはテキストですけれども デフォルトカラーの黒は抜きたいと思います なくしたいと思いますので text-fill-color ということで ここに transparent を入れます これでテキストは透明になります 一旦確認しておきましょう 保存してブラウザでプレビューです 文字はあるんですけれども 透明になってしまいました そして次の段階ですね 透明になった文字で背景を抜きます そうすると透明の部分にこのグラデーションが 入ってくるという形になります もう1つ加えるプロパティには ちょっと注意が必要です どんなプロパティか まず プロパティを入力しますけど― -webkit-background-clip というプロパティです そこに値としては テキストを入れます 何故 webkit という ベンダープレフィクスをつけたかというと 実は webkit でないとテキストという 値は設定できません background-clip というプロパティは CSS の仕様の中にあるんですけど テキストという値がないです テキストという値 これはテキストでくり抜くという事なんですが テキストで抜くという機能は webkit だけの機能ですので その点にはご注意ください では 確認してみましょう ファイルを保存してブラウザでプレビューです テキストで背景が抜かれ― テキストにグラデーションが かかっているように見えるということです このレッスンではテキストに線形の グラデーションを加える という手法についてご紹介しました その場合まずは背景 background に 線形のグラデーションを加えます そして テキストのカラーは透明にします text-fill-color というプロパティで transparent という値を設定します 3つ目 background-clip という プロパティなんですが テキストで抜くという機能は webkit にしかないので webkit という ベンダープレフィクスをつけて 値をテキストにするということです

CSS3のグラデーション

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

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

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

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

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