box-shadowプロパティを使って記事ボタンを立体的に動かしてみた

公開：2019.09.06 更新：2019.09.10

こんにちは、木彫り猫です。

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

box-shadowの使い方

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

書式としては

.jucebox {
  box-shadow: 2px 5px 10px 1px cadetblue;
}

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

実践

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

HTML

<div class="jucebox clearfix">
<img src="https://kiborineko.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

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

関連する記事

CSSで指定する単位の種類ってどれくらいあるんだろうか マウスを載せた要素を透明にする方法 レスポンシブデザインを導入した当日ついでに方法を解説してみた リンクブロックに紙がめくれたようなCSSを追加する