X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

無料プレミアムアクセス

プレミアムハブの記事、プロジェクトファイルとから、各チュートリアルビデオの最初の10%の私たちのライブラリ全体にアクセスするオンラインチュートリアルのライブラリを

今すぐ無料アカウントを作成しよう!

CSS3でテキストの影を作成する方法
Google翻訳で翻訳さ

私は、丸い角を作成するに私のチュートリアルで述べたように、 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の学習の旅を続ける:

Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link