css3でフォントの凹凸効果を実現するにはどうすればよいですか？ (コード付き)-CSSチュートリアル-php.cn

css3でフォントの凹凸効果を実現するにはどうすればよいですか？ (コード付き)

藏色散人

リリース： 2018-09-29 16:38:08

オリジナル

7886 人が閲覧しました

この記事では、css3を使用してフォントの凹凸効果を実現する実装方法を中心に紹介します。

Web ページをデザインするとき、十分に美しい Web ページがユーザーを引き付けることができるように、ユーザーエクスペリエンスを考慮する必要があることがよくあります。 Web ページのコンテンツをより豊かで美しくするために、PS を使用してさまざまな特殊効果を作成することがあります。実際には、PS に加えて、CSS3 属性を使用してさまざまな美しい特殊効果を作成することもできます。

今回は、凹凸フォントを実現するcss3特殊効果方法を紹介します。これは、フォントに立体感を持たせることです。

凹凸や立体感を実現するCSSフォントのコード例は以下のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3字体实现立体感</title>
    <style>
        body {
            background: gray;
        }
        h1 {
            font-size: 200px;
            color: gray;
            text-shadow: 3px 3px 2px black,
            -3px -3px 2px white;         }
        h1:hover {
            text-shadow: 3px 3px 2px white,
            -3px -3px 2px black;
        }
    </style>
</head>
<body>
<div class="demo" >
</div>
<h1>
 PHP中文网
</h1>
</body>
</html>

ログイン後にコピー

ここでは「PHP中国語Webサイト」の凹凸効果を実現したいのですが、 :hover セレクターを使用します。

:ホバーセレクターは、マウスポインターが浮いている要素を選択するために使用されることを意味します。

このコードの最終的な効果は次のとおりです:

マウスをテキスト上に移動すると、効果は次のようになり、フォントが沈んだ効果が表示されます:

css3でフォントの凹凸効果を実現するにはどうすればよいですか？ (コード付き)