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

CSSを使用してテキストに影の効果を追加する

text-shadowを使用する テキストに影の効果を追加するプロパティ。以下は、シャドウ効果を追加する例です-

例

<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
h2 {
text-shadow: 2px 2px red;
}
h3 {
text-shadow: 2px 2px 5px red;
}
h4 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
h5 {
text-shadow: 0 0 3px #FF0000;
}
h6 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
p {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>

<body>
<h1>Tutorialspoint.com</h1>
<h2>Tutorialspoint.com</h2>
<h3>Tutorialspoint.com</h3>
<h4>Tutorialspoint.com</h4>
<h5>Tutorialspoint.com</h5>
<h6>Tutorialspoint.com</h6>
<p>Tutorialspoint.com</p>
</body>
</html>

出力

CSSを使用してテキストに影の効果を追加する



  1. CSSを使用したテキスト変換

    CSS text-transformプロパティを使用すると、要素のテキストの大文字化を設定できます。次の値を受け入れることができます：大文字、小文字、大文字、全幅、フルサイズの仮名、なし。 構文 CSStext-transformプロパティの構文は次のとおりです- Selector {    text-transform: /*value*/ } 例 次の例は、CSSテキスト変換プロパティ-を示しています。 <!DOCTYPE html> <html> <head> <style> h2 {    te

  2. CSSを使用して画像に視覚効果を追加するにはどうすればよいですか？

    以下は、CSSを使用して画像に視覚効果を追加するためのコードです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img{    margin: 20px; } img.normal{    margin-left: 30%;    width: 300px; &nb