All Articles Web
CSS3でテキストの影を作成する方法
Geoff Blake on Wed, March 30th | 0 comments
As I mentioned in my tutorial on creating rounded corners, CSS3 is offering up a lot of awesome new features, like multiple columns, gradients, and of course, border effects. In this tutorial, we'll t

私は、丸い角を作成するに私のチュートリアルで述べたように、 CSS3は複数の列、グラデーション、そしてもちろん、ボーダーの効果と同様に、素晴らしい新機能を大量に提供しています。このチュートリアルでは、我々はテキストにドロップシャドウを作成し、別の新機能を見てみましょう。

This CSS property is supported by the most recent versions of all popular browsers except Internet Explorer...

ステップ1

この効果を使い始めるには、あなたがテキストの影を適用したいCSSルールを見つけたり、作成してください。おそらく、これを使おうとする最良の方法は、この効果を適用するために特別にクラスのルールを作成することです。それは、私はとにかく何するつもりだんだ。私も再定義段落要素を使って私のテキストに書式のビットを適用しました。

ステップ2

次に、あなたのルールに"テキストの影"プロパティを追加します。我々は、"テキストの影"プロパティに適用できる4つの値があります。最初に、色に追加してください。あなたは、ドロップシャドウは、通常、かなり暗いですがあなたが、好きな任意の色を使用することができます。あなたがファイルを保存し、ブラウザで作業内容を確認すると、何も起こらないことがわかります。それは我々が最初にいくつかの追加のプロパティを設定する必要があるためです。

ステップ3

Directly after the color, let's set three numeric values. The first two values can be positive or negative. The last value must be positive.


Now what are these values for? Well, the first value is for the horizontal position of the drop shadow. A positive value will move the shadow to the right, and a negative value moves it to the left.

番目の値は影の垂直位置を制御します。負の値は、それが上に移動しながらここで正の値は、影の下に移動します。

番目の値は、影のぼかし量を制御します。シャープな影、またはそれ以上のぼやけた影のための高い値は低い値を使用してください。ご覧のように、私はかなり低い値を使用することを好みます。

そして、それはCSS3でテキストの影を作成することは以上です!以下のチュートリアルをチェックアウトし、CSSの学習の旅を続ける:

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: