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

CSS3でボックスシャドウとテキストシャドウ効果を作成する方法

CSS3でボックスシャドウとテキストシャドウの効果を作成するには、それぞれ box-shadow プロパティと text-shadow プロパティを使用します。

box-shadowは要素（ボックス）に影を付け、text-shadowは文字に影を付けるためのプロパティです。どちらも「水平方向のオフセット」「垂直方向のオフセット」「ぼかしの半径」「影の色」などを指定できます。

サンプルコード

以下は、CSS3でボックスシャドウとテキストシャドウの両方を実装した例です。

<!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: 150px;
    height: 150px;
    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>

コードのポイント

  • text-shadow: red 2px 4px 2px; — h2要素の文字に赤い影を付けます。水平方向に2px、垂直方向に4pxずらし、ぼかし半径は2pxです。
  • box-shadow: rgb(89, 0, 255) 8px 2px 8px; — div要素（赤いボックス）に紫がかった影を付けます。水平方向に8px、垂直方向に2pxずらし、ぼかし半径は8pxです。

実行結果

上記のコードを実行すると、見出しのテキストには赤い影が付き、赤いボックスの周囲には紫色の影が表示されます。

CSS3でボックスシャドウとテキストシャドウ効果を作成する方法


  1. Microsoft Wordで定型句(AutoText)を作成・活用する方法|オートコレクトとの違いも解説

    1980年代初頭、MicrosoftがMS-DOS向けにWordを初めてリリースした頃から、ワープロソフトは大きく進化しました。当時の画期的な特徴は、マウスでの操作を前提に設計されていたことでした。現在のMicrosoft Wordには、当時は想像もできなかった機能が数多く搭載されています。そのひとつが「定型句(AutoText)」機能で、これを活用すればコンテンツをより速く、しかもミスを少なく作成できます。 Wordを頻繁に使う方なら、よく使うフレーズやテキストブロック、画像があるはずです。Wordの「オートコレクト」と「定型句」機能は、こうした繰り返し入力する項目を素早く挿入できるように設

  2. Macでテキストファイルを作成する3つの方法｜ターミナル・TextEdit・Automatorの手順を解説

    最近、WindowsからmacOSに乗り換えたばかりの方は、操作方法の違いに戸惑うことが多いのではないでしょうか。MacはWindowsパソコンに比べて直感的に使いやすく、動作も安定しているのが魅力ですが、一点だけ大きく異なる部分があります。それが「テキストファイルの新規作成方法」です。本記事では、Macで新しいテキストファイルを作成するためのさまざまな方法を詳しくご紹介します。 Macで新規テキストファイルを作成するには Windowsパソコンであれば、以下のように数ステップで簡単に新しいファイルを作成できます。 デスクトップ画面の任意の場所を右クリックします。 表示されたメニューから[