HOME＞グラデーション
| kon`s produce webdesign lecture! | |
| <<｜グラデーション｜マーカーを使用する｜３Dテーブル｜>> Lグラデーションの使い方 Lグラデーション対応「色名表」 |
| グラデーション | ||||||||||||||||||||||||
■グラデーション 要するに色をだんだん変えていくこと。 例えば内容がだんだんと進行していくことを表現したいとき、ウェブサイトの始めから終わりまでのどの範囲にあたるのかを色で表現する。 色の明暗を変えていくことで立体感を表現することもできます。 グラデーションと先ほどのテーブルとをあわせるといい感じになります。 またイメージ(画像)などにもグラデーションを使うと立体感が得られます。 形、大きさ、色のグラデーションを使うのがおすすめ。 大きさは小→大 色は淡→濃など。 また普通の文字でグラデーションを使っても見づらいが、フォントと併用することでロゴのような効果も期待できます。 ここで重要なのはやはりグラデーションの配色。 同じ文字数ごとに色をくぎったとしてもグラデーションに見えにくい等、少し難度が高いかもしれないがやってみよう。 次項の「グラデーション色名表」を使って文字やテーブル(表)の色をだんだんと変えて表現してみましょう。 これを使えばロゴの画像イメージを使ったような効果がHTMLだけで得られます。 下のように使うと来訪者の興味を引くかもしれませんね 文字色でグラデーションを表現したい時は
表のセル背景色でグラーデーションを表現したい時は
kon`s produce webdesign accessup cool easyhome page
|
||||||||||||||||||||||||
| →次へ | ||||||||||||||||||||||||
| プロの技！ウェブデザインの資料集 | |
| 使いやすさを重視したベーシックスタイル 「リクルート」社会人・学生のための大学・大学院  フレームで左右に分割された、ベーシックスタイルのデザイン。 メニューとコンテンツがフレームによって別々にスクロールできるようになっているため、使い勝手が良い。 特集記事は分かりやすく区切られている。 フレームページはSEOに適さないため個人サイトで使うには注意が必要。 |
|
| チュートリアルー第18回 | |
グラデーションを使おう！ 前回はテーブルタグを使ったレイアウト・デザインをしました。 今回はだんだんと色を変えていく「グラデーション」を使ってみましょう。 ここではチュートリアルページの文字をグラデーションにしてみたいと思います。 ①「Webdesgin」をW-eb-des-ignと区切り、それぞれフォントタグで色を指定。 ここでは赤から黄色へグラデーションします。 W=#ff0000 eb=#ff6500 des=#ff9a00 ign=ffcf00 ②「what is,,,」に関してはオレンジ→背景色にだんだんと色を変えていきます。背景色からのグラデーション・背景色へのグラデーションはよく使うテクニック。  |
|
| topics | |
| nodata... |
HOME＞グラデーション
| kon`s produce All rights reserved |
