画像の印象が変わる！画像の角丸・斜め・影の斜線の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;
}

影となる斜線ですが、ワードプレステーマなど、予めデザインに関するCSSが入っている場合は、斜線が見えなくなる可能性があります。

その場合は、.img-container img.diagonal-shadowに対して、position:relative;と、z-index:2を追加してください。

さらに、.img-container::beforeのz-index:-1を、z-index:1に、変更してみてください。

そうすることで、隠れてしまっている斜線が見えるようになるのではないかと思います。

これらの装飾は、ちょっと注目してもらい画像などのアクセントとして使えるのではないかと思います。

もしよかったら、ご活用ください。

楽天市場の検索結果

HTML＆CSSとWebデザインが1冊できちんと身につく本［増補改訂版］ [ 服

2,860円(税込)【送料込】

楽天ブックス

服部雄樹技術評論社エイチティーエムエルアンドシーエスエストウェブデザインガイッサツデキチントミニツクホンゾウホカイテイバンハットリユウキ発行年月：2022年01月06日予約締切日：2021年11月10日ページ数：384p サイズ：単行本 ISBN：9784297125103 服部雄樹（ハットリユウキ）愛知県名古屋市出身。20

ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 [ Ma

2,728円(税込)【送料込】

楽天ブックス

Mana SBクリエイティブホンノヒトテマデゲキテキニカワルエイチティーエムエルアンドシーエスエストウェブデザインジッセンコウザマナ発行年月：2021年02月22日予約締切日：2021年01月04日ページ数：352p サイズ：単行本 ISBN：9784815606145 Mana（MANA）日本で2年間グラフィックデザイナーとし

これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本 [

2,420円(税込)【送料込】

楽天ブックス

Capybara Design 竹内直人竹内瑠美翔泳社コレダケデキホンガシッカリミニツクエイチティーエムエルシーエスエスアンドウェブデザインイッサツメノホンクカピバラデザインタケウチナオトタケウチルミ発行年月：2021年10月14日予約締切日：2021年10月13日ページ数：288p サイズ：単行本 ISBN：9

今すぐ使えるかんたんEx　HTML&CSS 逆引き事典 [ 大藤幹 ]

2,398円(税込)【送料込】

楽天ブックス

大藤幹技術評論社イマスグツカエルカンタンイーエックスエイチティーエムエルアンドシーエスエスギャクビキジテンオオフジミキ発行年月：2020年04月20日予約締切日：2020年02月29日ページ数：432p サイズ：単行本 ISBN：9784297112516 HTMLとCSSのしくみ／Webページをつくる／文章を書く／文字を強調す

初心者からちゃんとしたプロになるHTML＋CSS標準入門 [ おのれいこ ]

2,750円(税込)【送料込】

楽天ブックス

おのれいこ栗谷幸助エムディエヌコーポレーションインプレスショシンシャカラチャントシタプロニナルエイチティーエムエルプラスシーエオノ,レイコクリヤ,コウスケ発行年月：2020年03月予約締切日：2020年01月29日ページ数：320p サイズ：単行本 ISBN：9784844369714 おのれいこ（オノレイ