CSS Text-Shadow를 사용하여 양각 텍스트를 만듭니다

키 테이크 아웃

CSS Text-Shadow 속성은 빛과 그늘을 시뮬레이션하여 양각 텍스트 효과를 만드는 데 사용될 수 있습니다. 이것은 텍스트에 긍정적 인 흰색 그림자와 부정적인 검은 그림자를 적용하여 문자의 바닥에 빛의 인상을 만듭니다. 엠보싱 효과를보다 현실적으로 만들려면 부분 불투명도에 RGBA 색상 값을 사용하고 X와 Y 방향으로 그림자를 상쇄하지 않고 사용중인 색상 조합에 따라 그림자를 조정하십시오. 예를 들어, 유색 배경의 가벼운 텍스트의 경우 0.25에서 불투명도를 가진 어두운 부정적인 그림자를 사용하십시오. 최종 효과는 밝은 색의 어두운 색조 또는 어두운 색의 더 밝은 그늘을 향해 이동함으로써 더욱 향상 될 수 있습니다. 이것은 어두운 그림자의 불투명도, 가벼운 그림자의 높은 불투명도, 배경 그늘을 향한 약간의 편견과 함께 밝은 그림자와 어두운 그림자의 미묘한 조합을 사용하여 달성 할 수 있습니다.

.

Text-Shadow 속성은 텍스트 아래에 그림자를 만듭니다. Syntax 및 기능은 Box-Shadow와 비슷하지만 요소의 경계 상자 주위를 렌더링하는 대신 개별 문자 모양을 따릅니다. X- 오프셋, y- 오프셋, 블러 라디우스 및 색상을 정의하는 일반적인 구문의 예입니다. 나는이 유형의 효과가 요구되는 디자인에서 일한 적이 없으며 그다지 좋아 보인다고 생각하지 않습니다. 스팸 전자 메일이나 지구장 사이트에서 찾을 수있는 것과 같은 치즈입니다. 클래스의 터치 그러나 특정 작업에 매우 유용하지만, 이것은 야생에서 사용되는 것에 거의 독점적으로 사용되는 것 같습니다.그것은이 그림자 속성을 가지고 있습니다 :

text-shadow:3px 3px 1px #999;

는 조심스럽게 완료되었고 너무 뻔뻔스럽게도 그 효과는 매력적 일 수 있습니다. 버튼 및 캡션과 같은 기능 텍스트가 클래스의 추가 터치를 제공합니다.이 페이지에서 몇 가지 예를 볼 수 있습니다.

상단의 검색 양식의 "검색"버튼 또는 오른쪽 열의 뉴스 레터 서명을위한 "Subscribe"버튼과 같은 오른쪽 기둥
• " 상단 근처의 카테고리 탭 그래서 빛과 그늘과 그늘과 깊이 효과는 빛과 그늘을 시뮬레이션함으로써 생성되므로 엠보싱드 효과를 만들기 위해 텍스트 그림을 적용하는 두 가지 기본 방법이 있습니다.
• 긍정적 인 흰색 그림자는 글자의 바닥에서 빛의 인상을 생성하는 긍정적 인 흰색 그림자입니다. 문자 :
그러나 발생하는 문제는 현실적인 결과를 달성하기 위해 적용 할 정도로 그늘의 올바른 균형을 찾는 것이 매우 어려울 수 있다는 것입니다. 너무 미묘하고 육안으로 거의 보이지 않습니다. 너무 분명하고 드롭 섀도우처럼 보이기 시작합니다. 불행히도 오른쪽에 가장 어려운 효과 중 하나는 밝은 배경의

어두운 텍스트입니다. 특히 텍스트 샤 두가 글꼴 외부에서

가

가 아니라
• 팁과 트릭

  text-shadow:0 -1px 1px rgba(0,0,0,0.5);

  이기 때문에 우리가 효과를 더 현실적으로 만들기 위해 할 수있는 일이 더 크게 늘어나거나 덜 박히는 것처럼 보일 수 있습니다. 내 팁은 다음과 같습니다. 가장 먼저, RGBA
색상 값을 사용하여 효과가 부분 불투명도를 갖도록하십시오. 이로 인해 배경과 더 잘 혼합되어 효과의 강도를 더 잘 제어 할 수 있습니다. (RGBA 색상은 IE 에서 지원이 부족하지만 어쨌든이 속성을 지원하지 않기 때문에 학문적입니다.) 시각적으로 너무 많은 지시 사항. 빛이 바로 위에있는 것처럼 방향으로 만 오프셋하는 경우 더 좋아 보인다. 그런 다음 컬러링 된 색상 조합에 따라 다른 그림자를 사용한다. 여기에서 나는 또한 1px blur-radius로 효과를 약간 부드럽게 만들었습니다. 다른 조합은 더 까다 롭습니다. 어두운 그림자는 매우 어두운 배경이나 매우 어두운 텍스트에 대해 효과가 없으며 가벼운 배경이나 텍스트가있는 가벼운 그림자와 동일합니다. 그러나 많은 실험을 마친 후에는 최상의 효과가 밝고 어두운 그림자의 미묘한 조합으로 달성된다고 생각합니다. 어두운 그림자에 낮은 불투명도, 가벼운 그림자의 높은 불투명도, 배경 그늘을 향한 약간의 편견을 추가하십시오 (가벼운 배경의 어두운 텍스트의 경우 약간 더 가벼운 그림자를 사용하고 그 반대도 마찬가지). 이와 유사 : 극단에서 멀어 질수록 (즉, 밝은 색의 어두운 그늘 또는 어두운 색의 더 밝은 그늘을 향해) 최종 효과는 더 나은 효과가 더 좋습니다.

