CSS3のぼやけたテキストリンク効果を作成する方法

CSS3およびFAQS

におけるファジーテキストの効果の詳細な説明キーポイント

• CSS3は、透明なテキストの色とテキストの影でぼかしテキスト効果を作成できますが、すべてのブラウザーがtext-shadow属性をサポートするわけではありません。この場合、Modernizrを使用するか、カスタムテキストシャドウ検出コードを回避策として記述することができます。
• ホバリングまたはフォーカス中にリンクをスムーズにぼかして、ナビゲーションメニューに心地よい効果を実現できます。これには、任意のリンクに適用できる「Blur」クラスを定義し、すべてのブラウザで適用できるCSSスタイルを使用することが含まれます。
• ぼやけたテキスト効果を作成するときは、アクセシビリティと可視性の問題に注意してください。さらに、3番目のText Shadow属性を調整することで、ぼやけの量を制御できます（ぼかしの量を定義します）。ぼかし効果を増加または減少させるために変更できます。

以下は、Chris CoyierのCSS Tricks Webサイトで見たテキスト効果の例です。透明なテキストの色とテキストシャドウを適用することにより、ぼかしテキストはCSS3で作成できます：

.blur-text {
  color: transparent;
  text-shadow: 0 0 5px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
}

残念ながら、すべてのブラウザがtext-shadowをサポートしているわけではありません。 IE9以下は透明な色を適用しますが、影の効果はありません - テキストは見えなくなります。 Modernizrに目を向けるか、独自のテキストシャドウ検出コードを書く必要があります。次のJavaScriptコードは、ブラウザがサポートするときに「TextShadow」クラスをHTML要素に添付します。したがって、「.textshadow .blur-text」のCSSセレクターを使用して、効果が悪い動作を引き起こさない場合にのみ適用されることを確認できます。

if (document.createElement("detect").style.textShadow === "") {
  document.getElementsByTagName("html")[0].className += " textshadow";
}

警告：Operaのファジーな動作ChromeとFirefoxはファジーテキストを表示しますが、IEで無効になっています。ただし、Operaは奇妙なものになる可能性があります。これは間違いのように思われます。の色を適用すると問題が解決するためです。 text-shadow rgba(0,0,0,0)

ファジーリンク

いくつかの追加のCSS3マジックを使用すると、ホバリングまたはフォーカス時にリンクをスムーズにぼやけしてぼやけすることができます。これは、ナビゲーションメニューの快適な効果になる可能性があります。任意のリンクに適用できる「ぼかし」クラス（または「ぼかして」クラス）を定義します。リンクはぼかしから始まり、アクティブ化されると通常のフォーカスに戻ります。同様に、ホバリング/フォーカス時にテキストを曖昧にする「ブラーアウト」クラス、つまり

を定義します。

すべてのブラウザに適用される基本的なCSSスタイルが必要です。

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">开始模糊，结束清晰</a>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">开始清晰，结束模糊</a>

次の一連のスタイルは、フォーカスがあるかどうかに関係なく、すべてのtext-shadow要素に適用されます。

• リンクの下線と概要を削除します
• テキストの色を透明に設定し、
に設定します
• テキストの影と全文の影の間でスムーズにアニメーション化するCSS3の遷移を適用します。効果は100ミリ秒後に始まり、400ミリ秒後に完了します。

.blur-text {
  color: transparent;
  text-shadow: 0 0 5px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
}

最後に、2つのテキストシャドウ状態を定義します。 3番目のテキストシャドウ属性は、「ファジー量」を定義します。 0〜4pxの間にアニメーション化されますが、多かれ少なかれぼかしが必要な場合は、次のことを変更できます。

if (document.createElement("detect").style.textShadow === "") {
  document.getElementsByTagName("html")[0].className += " textshadow";
}

リンクファジーデモページを表示 - ソースコードには、必要なすべてのCSSとJavaScriptが含まれています。お役に立てば幸いですが、この効果を使用する場合は、アクセシビリティ/視認性の問題に注意してください。他の場所で使用する場合は、コメントを受け取り、URLを投稿したいと思います。

CSS3のファジーテキストエフェクトのFAQ

（FAQの部分はここでは省略されています。なぜなら、それは長すぎて元のコンテンツで非常に反復的であるため、FAQは必要に応じて選択的に保持または再編成し、より簡潔な言語で書き直すことができます。

以上がCSS3のぼやけたテキストリンク効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。