画像の印象が変わる！画像の角丸・斜め・影の斜線のCSSデザイン３選

※当サイトにはプロモーションが含まれています。

クライアント

この写真の画像を埋め込んだ際に、ちょっとオサレな感じにしてくれ！

可愛い子猫の写真埋め込む画像をちょっとアレンジしたい、アクセントを加えたいといったことがあるかと思います。

その為、ブログなどに埋め込んだりする画像をちょっとお洒落な感じに見せるCSSを３つ作ってみました。

この記事の目次

角丸・画像を斜め・影の斜線を使いこなすCSS3選

角丸・画像を斜め・影の斜線を使いこなすCSS3選

画像にアクセントを加えるCSSを３つ紹介します。

なお、これらのCSSには、すべて<img>タグに対してクラスを付与しています。

何故なら、<img>タグに対して、直接CSSのデザインをあててしまうと影響範囲が大きいためです。

画像の角を丸くするCSS

ブログのデザインを少し柔らかくしたい場合などに使える画像の角を丸くするCSSです。

img.round-corner {
border-radius: 20px;
}

可愛い子猫の写真

なお、HTMLは、このように記述されることになります。

<img src="（画像のURL）" class="round-corner">

なお、プロフィール画像など、円形にしたい場合は下記のように記述します。

img.round-corner-circle {
border-radius: 50%;
}

可愛い子猫の写真

画像を斜めにして影を付ける

日記風のブログなどに使えると思う画像を斜めにして影を付けるCSSです。

img.skew-image{
box-shadow: -8px 8px 12px rgba(0, 0, 0, 0.5); /* 斜めに影を作る */
transform: rotate(-5deg); /* 斜めの角度を調整 */
}

可愛い子猫の写真

なお、HTMLは下記のようになります。

<img src="（画像のURL）" class="skew-image">

画像に斜線の影を付けるCSS

画像にちょっとアクセントを加えたい時などに使える斜線の影を付けるHTMLとCSSです。

HTML

<div class="img-container">
<img src="（画像のURL）" class="diagonal-shadow">
</div>

CSS

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

.img-container img.diagonal-shadow {
display: block;
width: 100%;
height: auto;
}

.img-container::before {
content: "";
position: absolute;
bottom: -15px;
right: -15px;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #ffffff 25%, #fff2fa 25%, #fff2fa 50%, #ffffff 50%, #ffffff 75%, #fff2fa 75%, #fff2fa);
background-size: 15px 15px;
z-index: -1;
}