全画面写真の上にグローバルナビゲーションの文字を白抜きする

イメージ重視するサイトは、全画面写真や動画のサイトが効果的ですが、メニューをどうするかが悩むどころ。

写真の上に白抜き文字が多いですが、写真によっては文字が読めなかったりするので、悩むどころですね!

特にグローバルナビゲーションは、読めるように気を付けたいところ!

黒色のグラデーションをグローバルナビゲーション部分に敷いて読みやすくしています。

写真の雰囲気は明るいままでナビゲーション部分のみ読みやすくする技法は、見習いたいところですね!

cssにてグラデーションの透過PNGを上から乗せれば実現できそうです。

Img:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(/img/top/mask.png) left top repeat-x;
    z-index: 2;
}

グラデーションではなくて、単色で透過したい場合はCSSで透明度を設定します。

.header {
    background-color: rgba(11,30,90,.5);
    height: 95px;
}

画像の中のキャッチコピーにも、text-shadowをかけて読みやすくしているところもいいですね!


    text-shadow: #000 1px 0 8px;

写真の上に文字は、スマートフォンでも読めるように、テキストで入力しましょう。

画像の一部にしてしまうと後々、修正が大変です。

写真とのバランスが大事で、コピーの入れる場所も気をつけていきたいですね!

コメント

タイトルとURLをコピーしました