
Yoshiko先生
ホームページ制作基礎講座 17回目は、1セットのサイトを作ります。CSSでheader を書いていきます。text-shadow 使ってみました。ロゴぽく見えますかね〜 やりすぎると汚く見えてします影効果です。
またナビゲーションの背景のグラデーションを使っています。マウスがhoverした時に、グラデーションが反転することで、押した感が出る・・・という形をとっています。
header 要素の中のh1をtext-shadow を使ってロゴ風に
header h1 { font-size: 3em; padding: 1.5rem; font-weight: 800; text-shadow: 1px 1px 5px #000; color:#fff; }
nav部分の背景にグラデーションを設定 hover で反転
header nav ul li a { color: #000; text-decoration: none; background-image: linear-gradient( to bottom, #ddd, #fff, #888); display: block; padding: 0.4em; } header nav ul li a:hover { background-image: linear-gradient( to bottom, #888, #fff, #ddd); }