最近、 Firebug 1.4 をインストールしたくてFirefox 3.5 をインストールしなければならなかったので、WordPress の背景にある美しいテキストシャドウに偶然出会いました。そこで、今日はいくつかの情報をまとめました。皆さんにとってもインスピレーションになれば幸いです。
まず、WordPress 2.8 のバックエンドで text-shadow が使用されている部分 (緑の矢印) を見てみましょう。はい、これらは CSS3 プロパティであり、画像ではありません。
テキストシャドウとは何ですか?
text-shadow は CSS2 にすでに存在していましたが、現在 CSS3 でこの属性を追加する準備が進められています。また、この属性を常にサポートしているのは Safari だけであったため、最近 Firefox 3.5 でこの属性のサポートが復活するまで、実際のアプリケーションを見ることはほとんどありませんでした。その中で。
text-shadow はテキストへの影の追加をサポートできるため、画像を使用せずにデザイン中に css3 属性を使用してテキストのテクスチャを増やすことができます。
現在サポートされているブラウザには、Firefox 3.1 以降、Safari 3 以降、Opera 9.5 以降、その他の最新のブラウザが含まれます (データに偏りがある可能性があります)。もちろん、IE ファミリはサポートできません。
次に、text-shadow の構文を見てみましょう。
テキストシャドウ:カラーの長さの長さの長さ;
color: 色; 長さはそれぞれ「 X軸方向の長さ、Y軸方向の長さ、影のぼかし半径」を参照します。
X 軸の正の値は右方向、負の値は左方向を意味します。同様に、Y 軸の負の値は上方向を意味します。または空 (デフォルトで処理されます)
例えば：
テキストシャドウ: -1px 2px 3px #ffb69a;
X軸方向に左に1px、Y軸方向に下に2px、影のぼかし半径が3px、色が#ffb69aであることを意味します。
いくつかの実験とデモ
text-shadowをサポートしていないブラウザを使用しているユーザーに影の効果を見てもらうために、ちょっとした実験をしてデモ ページを作成しました。下のスクリーンショットをご覧ください (友人は、「Firebird」は「チキン」に似ていると言っていました)。 :
Firefox 3.1 以降、Safari およびその他のブラウザを使用している場合は、 [デモ]を直接クリックしてください。