CSS 텍스트 그림자 사용 예. CSS: 요소에 다양한 획 효과를 적용하는 여러 기술 CSS 텍스트 그림자 예
가장 친환경적인 디자이너라도 Photoshop에서 그림자를 만드는 방법을 알고 있습니다. 그림자는 디자인에 입체감을 더해주며 현재 매우 인기가 높습니다. 텍스트, 메뉴 항목 및 제목의 그림자도 예외는 아닙니다. Apple의 인터페이스 디자인을 회상하는 것으로 충분합니다.
기술 무기고에서 텍스트 그림자 작업 기술을 갖는 것이 유용할 것입니다.
일
이미지를 사용하지 않고 CSS를 사용하여 텍스트에 그림자를 만듭니다. 이를 통해 우리는 무엇을 달성할 수 있나요?
- 유연성 - 이미지가 필요하지 않으며 텍스트를 쉽게 변경할 수 있습니다.
- 속도 - 이미지 수 감소 - 페이지 무게 감소, 서버 호출 감소
- SEO - 텍스트는 그림보다 더 잘 최적화되며 텍스트를 그림으로 바꾸는 기술을 사용하는 것보다 더 안정적입니다.
일반 브라우저의 텍스트 그림자
일반 브라우저에는 W3C 권장 사항을 어느 정도 준수하는 모든 최신 브라우저가 포함됩니다. 이 경우 이러한 브라우저는 2003년에 권장되었던 CSS3 text-shadow 속성을 이해합니다.
text-shadow 속성을 지원하는 브라우저 목록은 다음과 같습니다.
- Safari 3.1(Mac/Win) - 다중 그림자를 지원하지만 지원하지 않습니다.
- Safari 4(Mac/Win) - 완전 지원
- Opera 9.5+(Mac/Win/Lin) - 완벽하게 지원
- Firefox 3.1/3.5(Mac/Win/Lin) - 완전 지원
- Google Chrome 2(Win) - 완전 지원
- Shiira(Mac) - 다중 그림자 지원, 지원하지 않음
- Konqueror(Lin/Mac/Win) - 완벽하게 지원
- iCab(Mac) - 여러 그림자를 지원하지만 지원하지 않습니다.
- iPhone의 Safari - 지원됨, 다중 그림자는 지원되지 않음
- Nokia Symbian-스마트폰(시리즈 60) - 지원
- Opera Mini 4.1 - 그림자 흐림 지원, 지원하지 않음
이러한 브라우저의 경우 CSS 한 줄이면 텍스트를 숨길 수 있습니다.
H1( 텍스트 그림자: 0px 1px 3px #000; )
우리는 다음과 같은 멋진 헤드라인을 얻습니다.
텍스트 그림자를 사용하면 다양하고 흥미로운 효과를 얻을 수 있습니다.
흐린 텍스트
H1( 색상: #fff; 배경: #666; 텍스트 그림자: 0px 0px 3px #fff; )
중복된 텍스트
H1( 텍스트 그림자: 0px 20px #000; )
여러 그림자를 사용하면 여러 가지 추가 효과를 얻을 수 있습니다.
움푹 들어간 텍스트
H1( 배경: #ccc; 색상: #ccc; 텍스트 그림자: -1px -1px #666, 1px 1px #FFF; 글꼴 계열: serif; )
돌출된 텍스트
H1( 배경: #999; 색상: #999; 텍스트 그림자: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; 글꼴 계열: serif; )
(IE는 텍스트 그림자를 지원하지 않기 때문에 여기의 아름다움을 즐길 수 없습니다). 텍스트 그림자를 사용하면 다양한 효과를 얻을 수 있습니다. 유일한 실질적인 제한은 상상력입니다.
이제 슬픈 일이 있습니다. 모두가 "좋아하는" IE를 어떻게 해야 할까요?
IE의 텍스트 그림자
버전 8까지의 IE는 텍스트 그림자를 이해하지 못하지만 자체적인 "종소리와 휘파람"이 많이 있습니다. 특히 그림자를 생성하기 위한 dropShadow() 필터가 있습니다. 그림자가 나타나려면 요소에 레이아웃 세트가 있어야 합니다. 여러 가지 방법으로 설치할 수 있습니다:
- 요소 속성 설정: block + height() 또는 width())
- 요소 제공 : 절대
- 지정: 왼쪽/오른쪽
- 줌 설정: 1
H1( 필터:progid:DXImageTransform.Microsoft.DropShadow(color="#666666",offX=2,offY=2, positive="true"); 확대/축소: 1; )
“만세!!!”라고 외칠 수 있을 것 같았습니다. 인생을 즐기세요. 하지만 이 필터가 실제로 어떻게 작동하는지 살펴보세요.
dropShadow 필터를 적용하면 텍스트가 나타나는 방식입니다.
이해하지 못하는 분들을 위해 이 필터의 단점은 다음과 같습니다.
- 그림자가 끔찍해 보입니다. 각도가 있고 반투명도가 있는 배경으로 부드럽게 전환되지 않습니다.
- 글꼴 스타일이 왜곡되었습니다.
- 그림자는 사실상 조정이 불가능합니다(그림자의 위치만 제어할 수 있습니다). 이는 dropShadow 대신 그림자 필터를 사용하여 부분적으로 피할 수 있지만 처음 두 가지 중요한 단점은 여전히 남아 있습니다.
- 레이아웃의 필수 존재로 인해 개발자가 다소 제한됩니다.
이 결과는 실제 프로젝트에서는 허용되지 않습니다. 개발자로부터 이러한 작업을 누가, 어떻게 인수했는지는 불분명합니다.
Kilian Valkhof는 섀도우 에뮬레이션 사용을 제안했습니다.
- 텍스트에 필터를 직접 적용하지 마세요.
- dropShadow 및 그림자 대신 글로우 및 흐림 필터 조합을 사용하십시오.
이렇게 하면 텍스트 왜곡이 방지되고 그림자가 더욱 유연해집니다.
테스트 헤더Тестовый заголовок
H1( 텍스트 그림자: 3px 3px 3px #cccccc; 위치: 상대; 확대/축소: 1; 색상: #000; ) h1 범위( 위치: 절대; 왼쪽: -3px; 위쪽: -3px; z-색인: -1; 필터: progid:DXImageTransform.Microsoft.Glow(Color=#cccccc,Strength=1) progid:DXImageTransform.Microsoft.blur(pixelradius=3, 활성화="true") ; 확대/축소: 1; )
그러나 이 접근 방식에도 여전히 많은 단점이 있습니다.
- 의미 없는 코드는 추가 요소이며, 텍스트가 중복되더라도 콘텐츠의 논리적 구조와 SEO 최적화에 가장 좋은 영향을 미치지 않습니다. 이 문제는 페이지가 로드될 때 IE에 대한 추가 요소를 삽입하는 javascript를 사용하여 해결할 수 있습니다.
- (텍스트 그림자를 이해하는) 다른 브라우저의 표시와 일치하지 않습니다. 필터를 사용하면 최소한의 설정으로 그림자를 에뮬레이트할 수 있습니다. 다른 브라우저와 그림자 유사성을 달성하는 것이 항상 가능한 것은 아닙니다.
- 유연성이 떨어짐 - 필터는 텍스트 그림자의 모든 기능을 제공하지 않습니다. 예를 들어 여러 그림자를 구현할 수 없습니다.
IE용 그림자를 생성하려면 javascript를 사용할 수 있습니다(javascript가 하루를 저장한 것은 처음이 아닙니다).
자바스크립트를 사용한 텍스트 그림자
테스트한 스크립트 중에서 jquery 플러그인 "Drop Shadow"를 선택했습니다. 장점:
- 여러 컨테이너를 삽입하여 그림자를 에뮬레이트합니다. 즉, IE용 필터를 사용하지 않고. 이를 통해 IE의 그림자를 다른 브라우저와 최대한 유사하게 만들 수 있으며 IE의 레이아웃에 대해 걱정할 필요가 없습니다.
- IE뿐만 아니라 때로는 유용할 수도 있는 그림자를 생성합니다.
- 스크립트는 4Kb(코드에서 주석을 제거하는 경우)로 가볍고 압축을 적용하면 훨씬 더 작아집니다. 스크립트를 작성하려면 jquery.dimensions.js 스크립트가 있어야 한다는 요구 사항이 있지만 여전히 그것이 왜 필요한지 이해가 되지 않습니다. 그림자는 ID에 따라 생성, 삭제, 정의됩니다.
- 간단하고 명확하게 사용 가능
- 어느 정도 성공하면 여러 그림자를 에뮬레이트할 수 있습니다.
결점:
- 요소 ID로 스크립트를 초기화할 수 없습니다.
- 요소에 배경이 주어지면 그림자는 텍스트가 아닌 요소 전체에 대해 생성됩니다.
- jquery 라이브러리(50Kb 이상)를 필수로 포함합니다. 그러나 jquery의 인기로 인해 이러한 단점이 실질적으로 제거되었습니다.
- 스크립트 설명에 따르면 jquery.dimensions.js(추가 2Kb) 연결도 필요합니다. 하지만 이 라이브러리가 왜 필요한지 이해가 되지 않습니다. 이 라이브러리가 없어도 모든 것이 잘 작동하는 것 같습니다.
Drop Shadow 플러그인 사용
통사론:
JQuery(선택기).dropShadow(옵션); // 요소에 그림자 만들기 jQuery(selector).redrawShadow(); // 그림자 다시 그리기 jQuery(selector).removeShadow(); // 그림자 제거 jQuery(selector).shadowId(); // 요소 그림자의 ID를 반환합니다.
왼쪽: [정수] (기본값 = 4) 위쪽: [정수] (기본값 = 4) 흐림: [정수] (기본값 = 2) 불투명도: [소수] (기본값 = 0.5) 색상: [문자열] (기본값 = " black") swap: [boolean] (기본값 = false)
left 및 top 매개변수는 레이블(또는 개체)의 왼쪽 위 모서리를 기준으로 그림자 시작 위치의 좌표입니다. 양수 값은 그림자를 오른쪽과 아래로 이동하고, 음수 값은 그림자를 왼쪽과 위로 이동합니다.
CSS text-shadow 속성은 텍스트의 그림자 설정을 담당합니다. box-shadow 속성과 매우 유사합니다.
CSS 텍스트-그림자 구문
텍스트 그림자 : X Y R 색상 ;
- X - X축을 따라 텍스트를 기준으로 그림자의 이동(대부분 px 픽셀로 설정됨)
- Y - Y축을 따라 텍스트를 기준으로 그림자의 이동(대부분 px 픽셀로 설정됨)
- R - 그림자 반경(가장 자주 px 픽셀로 지정됨)
- color - 색상(어떤 형식으로든 지정할 수 있습니다. html 색상 이름 참조)
텍스트 그림자 구문을 사용하면 여러 그림자를 쉼표로 구분하여 지정할 수 있습니다. 예를 들어
텍스트 그림자 : X1 Y1 R1 color1 , X2 Y2 R2 color2 , ...;
섀도우 우선순위(더 높거나 낮음)는 특정 CSS 버전에 따라 다릅니다. CSS3에서는 목록의 첫 번째 그림자가 맨 위에 배치되고 목록의 마지막 그림자가 맨 아래에 배치됩니다. CSS2에서는 그 반대입니다.
예: HTML에서 텍스트에 그림자를 만드는 방법
예 1. HTML의 텍스트에 대한 간단한 그림자
다음은 텍스트 그림자를 사용한 가장 간단한 예입니다. 여기에서는 오프셋(X 및 Y)을 모두 적용하고 흐림 반경도 만들었습니다.
Текст с тенью
Текст с тенью
Пример №2. Фиксированная или жесткая тень у текста в html
Ниже представлены два примера. Тень в обоих случаях одинаковая (фиксированная), т.е. без размытия. Обратите внимание, какой эффект создается, если текст будет на черном фоне.
Фиксированная или жесткая теньФиксированная или жесткая тень с фоном
На странице преобразуется в следующее
Фиксированная или жесткая тень
Фиксированная или жесткая тень с фоном
Пример №3. Двойная тень у текста в html
Двойная тень
На странице преобразуется в следующее
Двойная тень
Пример №4. Вдавленные буквы у текста в html
Вдавленные буквы - вариант 1Вдавленные буквы - вариант 2
На странице преобразуется в следующее
Вдавленные буквы - вариант 1
Вдавленные буквы - вариант 2
Пример №5. Вдавленные буквы у текста в html
Небольшой 3D текст
На странице преобразуется в следующее
Небольшой 3D текст
Для обращения к margin из JavaScript нужно писать следующую конструкцию:
document.getElementById("elementID").style.margin ="VALUE "
Влад Мержевич
Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow , мода уже прошла и теперь текст с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, о которых мало кто подозревает. С помощью этого свойства можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.
Использование text-shadow
В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).
Рис. 1. Параметры text-shadow
Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.
Большим плюсом text-shadow является возможность добавлять сразу несколько разных теней, перечисляя их параметры через запятую. Эта особенность, в основном, и позволяет делать разные эффекты.
К сожалению, IE до версии 10.0 не поддерживает text-shadow , так что в этом браузере мы никаких красивостей не увидим.
Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.
Рис. 2. Контурный текст
Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.
Пример 1. Контурный текст
개요 텍스트
이 방법으로 만든 윤곽은 그림 1에 나와 있습니다. 1. 윤곽선이 살짝 흐릿하게 나오므로 선명한 선을 얻고 싶은 분들을 위해 두 번째 방법을 추천합니다. 동일한 색상의 선명한 그림자 4개를 사용하여 구성되며, 한 픽셀씩 다른 각도로 이동됩니다(예 2).
예 2. 윤곽선에 대한 4개의 그림자
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
개요 텍스트
그러한 윤곽의 모양이 그림 1에 나와 있습니다. 3. 윤곽선이 더욱 표현력이 좋아진 것이 눈에 띕니다.
쌀. 3. 네 개의 그림자를 사용한 윤곽선
그림 3에 표시된 3D 텍스트 효과를 추가하려면 도 4에서는 여러 개의 그림자가 동시에 적용되며, 이는 수평 및 수직으로 한 픽셀씩 서로 상대적으로 이동됩니다.
쌀. 4. 3D 텍스트
개인적으로 이런 텍스트는 복고풍의 레터링을 떠오르게 하며, 역시 웹 페이지의 본문보다는 제목에 가장 적합합니다.
그림자의 수는 텍스트를 얼마나 앞으로 "끌어당기"려는지에 따라 달라집니다. 숫자가 클수록 문자의 "깊이"가 증가하고, 반대로 숫자가 작을수록 입체감이 감소합니다. 예제 3에서는 동일한 색상의 그림자 5개를 사용합니다.
예시 3: 입체감을 더하는 그림자
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
10실 냉장고
모든 그림자에 대해 흐림 반경을 0과 동일한 색상으로 설정합니다. 그림자는 오프셋 값만 다릅니다.
텍스트 엠보싱
텍스트 엠보싱, 즉 릴리프 효과를 만들려면 텍스트 색상이 배경 색상과 일치해야 합니다. 표면 위로 "돌출된" 글자의 한 부분은 밝게 빛나는 것처럼 보이지만 다른 부분은 그림자 속에 있습니다(그림 5).
쌀. 5. 양각 텍스트
유사한 효과를 추가하려면 두 개의 그림자가 필요합니다. 흰색 그림자를 한 픽셀씩 왼쪽으로 이동하고 어두운 회색 그림자를 오른쪽으로 이동합니다(예 4).
예 4: 양각 텍스트
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
양각 텍스트
릴리프는 회색 배경에서 가장 잘 보이므로 효과가 사이트의 모든 색 구성표에 적합하지 않습니다. 그런데 돌출된 텍스트보다는 누르기가 더 쉽습니다. 그림자 색상만 바꾸면 됩니다.
텍스트 그림자: #333 -1px -1px 0, #fff 1px 1px 0;
불타는 듯한 빛깔
텍스트 주변의 빛은 동일한 그림자이며 밝고 대조적입니다. 따라서 글로우 효과를 만들려면 그림자 색상을 변경하고 원하는 흐림 반경을 설정하면 됩니다. 텍스트 주위의 광선은 균일해야 하므로 그림자 오프셋을 0으로 설정해야 합니다. 그림에서. 그림 6은 다양한 색상으로 빛나는 예를 보여줍니다.
쌀. 6. 글로우 텍스트
실시예 5. 글로우
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
밝은 면
어두운면
흐림
그림자 자체가 흐려지기 때문에 그림자만 남겨두고 텍스트 자체를 숨기면 문자가 흐려지게 되며(그림 7), 흐려지는 정도는 text-shadow 매개변수를 사용하여 쉽게 조정할 수 있습니다.
쌀. 7. 흐림 효과가 있는 텍스트
원본 텍스트를 숨기려면 색상을 투명하게 설정하세요(예 6). 그러면 그림자 색상이 텍스트 색상 역할을 하고 흐림 반경에 따라 문자가 흐려지는 정도가 설정됩니다.
예 6: 텍스트 흐리게 처리
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
흐린 텍스트
섀도우 및 의사 클래스
그림자는 텍스트에 직접 추가할 필요가 없습니다. text-shadow 속성은 :hover 및 :first-letter 의사 클래스와 잘 작동합니다. 이로 인해 단락의 첫 글자 윤곽이 나타나거나 링크 위에 마우스 커서를 올리면 링크가 빛나는 등 텍스트에서 흥미로운 효과를 얻을 수 있습니다. 예제 7에서는 이러한 기술을 보여줍니다.
예제 7: 의사 클래스 사용
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
틈새 프로젝트는 비용에 관계없이 기존 채널의 속도를 늦춥니다. 세부 사항을 버리고 이전 캠페인 경험을 활용하여 마케팅 및 영업 부서를 안정화하는 시장 구조입니다. 물론 브랜드 구축은 자연스럽게 융합 PR을 밀어내고 시장 부문을 선점합니다. 투자는 역할의 사회적 지위를 동기화하여 경쟁을 증가시킵니다. 브랜드는 이전 캠페인 경험을 바탕으로 자연스럽게 배치 계획을 결정합니다.
타이포그래피는 웹 디자이너가 가장 좋아하는 장난감입니다. CSS에는 매우 흥미로운 도구가 하나 있습니다. 텍스트 그림자(텍스트 그림자)는 언뜻 보면 매우 단순해 보이지만 독창성과 상상력을 사용하면 도움을 받아 기억에 남는 효과를 만들 수 있습니다.
그림자 기본
재산 텍스트 그림자사용하기 매우 쉽습니다. 접두사를 사용하지 않고도 모든 최신 브라우저에서 지원됩니다. 그러나 IE에서는 (IE9에서도) 지원이 없습니다. Modernizr와 같은 도구를 사용하면 이전 버전의 IE에서도 CSS3 효과를 끌어낼 수 있습니다.
통사론
텍스트 그림자를 만들려면 속성 구문을 사용하십시오. 텍스트 그림자아래에 나와 있습니다. 정의할 매개변수는 4개입니다. 처음 두 매개변수는 그림자의 위치를 설정하고, 세 번째 매개변수는 흐림 수준을 설정하고, 네 번째 매개변수는 그림자의 색상을 결정합니다.
텍스트 그림자:horizontal_offsetvertical_offset 흐림 색상;
아래는 아래로 2픽셀, 오른쪽으로 4픽셀 오프셋되고, 3픽셀씩 흐려지고, 불투명도 30%에서 검정색으로 설정된 텍스트 그림자의 예입니다.
텍스트 그림자: 2px 4px 3px rgba(0,0,0,0.3);
이 속성을 사용한 결과는 다음과 같습니다.
RGBA를 사용하는 이유는 무엇입니까?
속성을 정의할 때 그림자 색상을 지정하기 위해 rgba를 사용할 필요는 없습니다. 그러나 rgba는 그림자를 정의할 때 투명도 수준이라는 또 다른 차원을 추가합니다.
이 방법은 색상을 결정하는 다른 방법보다 훨씬 간단합니다. 배경색보다 약간 더 어둡거나 밝을 수 있는 그림자 색상의 음영을 결정하는 데 집중할 필요가 없습니다. rgba를 사용하면 흰색이나 검정색을 사용하고 불투명도를 높여 색상을 혼합할 때 원하는 배경색을 얻을 수 있습니다.
속성 사용 텍스트 그림자단순한 그림자 효과에 국한되지 않고 텍스트에 다양한 효과를 만들 수 있습니다. 예를 들어, 우울한 텍스트의 환상을 만드는 코드는 다음과 같습니다.
먼저 텍스트 색상을 배경색보다 조금 더 어둡게 설정해야 합니다. 그런 다음 속성을 사용해야합니다. 텍스트 그림자화이트 컬러로 투명도를 높였습니다.
배경색은 #222이고 텍스트 색상은 불투명도 60%로 설정되어 있습니다. 흰색 그림자는 불투명도 10%로 약간 아래쪽 오른쪽에 배치됩니다.
본문( 배경: #222; ) #text h1 ( 색상: rgba(0,0,0,0.6); 텍스트 그림자: 2px 2px 3px rgba(255,255,255,0.1); )
그림자를 흐리게 할 필요는 전혀 없습니다. 선명한 그림자는 웹사이트 디자인과 잘 어울립니다.
텍스트 그림자: 6px 6px 0px rgba(0,0,0,0.2);
진짜 재미는 그림자가 하나뿐이라는 한계를 버릴 때부터 시작됩니다. 쉼표를 사용하여 정의를 구분하면 필요한 만큼 그림자를 사용할 수 있습니다!
텍스트 그림자: 그림자1, 그림자2, 그림자3;
다음은 두 개의 그림자를 사용하는 예입니다. 첫 번째는 배경색과 동일합니다.
텍스트 그림자: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
장거리 하향 변속
여러 그림자를 사용하는 방법에 익숙해지면 결과는 점점 더 극적으로 변할 것입니다. 텍스트에 3D 효과를 만드는 것은 매우 쉽습니다.
이 예에서는 서로 다른 거리에서 아래로 이동하고 흐리게 처리된 4개의 그림자를 사용합니다.
텍스트 그림자: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1 );
작은 거리를 아래로 이동하고 심하게 흐림
여기에 동일한 아이디어의 또 다른 구현이 있습니다. 세 개의 그림자가 더 작은 거리로 이동하고 더 흐려집니다.
텍스트 그림자: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
Mark Dotto의 3D 텍스트
이 효과는 MarkDotto.com 웹사이트에서 사용됩니다. 12가지의 서로 다른 그림자를 사용하여 뛰어난 3D 효과를 만들어냅니다.
텍스트 그림자: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
Gordon Hall이 들여쓴 텍스트
위의 예에서 나는 내 기술을 "빠르고 더러운" 활판 인쇄 효과라고 불렀습니다. 훨씬 더 믿을만한 진지하게 삽입된 텍스트를 만드는 훨씬 더 복잡한 방법이 있기 때문입니다.
Gordon은 외부 그림자뿐만 아니라 실제 내부 그림자도 끌어내기 위해 진지한 CSS 부두교를 사용합니다. 이 기술에 대한 전체 설명은 그의 블로그 게시물을 확인하세요.
배경색: #666666; -웹킷-배경-클립: 텍스트; -moz-배경-클립: 텍스트; 배경 클립: 텍스트; 색상: 투명; 텍스트 그림자: rgba(255,255,255,0.5) 0px 3px 3px;
불타는 듯한 빛깔
텍스트 그림자: 0px 0px 6px rgba(255,255,255,0.7);
텍스트 그림자: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;
다중 광원
텍스트 그림자: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);
색상: rgba(0,0,0,0.6); 텍스트 그림자: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
결론
대부분의 CSS 효과와 마찬가지로 그림자도 구현하기가 매우 쉽습니다. 하지만 단순한 행동의 조합으로 놀라운 효과를 얻을 수 있습니다.
웹 페이지를 장식하는 또 다른 방법은 CSS에서 그림자가 있는 텍스트를 만드는 것입니다. 이 스타일을 적절하게 사용하면 제목, 단락 또는 텍스트 일부를 성공적으로 강조 표시할 수 있습니다. 그림자 색상, 오프셋 및 흐림을 조정할 수 있습니다.
Internet Explorer 버전 9 이하를 제외한 모든 브라우저에서 지원되는 text-shadow 속성을 사용하여 CSS에서 텍스트 그림자를 설정할 수 있습니다. Opera Mini에도 문제가 있습니다. 이 브라우저는 속성을 부분적으로만 지원합니다. 다음은 스타일 및 속성 값을 작성하는 예입니다.
H1( 텍스트 그림자: 3px 5px 6px #6C9; )
보시다시피 공백으로 구분하여 최대 4개의 값을 지정했습니다. 순서대로 살펴 보겠습니다.
- 3px – 첫 번째 값은 X축(오른쪽, 왼쪽)을 따른 그림자의 오프셋을 담당합니다. 양수 값은 그림자를 오른쪽으로 이동하고, 음수 값은 그림자를 왼쪽으로 이동합니다.
- 5px - 두 번째 값은 Y축(아래, 위)을 따라 그림자의 오프셋을 담당합니다. 양수 값은 그림자를 아래로 이동하고, 음수 값은 그림자를 위로 이동합니다.
- 6px - 세 번째 값은 그림자 흐림 반경을 담당합니다. 이 매개변수는 선택사항입니다. 기본적으로 흐림 효과는 0픽셀이므로 그림자가 선명하고 흐릿해지지 않습니다.
- #6c9 – 네 번째 값은 그림자의 색상을 담당합니다. 이 매개변수는 선택사항입니다. 기본적으로 그림자 색상은 스타일이 적용된 텍스트와 동일한 색상으로 설정됩니다.
브라우저에서 그림자가 어떻게 보이는지(스크린샷):
스크린샷: 그림자가 있는 텍스트, CSS 텍스트에 대한 여러 CSS 그림자
text-shadow 속성에 여러 값 그룹을 사용하는 것도 가능합니다. 이는 하나의 텍스트에 여러 개의 그림자를 설정할 수 있음을 의미합니다. 이렇게 하려면 쉼표로 구분된 값 그룹을 작성해야 합니다.
H1( 텍스트 그림자: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7; )
이 스타일을 적용한 결과는 스크린샷에 표시됩니다.
스크린샷: CSS 텍스트에 대한 여러 그림자 CSS text-shadow 속성을 사용하면 정말 아름다운 것을 만들 수 있습니다. 실험해 볼 수 있습니다. 다양한 그림자를 설정하고, 색상을 16진수뿐만 아니라 RGBA 형식으로 설정하고, 알파 채널을 사용하여 투명도를 조정합니다. 이 속성에 충분히 주의를 기울이면 다음과 같은 일이 발생할 수 있습니다.
스크린샷: CSS의 3D 텍스트 그림자
