CSS3のグラデーション

透明とのグラデーション

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
グラデーションのカラーに透明を組合わせることができます。
講師:
04:28

字幕

このレッスンではグラデーションのカラーに 透明を加えてみたいとおもいます 今ブラウザでお見せしている 写真なんですが これには黒から透明の グラデーションがかかっています グラデーションがかかっていない 元の写真はこちらです 明るい空になっていますね それに対して上が黒 下は透明のグラデーションをかけると このようになります こうした透明との組み合わせの グラデーション 今回は線形ですけど 線形グラデーション で設定してみたいと思います Dreamweaver で開いた HTML ドキュメントには まだグラデーションの設定は されていません しかも body 要素には何もなく スタイルシートでは body に対して背景画像が設定してあります background で url に jpeg の image のパスが指定してあって さらにその背景は 白となっています 今の状態を確認しておきましょう ファイルメニューから ブラウザでプレビューします グラデーションがかかる前の写真ですね これに対してグラデーションを かけてみたいと思います グラデーションは background プロパティに加えます ですからここで改行して linear-gradient ですね カラーはとりあえずブラックから 透明のキーワードが transparent になります これで保存して確認してみましょう ファイルを保存したらブラウザで プレビューです 細かいグラデーションが いくつも 繰り返されてしまっています まるでブラインドのようですね これをきちんと直しましょう プロパティを2つ加えます まず1つ目 background-repeat です 繰り返しをしないということなので no-repeat を設定します 次に background-attachment を指定して fixed というふうにしましょう これで改めて保存して 確認しましょう ブラウザでプレビューです 黒から透明というグラデーションがかかりました このグラデーションの幅  色合いについても変更できます linear-gradient 関数の第二引数 transparent の後に 位置を指定するために まずは 25%としましょう カラーもちょっと変えてみます ブラックをスカイブルーと 保存して試してみましょう 一旦保存したら ブラウザでプレビューです 上のほうに狭い範囲でスカイブルーの グラデーションがかかりました 下に行くと透明ですので このへんでしょうか ここから下は全部透明となっています もうちょっと試してみましょう 今度はカラーをオレンジに そして位置を 25%でなく 50%としてみます 改めて確認しましょう ブラウザでプレビューです ちょっと夕焼けのようになりましたね もう一回ぐらい試してみたいと思います 線形グラデーションのカラーは ブラックから― そしてもう少し幅を広げます 70%ということで確認します 保存してブラウザでプレビューです ちょっと暗い感じになったかと思います このレッスンでは 線形グラデーション linear-gradient のカラーストックに 透明= transparent を使ってみました もう1つ body 全体にグラデーションを かけたい時には background-repeat を no-repeat background-attachment を fixed にする― ということも覚えておいてください

CSS3のグラデーション

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

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

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

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

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