マウスオーバーで画像やテキストにふんわりとシャドウ：ホバーエフェクト(:hover)#2

こんにちは。エンジニアの山岡です。

前回のマウスオーバーで画像がズームイン！に引き続き、現場で役立つCSSのtipsを投下していきます。さて今回はふんわりとしたシャドウがお題です。ふんわり度合いを変えて3つのパターンでご紹介します！

さあ、どんどんシャドウをかけていきますよ。

CONTENTS

1 ふんわり度★☆☆
2 ふんわり度★★☆
3 ふんわり度★★★
4 まとめ

ふんわり度★☆☆

少し硬めのシャドウで尚且つスピーディー。ふんわり度は低めです。

DEMO

テキストシャドウ♪

HTML

<!-- テキストにシャドウ♪ -->
<a href="#" class="shadow_01">テキストシャドウ♪</a>

<!-- 画像にシャドウ♪ -->
<a href="#" class="shadow_01_box"><img src="photo01.jpg" alt=""></a>

CSS

/* テキストにシャドウ♪ */
.shadow_01 {
    color: #666;
    display: inline-block;
    text-decoration: none;
    transition: all .2s ease-in-out;
}
.shadow_01:hover {
    text-shadow: 2px 2px 2px rgba(0,0,0,.7);
}

/* 画像にシャドウ♪ */
.shadow_01_box {
    display: inline-block;
    transition: all .2s ease-in-out;
}
.shadow_01_box img {
    display: block;
}
.shadow_01_box:hover {
    box-shadow: 2px 2px 2px rgba(0,0,0,.7);
}

ふんわり度★★☆

さっきよりもふわっとしたでしょうか？ブラーを強くし、さらに変化の速度をゆっくりにしています。

DEMO

テキストシャドウ♪♪

HTML

<!-- テキストにシャドウ♪♪ -->
<a href="#" class="shadow_02">テキストシャドウ♪♪</a>

<!-- 画像にシャドウ♪♪ -->
<a href="#" class="shadow_02_box"><img src="photo01.jpg" alt=""></a>

CSS

/* テキストにシャドウ♪♪ */
.shadow_02 {
    color: #666;
    display: inline-block;
    text-decoration: none;
    transition: all .4s ease-in-out;
}
.shadow_02:hover {
    text-shadow: 1px 1px 8px rgba(0,0,0,.75);
}

/* 画像にシャドウ♪♪ */
.shadow_02_box {
    display: inline-block;
    transition: all .4s ease-in-out;
}
.shadow_02_box img {
    display: block;
}
.shadow_02_box:hover {
    box-shadow: 1px 1px 12px rgba(0,0,0,.65);
}

ふんわり度★★★

シャドウのずらしを無くし、ブラーを強め、変化する速度がよりゆっくりになったことで、さらにふんわり度が上がっています！

DEMO

テキストシャドウ♪♪♪

HTML

<!-- テキストにシャドウ♪♪♪ -->
<a href="#" class="shadow_03">テキストシャドウ♪♪♪</a>

<!-- 画像にシャドウ♪♪♪ -->
<a href="#" class="shadow_03_box"><img src="photo01.jpg" alt=""></a>

CSS

/* テキストにシャドウ♪♪♪ */
.shadow_03 {
    color: #666;
    display: inline-block;
    text-decoration: none;
    transition: all .8s ease-in-out;
}
.shadow_03:hover {
    text-shadow: 0 0 15px rgba(0,0,0,.9);
}

/* 画像にシャドウ♪♪♪ */
.shadow_03_box {
    display: inline-block;
    transition: all .8s ease-in-out;
}
.shadow_03_box img {
    display: block;
}
.shadow_03_box:hover {
    box-shadow: 0 0 25px rgba(0,0,0,.45);
}