CSS3テキストシャドウ効果を実現するにはどうすればよいですか? 【詳しいコード説明】-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3テキストシャドウ効果を実現するにはどうすればよいですか? 【詳しいコード説明】

藏色散人

Sep 05, 2018 pm 01:49 PM

CSS を初めて使用する初心者にとって、テキストシャドウという言葉は少し聞き慣れないかもしれません。言い換えれば、立体感のあるテキストと言い換えることができます。いくつかの絵がすぐに頭に浮かびますか?以前の記事 [css3 で影効果を作成する方法の詳細な説明] を読んでいる場合は、div 影効果についてある程度理解しているはずです。この主な属性は box-shadow スタイル属性です。

それでは、この記事では CSS3 でテキストの影効果を作成する方法、つまり 3D フォントを作成する方法を引き続き紹介します。ここでマスターする必要がある主な属性は、

text-shadow スタイル属性です。初心者の中には「text-shadow とは何ですか?」と尋ねる人もいるかもしれません。どのような意味です？使い方？以下で具体的なサンプルコードを使って詳しく説明しますので、ご安心ください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3 text-shadow属性使用示例</title>
    <style>
      .t1{
          text-shadow: 5px 5px 5px #029789;
          font-size: 40px;
          font-weight: bold;
          color: white;
      }
      .t2{
          text-shadow: -5px -5px 5px #1094f2;
          font-size: 40px;
          font-weight: bold;
     color: white;
      }
    </style>
</head>
<body>
<div class="demo">
    <p class="t1">text-shadow属性使用示例1-文字阴影效果</p>
    <p class="t2">text-shadow属性使用示例2-文字阴影效果</p>
</div>
</body>
</html>

ログイン後にコピー

上記のコードにブラウザからアクセスすると、次のような効果が得られます。

CSS3テキストシャドウ効果を実現するにはどうすればよいですか? 【詳しいコード説明】

フォントに立体感があるように見えますか？例 1 と例 2 の違いに気づきましたか?実際、例 1 のテキストの影の部分はテキストの右下にあることがわかります。例 2 のフォントの影はテキストの左上にあります。

これらの効果はすべて、css3 の text-shadow スタイル属性によるものです。例 1 の text-shadow の値は 5px 5px 5px #029789 であることがわかります。例 2 の値は -5px -5px 5px #1094f2 です。これら 4 つの値はそれぞれ x のオフセットを表します。 - 軸方向、y 軸オフセット、ぼかし値、影の色。次に、影の位置の違いは、最初の 2 つの値の正と負の値によるものです。

X 軸の正の値は右へのシフトを示し、負の値は左へのシフトを示し、Y 軸の正の値は下へのシフトを示し、負の値は上へのシフトを示します。ブラー値が大きいほど、よりぼやけます。

これらの値の意味を理解したら、好みに応じてテキストの影の効果を自由に変更できます。

上記は

css text-shadow属性の使い方、つまりフォントに3D効果を持たせる方法の詳しい紹介です。一定の参考価値はありますので、困っている友人のお役に立てれば幸いです。

以上がCSS3テキストシャドウ効果を実現するにはどうすればよいですか? 【詳しいコード説明】の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。