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.

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

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

그리고 그게 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