• text-shadow:3px 3px 1px #999;

  마지막 예제는 완벽하지 않으며, 그 효과는 단지 거의 예상되는 것입니다 (우리가 방울처럼 보이는 것처럼 보이지 않기 때문에). 그러나 나는 그들이 어색한 색상 조합을 최대한 활용한다고 생각합니다. 그래서 모든 요소는 괜찮아 보입니다. 나는이 네 가지 예 모두와 함께 데모 페이지를 모았습니다. 그리고 제 생각에는 그들이 얼마나 좋아 보이는지 순서대로
당신의 아이디어를 더 잘 듣고 싶습니다. 특히 어려운 색상 조합 으로이 효과를 달성하기 위해 더 나은 방법을 듣고 싶습니다. 또는 텍스트 -Shadow 속성이 좋은 방법으로 완전히 다른 작업을 가지고있을 것입니다. CSS 텍스트 섀도우 및 엠보싱 텍스트에 대한 자주 묻는 질문 CSS Text-Shadow를 사용하여보다 뚜렷한 양각 효과를 만들 수 있습니까?

보다 뚜렷한 양각 효과를 만들려면 텍스트-쉐이드 속성의 블러 반경과 오프셋을 증가시킬 수 있습니다. 블러 반경은 블러의 양을 결정하고 오프셋은 텍스트에서 그림자의 거리와 방향을 결정합니다. 예를 들어, 다음 코드를 사용할 수 있습니다.

텍스트 -shadow : 2px 2px 2px #000; 이렇게하면 오른쪽에 2 픽셀, 텍스트에서 2 픽셀이 2 픽셀의 블러가 2 픽셀로 내려갑니다. 그림자 색상은 검은 색입니다 (#000). 원하는 효과를 달성하기 위해 이러한 값을 조정할 수 있습니다. 여러 텍스트 그림자를 사용하여 더 복잡한 엠보싱 효과를 만들 수 있습니까?

예, 여러 텍스트 그림자를 사용하여보다 복잡한 엠보싱 효과를 만들 수 있습니다. 쉼표로 분리하여 여러 그림자를 지정할 수 있습니다. 각 그림자는 수평 오프셋, 수직 오프셋 및 블러 반경의 동일한 세 가지 값으로 지정됩니다. 예를 들어 :

텍스트 -Shadow : 1px 1px 1px #000, -1px -1px 1px #fff;

이것은 두 개의 그림자를 만듭니다. 텍스트에서 1 픽셀과 흰색 그림자는 1 개의 픽셀과 왼쪽에서 1 개의 픽셀입니다. 두 그림자 모두 블러 반경이 1 픽셀입니다 CSS Text-Shadow를 사용하여 Decossed (삽입) 텍스트 효과를 생성하려면 어떻게해야합니까?

Decossed (삽입) 텍스트 효과를 만들려면 수직 및 수평 오프셋에 음수 값을 사용할 수 있습니다. 이렇게하면 텍스트 안에있는 것처럼 보이는 그림자가 생겨 삽입되거나 디스가 된 모양이됩니다. 예를 들어 :

text -shadow : -1px -1px 1px #000;
이것은 왼쪽에 1 픽셀, 텍스트에서 1 픽셀의 검은 그림자를 생성합니다. 글로우 효과를 만들기위한 텍스트 쉐이드. 이렇게하려면 그림자에 큰 흐림 반경과 밝은 색상을 사용할 수 있습니다. 예를 들면 :

text-shadow : 0 0 10px #f00;
텍스트 주위에 빨간 빛이 생길 수 있습니다.

CSS 텍스트 샤 두우를 사용하여 멀티 컬러 그림자 효과를 생성하는 방법은 무엇입니까? 예를 들어 :

텍스트 -Shadow : 1px 1px 1px #f00, 2px 2px 1px #0f0, 3px 3px 1px #00f;

이것은 세 가지 그림자를 만듭니다. 오른쪽에서 1 픽셀과 1 개의 픽셀이 텍스트에서 1 픽셀로 아래로, 2 개의 픽셀, 2 픽스, 2 개의 픽셀, 2 픽스, 2 개의 픽셀. 오른쪽에는 3 픽셀, 텍스트에서 3 픽셀 인 파란색 그림자. 모든 그림자의 반경은 1 픽셀입니다.

위 내용은 CSS Text-Shadow를 사용하여 양각 텍스트를 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!