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.

두 번째 값은 그림자의 수직 위치를 제어합니다. 부정적인 가치가 그 위를 이동하는 동안 여기에 긍정적인 가치는 그림자의 아래쪽으로 이동합니다.

The 세번째 값은 그림자 on 흐림 금액을 조정합니다. 선명한 그림자에 대한 낮은 값 또는 더 흐린 그림자에 대한 높은 값을 사용합니다. 당신이 볼 수 있듯이, 나는 비교적 낮은 값을 사용하여 선호합니다.

그리고 그게 CSS3에서 텍스트 그림자를 만드는가 전부에요! 아래의 튜토리얼을 체크 아웃하여 CSS 학습 여행을 계속 :

Comments (0)

You must be logged in to comment.

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: