17 HTMLとCSS講座　CSS編 text-shadow

2020年2月20日 2020年11月24日 Yoshiko先生

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);
 }