fbpx

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

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

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

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

ふんわり度★☆☆

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

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);
}

まとめ

今回は、文字のシャドウ(text-shadow)と画像のシャドウ(box-shadow)の雰囲気が同じぐらいになるよう調整してみました。

影にも色々。自由自在に影を操るシャドウマスター(うーん、ダサカッコいい☆)になるためには、box-shadowやtext-shadowの数値の指定に慣れることが大切です。不慣れな内は、CSSジェネレーター(CSS3 Generator)を使って実験してみると理解しやすくなりますよ。

ふんわり感を出すコツはtransitionプロパティだったりするのですが、詳しくはまた今度。

様々なバリエーションを試しながら、ホバーアクションの引き出しを増やしていきましょう!