【CSS】画像の背景に表示する影を斜線にするデザイン

【CSS】画像の背景に表示する影を斜線にするデザイン CSS

CSSを使って画像の背景に影を追加する際、シンプルな影ではなく斜線のデザインを取り入れてみませんか?この記事では、CSSの基本的なコードを使って斜線の影を実装する方法を解説します。Webデザインにちょっとしたアクセントを加えたい方に最適なテクニックです。

はじめに

Webデザインにおいて、影は画像やボックスに立体感を与え、視覚的な魅力を高めるために多用されます。しかし、一般的なぼかし効果の影ではなく、個性的な斜線の影を使うことで、より印象的なデザインを作成することができます。本記事では、CSSを使って画像の背景に斜線の影を表示する方法を詳しく解説します。

実際のイメージ

猫の写真に斜線の影

影を作るためのCSS基本コード

まず、影を斜線の形で実装するための基本的なCSSコードを確認しましょう。以下のコードでは、背景に斜めの線が交差する影を作成します。

.image-container {
    position: relative;
    display: inline-block;
}

.image-container::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.1) 10px,
        rgba(255, 255, 255, 0) 10px,
        rgba(255, 255, 255, 0) 20px
    );
    z-index: -1;
}

.image-container img {
    display: block;
    max-width: 100%;
    height: auto;
}

このコードは、画像の背景に斜めの斜線を繰り返し表示します。デザインによってはその上に少しぼかしを加えることで、柔らかな影のような効果を与えます。

コードの解説

  1. .image-container::before:
    • ::before擬似要素を使用して、画像の背景に影を作成します。
    • position: absolute;で影の位置を調整し、z-index: -1;で画像の背後に配置します。
    • background: repeating-linear-gradient(45deg, ...)を使って、45度の角度で斜めに繰り返される線を生成します。
    • filter: blur(Xpx);を追加することで、影のエッジを柔らかくすることもできます。
  2. .image-container img:
    • 画像自体に対して、最大幅を100%に設定し、レスポンシブ対応させています。

カスタマイズの提案

この斜線を取り入れた影は、色や線の間隔、角度などを自由にカスタマイズすることができます。
例えば、影をより濃くしたい場合はrgba(0, 0, 0, 0.1)の透明度を下げたり、45degを変更して角度を変えたりすることが可能です。

まとめ

影の見た目を工夫することで、Webデザイン自体にユニークなエフェクトを加えることができます。シンプルな影から一歩進んだデザインを取り入れたい方は、ぜひ今回紹介したものを参考に活用してみてください。CSSで様々なデザインができるので、色々と工夫をしてみましょう。

           

お仕事・当サイトへ興味を持っていただいた方
お問い合わせはこちらから

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san」の中の人。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
「Webサステナビリティ・Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

CSS
スポンサーリンク
ma-sanをフォローする
ma-san blog
タイトルとURLをコピーしました