CSSのホバー時のシャドウ効果の実装方法

2024-02-09 10:18 CSS ホバー シャドウ

  1. ボックスシャドウを使用する方法: ホバー時に要素の周りにシャドウを表示するために、box-shadowプロパティを使用します。以下は例です:

    .box {
 transition: box-shadow 0.3s; /* ホバー時のトランジション効果を追加 */
}
.box:hover {
 box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* ホバー時のシャドウを追加 */
}

  2. テキストシャドウを使用する方法: ホバー時にテキストにシャドウを表示するために、text-shadowプロパティを使用します。以下は例です:

    .text {
 transition: text-shadow 0.3s; /* ホバー時のトランジション効果を追加 */
}
.text:hover {
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* ホバー時のシャドウを追加 */
}

  3. 疑似要素を使用する方法: ホバー時のシャドウ効果を実現するために、::beforeや::afterなどの疑似要素を使用することもできます。以下は例です:

    .element {
 position: relative;
}
.element::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
 opacity: 0;
 transition: opacity 0.3s;
}
.element:hover::before {
 opacity: 1;
}

以上の方法を使用することで、要素にホバー時のシャドウ効果を追加することができます。これらのコード例を参考にして、自身のウェブサイトやプロジェクトに適用してみてください。