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

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

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

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

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

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

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でグラデーションを透過したい場合はCSSで透明度を設定します。

.header {
    background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
    height: 95px;
}

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


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

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

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

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

写真素材なら商用OK！全素材ロイヤリティフリーで、高品質で低価格、コスパ最高のPIXTAがおすすめです。僕も仕事でよく使っていて、クオリティが高いけど安いのでとても助かっています。

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

いいね:

コメント