디자이너는 종종 독특한 글꼴 효과와 페이지 효과를 사용하는데, 그림자는 페이지의 텍스트와 요소를 3차원 효과로 눈에 띄게 만들 수 있습니다. 예를 들어, 텍스트 그림자의 경우 기존 방법에서는 텍스트를 잘라내고 이미지를 직접 사용해야 할 수 있습니다. SEO 및 웹 사이트 성능을 고려하면 CSS Sprites와 같은 기술을 사용하여 이미지를 통합할 수도 있습니다.
h2{ 배경:url(sprites.png) 반복 없음 0 0; text-indent:-9999em;...}
h2#title1{배경 위치:0 -30px;}
h2#title2{배경 위치:0 -60px;}
....
이것은 까다로운 일입니다. 이미지를 연결하는 데는 많은 시간이 걸리며, 더 나은 시각 효과를 얻으려면 고품질 32비트 PNG 이미지를 사용해야 할 수도 있습니다. 그러면 망할 IE 6 PNG에 직면하게 됩니다. 투명성 문제!
실제로 CSS를 완전히 사용하여 텍스트의 그림자 효과를 얻을 수 있습니다!
먼저 데모를 볼 수 있습니다.
텍스트 그림자
text-shadow를 사용하면 완벽한 텍스트 그림자 효과를 얻을 수 있습니다. 기본 글쓰기:
text-shadow:[색상 x축 y축 흐림 반경],[색상 x축 y축 흐림 반경]...
또는
text-shadow:[x축 y축 흐림 반경 색상],[x축 y축 흐림 반경 색상]...
여기서 색상은 그림자 색상을 먼저 쓰셔도 되고 맨 나중에 쓰셔도 됩니다. x축과 y축은 각각 그림자의 오프셋 위치이며, 흐림 반경은 그림자의 길이로 이해될 수 있습니다. 그리고 대부분의 브라우저는 이제 다중 레이어 그림자를 지원합니다. 여러 설정 그룹을 쉼표로 구분할 수 있습니다(물론 단일 설정만 사용할 수도 있습니다).
예:
h1{색상:#000; 배경:#333; 글꼴:bold 24px/2 "Microsoft Yahei",Arial;
텍스트 들여쓰기:2em;
텍스트 그림자:검은색 2px 2px 2px }
효과는 다음과 같습니다.
이 속성은 현재 IE를 제외한 대부분의 브라우저에서 지원되며 IE의 경우 섀도우 필터를 사용하여 이를 달성할 수 있습니다.
필터: 그림자(색상='검은색', 방향='135', 강도='2')
섀도우 필터를 사용하면 각도 방향만 정의할 수 있고 xy 축은 정의할 수 없으며 z 축도 강도로 대체되었음을 알 수 있습니다. 이 필터를 사용할 때는 배경색을 설정할 수 없습니다 . 그렇지 않으면 필터가 유효하지 않습니다! 또한 수학에 능숙하지 않고 삼각 함수 알고리즘을 이해하지 못하는 경우 IE의 다른 필터인 dropshadow를 사용할 수 있습니다.
필터: dropshadow(OffX=2, OffY=2, 색상='검은색', 양수='true');
글쎄, IE는 항상 우리를 방해하지만 IE의 두 필터가 다중 레이어 그림자를 지원한다는 점은 언급할 가치가 있습니다! 예를 들어 다음과 같이 작성할 수 있습니다.
필터: dropshadow(OffX=2, OffY=2, 색상='빨간색', 양수='true')
dropshadow(OffX=2, OffY=2, 색상='노란색', 양수='true')
dropshadow(OffX=2, OffY=2, 색상='파란색', 양수='true');
IE용 두 필터에 대해 자세히 알아보려면 Shadow 및 Dropshadow를 확인하세요.
다중 레이어 섀도우의 예를 살펴보겠습니다(여기서는 IE를 무시함).
h1{글꼴:bold 32px/2 Verdana, Geneva, sans-serif color:#f39;
text-shadow:1px 1px 2px rgba(0,0,0,.8), 0 0 1em rgba(255, 0, 255, 0.5), 0 0 0.2em rgba(0, 0, 255, 0.9);}
효과는 그림과 같습니다..jpg)
여기서는 CSS에서 색상과 투명도를 동시에 선언하는 방법이자 대부분의 A급 브라우저( IE 제외 )에서 지원하는 색상 속성인 rgba 색상을 사용합니다. 자세한 내용은 " RGBa" 색상을 참조하세요. 브라우저 지원 " - 동시에 단색 반투명성을 위해 이 간단한 쓰기 방법을 사용하는 것이 좋습니다.
텍스트 그림자에 대한 브라우저 호환성
현재 text-shadow는 Firefox 3.5+, Safari 1.1+/chrome 2.0+ 및 Opera 9.5에서 지원되지만 IE에서는 지원되지 않습니다. Safari 4.0만이 다중 레이어 그림자를 지원한다는 점에 유의해야 합니다.
상자 그림자
먼저 IE에 대해 이야기해 보겠습니다. IE는 box-shadow 속성을 지원하지 않지만 위에서 언급한 두 가지 필터를 사용하여 그림자 효과를 얻을 수 있습니다. 이는 IE가 텍스트 그림자와 상자 그림자를 구별하지 않는다는 것을 의미합니다! 이로 인해 몇 가지 문제가 발생합니다. 요소 내의 텍스트가 요소의 그림자 설정을 상속합니다. 그러나 요소의 배경과 테두리를 정의하지 않으면 텍스트 그림자만 나타나며, 테두리를 정의하지 않고 배경 속성만 정의하면 상자 그림자만 나타나며 텍스트에는 그림자가 나타나지 않습니다. 테두리 속성만 정의한 경우, 배경을 정의하지 않은 경우 상자 그림자가 나타나며, 콘텐츠 텍스트와 그림에도 그림자가 나타납니다. 관심 있는 학생들은 시도해 볼 수 있습니다.
좋습니다. 이제 IE는 잊어버리고 box-shadow를 살펴보겠습니다. 사실 text-shadow를 이해하면 box-shadow를 이해하기 쉽습니다. 현재는 Firefox와 Safari/chrome만이 private 속성을 통해 box-shadow 속성을 지원합니다. Opera 브라우저는 현재 이 속성을 지원하지 않지만 문서에는 Presto 2.3 엔진의 다음 버전(Opera 10.10 엔진의 최신 버전은 Presto 2.2.15)이 box-shadow를 지원할 것이라고 언급되어 있습니다. 우리 천천히 기다리자.
box-shadow의 구문은 text-shadow와 동일합니다.
#boxShadow{
...
-webkit-box-shadow:2px 2px 2px 검정;
-moz-box-shadow:2px 2px 2px 검정;
...
}
실제로 box-shadow와 border-radius는 좋은 파트너입니다.
#boxShadow1{-moz-border-radius:10px;
-webkit-border-radius:10px;
테두리 반경:10px;
테두리:1px 솔리드 ddd;
-webkit-box-shadow:0 0 10px 검정색;
-moz-box-shadow:0 0 10px 검정;
패딩:10px;}
효과는 그림과 같습니다..jpg)
Firefox는 버전 3.5부터 box-shadow를 지원하기 시작했으며 현재 그림자 렌더링은 아직 완벽하지 않습니다.
요약
CSS 섀도우는 CSS3의 매우 유용한 기능입니다. 우리는 이미 Firefox/webkit/Opera에서 text-shadow를 사용할 수 있으며 box-shadow는 곧 이 브라우저에서 구현될 것입니다. 오직 IE만이 독특하고 여전히 형편없는 필터를 고집합니다. 이것은 정말 실패입니다.