問題 × 解決策

ロールオーバー時に影を付けて浮いたように見せる

問題

ロールオーバー時に影を付けて浮いたように見せるには?

解決策

cssにて、ロールオーバー時にbox-shadowを設定する。

 

ロールオーバー時に影を付ける。

記事のリストなどで、カーソルを合わせた時に影が付いて、浮いたかのように見せる演出を見かけます。
今回はロールオーバー時に影を付けて浮いたように見せる方法をご紹介します。

DEMOはこちら

HTMLの構築

aタグを並べて配置します。
囲うdivタグのクラスに「hovershadow-box」を設定します。

<div class="hovershadow-box">
	<a href="#">
		<span class="titles">タイトル</span>
		<span class="text">テキストテキストテキストテキスト</span>
	</a>
	<a href="#">
		<span class="titles">タイトル</span>
		<span class="text">テキストテキストテキストテキスト</span>
	</a>
	<a href="#">
		<span class="titles">タイトル</p>
		<span class="text">テキストテキストテキストテキスト</p>
	</a>
	<a href="#">
		<span class="titles">タイトル</span>
		<span class="text">テキストテキストテキストテキスト</span>
	</a>
</div>

cssの構築

クラス「hovershadow-box」とその中のaタグに対して、cssを設定します。
そしてaタグのロールオーバー時「hover」に対して、「box-shadow」を設定します。

.hovershadow-box{
	letter-spacing: -.4em;
}
.hovershadow-box > a{
	display: inline-block;
	vertical-align: middle;
	width: 25%;
	padding: 10px 15px;
	letter-spacing: normal;
	background-color: #ffffff;
	border: 1px solid #dddddd;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.hovershadow-box > a .titles{
	display: block;
	font-size: 106.25%;
	font-weight: bold;
}
.hovershadow-box > a .text{
	display: block;
	margin-bottom: 0;
}
.hovershadow-box > a:hover{
	position: relative;
	box-shadow:0px 0px 6px 0px #40180A;
}
@media only screen and (max-width: 767px) {
	.hovershadow-box > a{
		width: 50%;
	}
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

18 − 4 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