文字

box-shadowプロパティを使って記事ボタンを立体的に動かしてみた
公開:2019.09.06 更新:2019.09.10

こんにちは、らいどらです。

今回は当サイトに関連記事リンクを作ったので、せっかくならスタイリングもこだわってみたいなあ…..と思ったので、box-shadowと疑似要素hoverを使ってリンクを立体的にしていこうと思います。

box-shadowの使い方

まずはbox-shadowの使い方についてです。

書式としては

.jucebox {
  box-shadow: 2px 5px 10px 1px cadetblue;
}
boxshadow解説
各値の役割

各値の役割としては上記となります。

実践

それでは実際に作っていきます。

HTML

<div class="jucebox clearfix">
<img src="https://lhaidelabo.com/wp-content/uploads/2019/8/DSC_0067.jpg" style="width:200px;,height:auto;">
<p>ぶらり旅ー新潟</p>
</div>

CSS

.jucebox {
   width: 400px;
   padding: 5px;
   border: 1px solid lightgoldenrodyellow;
   box-shadow: 2px 5px 10px 1px cadetblue;
}

.jucebox img {
   float: left;
}

.jucebox p {
   color: brown;
   text-align: left;
   padding-left: 210px;
}

.jucebox:hover {
   opacity: 0.95;
   box-shadow: 0 0 1px 1px lightblue;
}

上記を打ち込むと以下の記事リンク完成です!!出来るなら色はカラーコードにした方が良いですね。え?なんでやらないのかって?もちろんめんどくさいからだ。

新潟

ぶらり旅ー新潟

実用するならリンクを内包させればOKですね。

まとめ

今回はbox-shadowプロパティを使って立体的なボックスを作ってみました。最初は手探りでしたが、最終的にきちんと押したくなるボタンになって良かったです。

編集してる最中に思いましたが、:activeを追加してクリック時の効果も加えるとさらに気持ちいいボタンになるかもですね!

参考になった記事 → https://saruwakakun.com/html-css/reference/buttons

それでは!またお会いしましょう!

おすすめ商品

一から勉強する際に使った教材

持っていると便利なHTML&CSS辞典

コメント

内容をご確認の上、送信してください。