HTML5 と CSS3 で Web 制作 : Step02 – header をレイアウト

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

やっと本格的にスタイルに入ります. 最初はヘッダーです.

thumb

SAMPLE

サンプルはこちら.

CODE

ヘッダーのスタイル.

#header {
    background: rgb(0, 68, 204);
    background: -webkit-radial-gradient(70% 50%, circle cover, rgba(255, 255, 255, 1.0) 0%, rgba(255, 255, 255, 0.0) 80%), #0044bb;
    background: -moz-radial-gradient(70% 50%, circle cover, rgba(255, 255, 255, 1.0) 0%, rgba(255, 255, 255, 0.0) 80%), #0044CC;
    background: -o-radial-gradient(70% 50%, circle cover, rgba(255, 255, 255, 1.0) 0%, rgba(255, 255, 255, 0.0) 80%), #0044CC;
    background: radial-gradient(70% 50%, circle cover, rgba(255, 255, 255, 1.0) 0%, rgba(255, 255, 255, 0.0) 80%), #0044CC;
    box-shadow: 0px 0px 8px 0px #555;
}


#header hgroup
{
    width: 1200px;
    margin: 0px auto;
    padding-left: 10px;
    padding-top: 45px;
    padding-bottom: 25px;
    color: white;
}

#header hgroup h1
{
    color: white;
    font-size: 35px;
    font-style: italic;
    text-shadow: 2px 2px 4px #444;
}

POINT

円形グラデーションでオシャレな感じに

あまり知られていませんが, background はカンマ区切りで複数指定することができます. 今回は, 青の下地に白い円形グラデーションをかけることでちょっと光った感じの演出にしています.

そういえば, 最近やっと safari のグラデーションの指定の仕方が webkit と同じになりました^^ これでより気軽にグラデーション指定が行えます.

background: rgb(0, 68, 204);
background: -webkit-radial-gradient(70% 50%, circle cover, rgba(255, 255, 255, 1.0) 0%, rgba(255, 255, 255, 0.0) 80%), #0044bb;
background: -moz-radial-gradient(70% 50%, circle cover, rgba(255, 255, 255, 1.0) 0%, rgba(255, 255, 255, 0.0) 80%), #0044CC;
background: -o-radial-gradient(70% 50%, circle cover, rgba(255, 255, 255, 1.0) 0%, rgba(255, 255, 255, 0.0) 80%), #0044CC;
background: radial-gradient(70% 50%, circle cover, rgba(255, 255, 255, 1.0) 0%, rgba(255, 255, 255, 0.0) 80%), #0044CC;

box-shadow でちょっと 3D 感を演出

header の下の方に影を出すことで, header がちょっと浮き出たような感じになります.

box-shadow: 0px 0px 8px 0px #555;

text-shadow でタイトルにタイトル感を

タイトルだけ, text-shadow を適応させることで特別感を演出.

text-shadow: 2px 2px 4px #444;

次回は, ナビゲーションバーのスタイルアップに入ります!!

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT