CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのシャドウ効果とは？text-shadowとbox-shadowの使い方を解説

Webページに立体感や奥行きを加えたいときに便利なのが、CSSのシャドウ（影）効果です。CSSでは、text-shadowプロパティを使ってテキストに影を付け、box-shadowプロパティを使って要素（ボックス）に影を付けることができます。

text-shadowプロパティとは

text-shadowは、文字に影を付けるためのプロパティです。「影の色」「水平方向のオフセット」「垂直方向のオフセット」「ぼかしの半径」を指定することで、柔らかい影からくっきりした影まで自由に表現できます。

box-shadowプロパティとは

box-shadowは、divなどのボックス要素全体に影を付けるプロパティです。text-shadowと同様に、色・オフセット・ぼかし具合を指定でき、カード型UIなどでよく活用されています。

シャドウ効果のコード例

以下は、CSSでシャドウ効果を実装するサンプルコードです。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
h2 {
    color: rgb(28, 0, 128);
    text-shadow: red 2px 4px 2px;
}
div {
    color: white;
    text-align: center;
    width: 100px;
    height: 100px;
    background-color: red;
    box-shadow: rgb(89, 0, 255) 8px 2px 8px;
}
</style>
</head>
<body>
<h1>Shadow effect example</h1>
<h2>Text shadows</h2>
<div>BOX SHADOW</div>
</body>
</html>

実行結果

上記のコードを実行すると、見出しのテキストには赤色の影が付き、div要素には紫色の影が表示されます。オフセット値やぼかしの数値を変更することで、影の位置や柔らかさを簡単に調整できるので、ぜひいろいろな値を試してみてください。

  1. CSSで作るシェイク（振動）アニメーションの実装方法

    CSSのシェイク（振動）アニメーションとは？ シェイクアニメーションは、要素を左右（または上下）に素早く揺らすことで視覚的なインパクトを与えるCSSエフェクトです。フォーム入力エラーの警告や、ユーザーに注目してほしいコンテンツの強調など、幅広い場面で活用されています。 CSSでは@keyframesルールとtransform: translateX()を組み合わせるだけで、JavaScriptなどのスクリプトに頼らず手軽にこの効果を実装できます。 シェイクアニメーションの実装例 次のコードは、ロゴ画像を左右に振動させる例です。ページ下部の「Reload page」ボタンをクリックするとページ

  2. CSSのbox-shadowプロパティでシャドウ（影）にぼかし効果を追加する方法

    CSSで要素の影（シャドウ）にぼかし効果を加えたい場合は、box-shadowプロパティを使用します。このプロパティでは、水平方向のオフセット、垂直方向のオフセット、ぼかしの半径（ブラー）、そして影の色を指定できます。box-shadowの基本構文box-shadow: 水平オフセット 垂直オフセット ぼかし半径 色;3番目の値が「ぼかし半径」に相当します。この値を大きくするほど、影の輪郭が柔らかく広がり、自然なぼかし効果が得られます。値を0にすると輪郭のはっきりした影になります。シャドウにぼかし効果を追加するサンプルコード以下のコードでは、見出し要素（h2）に対して緑色の影と7pxのぼかし効