ホームページ > 記事 > ウェブフロントエンド > css3でフォントの凹凸効果を実現するにはどうすればよいですか？ (コード付き)
css3でフォントの凹凸効果を実現するにはどうすればよいですか？ (コード付き)
- 藏色散人オリジナル
- 2018-09-29 16:38:097868ブラウズ
この記事では、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 セレクターを使用します。
:ホバー セレクターは、マウス ポインターが浮いている要素を選択するために使用されることを意味します。
このコードの最終的な効果は次のとおりです:
マウスをテキスト上に移動すると、効果は次のようになり、フォントが沈んだ効果が表示されます:
マウスをテキストから遠ざけると、次のような効果が得られ、フォントのはみ出し効果が表示されます。
ここでは主に text-shadow 属性が使用されます。
text-shadow 属性: フォントにシャドウを追加するには、関連する属性値を text-shadow 属性に設定して、使用量を減らすことができます。写真の。
注: すべての主要なブラウザは text-shadow 属性をサポートしています。ただし、Internet Explorer 9 以前のブラウザは text-shadow 属性をサポートしていません。
それでは、この記事は、フォントの凹みとはみ出しの効果を実現するための css3 メソッドの紹介です。これが、困っている友人に役立つことを願っています。
以上がcss3でフォントの凹凸効果を実現するにはどうすればよいですか？ (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。