CSS3 텍스트 효과 사용 방법 - 더미

CSS3의 텍스트에 대한 가장 중요한 개선점은 자신의 글꼴을 정의하고 웹 사이트에 패키지 할 수있는 @font 메커니즘입니다. CSS3는 다른 텍스트 포맷 트릭도 사용할 수 있습니다. 텍스트 획 및 텍스트 그림자 규칙을 사용하면 페이지의 텍스트를 재미있게 변형 할 수 있습니다.

이 두 규칙은 텍스트를 장식하는 데 사용되지만 가독성에 영향을 줄 수 있으므로 신중하게 사용해야합니다. 사이트의 주요 콘텐츠보다 큰 텍스트 (예: 헤드 라인)에 더 적합합니다.

텍스트 획

CSS3를 사용하면 텍스트에 획 색상을 지정할 수 있습니다. 이것은 문자 주위의 윤곽을 정의합니다. 표준 크기 속성을 사용하여 획 색상 (표준 CSS 색상 값 중 하나를 사용)과 획 폭을 지정할 수 있습니다.

텍스트 획 규칙이이 효과를 적용합니다. 코드에서 사용 된 것을 볼 수 있습니다:

textStroke. html h2 {color: yellow; -webkit-text-stroke: 2px 빨강;

텍스트 스트로크 데모

이 텍스트에는 획이 있음

현재 텍스트 스트로크 속성을 직접 지원하는 브라우저는 없지만 WebKit 기반 브라우저 (Chrome 및 Safari) 특정 - 웹킷 - 버전. 규칙을 지원하지 않는 브라우저는이를 무시하기 때문에 지원이 완료 될 때까지는 디자인의 중요한 부분이 아니어야합니다.

텍스트 그림자

그림자는 현대 웹 디자인의 또 다른 공통된 특징입니다. 그림자는 페이지에 깊이 요소를 추가하지만 페이지에서 헤드 라인을 들어 올리기 위해 가독성을 향상시킬 수도 있습니다 (올바르게 사용 된 경우). text-shadow 속성은 기술적으로 CSS2의 일부 였지만 최근에는 주요 브라우저에서만 지원되었습니다.

textShadow. html h2 {글꼴 크기: 300 %; text-shadow: 5px 5px 2px #cccccc;}

텍스트 그림자 데모

이 텍스트에는 그림자가 있습니다.

속성에는 네 개의 매개 변수가 있습니다.

• offset-x : x (좌우) 축에서 음영은 원래 텍스트에서옵니다. 양수 값은 그림자를 오른쪽으로 이동시키고 음수 값은 왼쪽으로 이동합니다.

• offset-y : 원래 텍스트에서 그림자가 y 축 (상하)으로 얼마나 멀리 떨어져 있는지 결정합니다. 양수 값은 그림자를 아래로 이동시키고 음수 값은 그림자를 위로 이동합니다.

• blur : 그림자의 흐림 반경을 지정합니다. 값이 0px이면 흐림 효과가없고 그림자는 원본 텍스트와 유사합니다. 일반적으로 흐림 값을 오프셋의 가장 긴 값에 가깝게 유지하려고합니다. 이렇게하면 그림자가 산만 해지지 않고 텍스트의 그림자로 인식 될 수 있습니다.

• color : 그림자 색상을 정의합니다. 일반적으로 어두운 회색을 선호하지만 특수 효과를 위해 다른 색상을 사용해 볼 수도 있습니다. 흐리게 처리하면 그림자 색상이 밝아지는 경향이 있습니다. 흐림 효과가 많이 적용되는 경우 음영 색은 텍스트와 동일한 색일 수 있습니다. 그림자가 많이 흐려지지 않으면 가독성을 위해 그림자 색상을 밝게해야 할 수도 있습니다. 그림자의 크기는 오프셋과 블러의 조합으로 간접적으로 결정됩니다. 찾고자하는 그림자를 얻으려면 실험을해야 할 수도 있습니다. 그림자 효과는 가독성에 영향을 미칠 수 있기 때문에 미묘 할 때 가장 좋습니다.

텍스트 섀도 잉의 특별한 경우는 텍스트가 배경 이미지와 뚜렷하게 구별되도록 돕는 데 사용될 수 있습니다. 대비되는 색의 작은 그림자를 적용하십시오. 이 기술은 배경에 텍스트가 필요할 때 자주 사용됩니다. 각 글자는 고 대비 배경을 생성하기 때문입니다. 다시 말하지만, 디자인 윤리를 위해 가독성을 희생하지 않도록하십시오.

모든 최신 모델 브라우저는 텍스트 그림자 기능을 지원합니다. 특별한 접두어는 필요하지 않습니다.