최근에 Firebug 1.4를 설치하려고 해서 Firefox 3.5를 설치하게 되었는데, 우연히 WordPress 배경의 아름다운 text Shadow 속성을 접하게 되었습니다. CSS의 text-shadow 속성이기도 해서 오늘은 몇 가지 정보를 정리했습니다. 모든 사람에게 영감이 되기를 바랍니다.
먼저 워드프레스 2.8의 백엔드에서 text-shadow가 사용되는 부분(녹색 화살표)을 살펴보겠습니다. 네, 이것은 이미지가 아니라 CSS3 속성입니다.
텍스트 섀도우란 무엇입니까?
text-shadow는 CSS2에 이미 존재했고 이제 CSS3에서는 이를 추가할 준비를 하고 있습니다. 그리고 Safari만이 이 속성을 항상 지원했기 때문에 Firefox 3.5의 지원이 다시 관심을 받기 전까지는 실제 애플리케이션을 거의 볼 수 없었습니다. 그 안에.
text-shadow는 텍스트에 그림자 추가를 지원하므로 CSS3 속성을 사용하여 디자인 중에 이미지를 사용하지 않고도 텍스트의 질감을 높일 수 있습니다.
현재 지원되는 브라우저에는 Firefox 3.1+, Safari 3+, Opera 9.5+ 및 기타 최신 브라우저가 포함됩니다(데이터가 편향될 수 있음). 물론 IE 제품군에서는 이를 지원할 수 없습니다.
다음으로 text-shadow의 구문을 살펴보세요.
text-shadow:색상 길이 길이 길이;
색상: 색상 길이는 각각 " X축 방향 길이 Y축 방향 길이 그림자 흐림 반경"을 나타냅니다.
X축의 양수 값은 오른쪽을 의미하고, 음수 값은 왼쪽을 의미합니다. 마찬가지로 Y축의 음수 값은 위쪽을 의미합니다. 또는 비어 있음(기본적으로 처리됨)
예를 들어:
텍스트 그림자: -1px 2px 3px #ffb69a;
그림자는 X축 방향으로 왼쪽으로 1px, Y축 방향으로 아래쪽으로 2px, 그림자 흐림 반경은 3px, 색상은 #ffb69a라는 뜻입니다.
일부 실험 및 데모
약간의 실험을 거쳐 데모 페이지를 만들었습니다. 텍스트 그림자를 지원하지 않는 브라우저를 사용하는 사용자도 그림자 효과를 볼 수 있도록 아래 스크린샷 을 살펴보시기 바랍니다. (친구가 "파이어버드"가 "치킨"처럼 보인다고 합니다.) :
Firefox 3.1+, Safari 및 기타 브라우저를 사용하는 경우 데모를 직접 클릭하세요.