CSS: 요소에 다양한 획 효과를 적용하는 여러 기술. CSS 텍스트 그림자 사용 예 다양한 각도의 글꼴 그림자 CSS
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 может работать совместно с псевдоэлементами :first-letter и :first-line .
Синтаксис
text-shadow: none | тень [,тень]*
где тень:
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>
Значения
None Отменяет добавление тени. цвет Цвет тени в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. Необязательный параметр. сдвиг по x Смещение тени по горизонтали относительно текста. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное - влево. Обязательный параметр. сдвиг по y Смещение тени по вертикали относительно текста. Также допустимо использовать отрицательное значение, которое поднимает тень выше текста. Обязательный параметр. радиус Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0. Учтите, что алгоритм сглаживания в браузерах обычно разный, поэтому вид тени может несколько различаться в зависимости от заданных параметров сглаживания.
Допускается указывать несколько параметров тени, разделяя их между собой запятой. В CSS3 учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке - в самом низу. В CSS2 порядок наоборот: первая тень размещается в самом низу, а последняя на самом верху.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
감귤류가 남쪽의 덤불에 살까요? 예, 하지만 가짜 사본입니다!
예제의 결과는 그림 1에 나와 있습니다. 1.
쌀. 1. Safari 브라우저의 섀도우 뷰
브라우저
Opera는 최대 6~9개의 그림자 옵션을 지원합니다. 이 값을 늘리고 흐림 반경을 100px 이상으로 늘리면 브라우저 성능에 영향을 미칩니다. Opera 버전 9.5-10은 CSS2와 유사한 다중 그림자 표시를 사용합니다.
버전 4.0 이전의 Safari는 하나의 그림자 옵션만 지원하고 나머지는 무시됩니다. 버전 4.0부터 이미 많은 섀도우가 작동하고 있습니다.
Internet Explorer는 버전 10.0부터 text-shadow 속성만 이해합니다. 대신 필터 속성인 Shadow(parameters) 가 사용됩니다. 예를 들어, 다음 구성은 그림자의 색상(#666666), 방향(세로에서 45°) 및 오프셋 양(4픽셀)을 지정합니다.
필터: 그림자(색상=#666666, 방향=45, 강도=4);
타이포그래피는 웹 디자인에서 제가 가장 좋아하는 장난감입니다. 물론, 도움을 받으면 글꼴의 스타일이나 크기를 약간만 변경하여 사람의 관심을 끌 수 있습니다. 매우 간단하고 매우 효과적입니다. 이 주제에 관해 많은 책이 저술되었으며 많은 사본이 분쟁으로 인해 손상되었습니다. 오늘은 일반적인 타이포그래피에 대한 조언을 제공하지 않겠습니다. 자격이 충분하지는 않지만 웹 사이트 텍스트 형식을 지정하는 방법은 언제나 환영합니다. 그래서 오늘은 CSS3 속성을 사용하는 몇 가지 방법을 보여 드리겠습니다. 텍스트 그림자, 매우 간단하지만 올바른 손에 있으면 놀라운 일을 할 수 있습니다.
기본 텍스트-그림자 구문
이 부동산 CSS3-moz 및 -webkit과 같은 공급업체 접두사 없이 모든 최신 브라우저에서 작동합니다. IE에서도 이 속성을 이해하도록 가르칠 수 있으며 Modernizr이나 유사 제품을 사용해야 합니다.
텍스트 그림자: x 오프셋 y 오프셋 흐림 색상;
이것이 기본 구문의 전부입니다. 첫 번째 값은 수평 오프셋이고 두 번째 값은 수직 오프셋, 그림자 흐림 및 그림자 색상입니다. 예를 살펴보겠습니다:
텍스트 그림자: 2px 4px 3px rgba(0,0,0,0.3);
그림자를 이동하고 3픽셀씩 흐리게 한 다음 투명도 30%의 검정색을 할당했습니다. 알파 채널이나 투명도를 사용하는 이유는 무엇입니까? 이렇게 하면 작업을 더 자유롭게 할 수 있습니다. 색상 선택에 대해 걱정할 필요 없이 투명도 값만 변경하면 좀 더 밝거나 어둡게 만들 수 있습니다. 꽤 빨리 나오므로 추천합니다.
우울한 글자
본문( 배경: #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);
요즘은 레트로한 스타일이 유행인데, 거기에는 블러 없이 그림자를 사용하는 경우도 있습니다. 자, 이제 준비됐어요
이중 그림자
텍스트 그림자: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
그리고 여기서는 속성의 또 다른 까다로운 기능이 사용됩니다. 텍스트 그림자, 선택기는 쉼표로 구분하여 나열할 수 있으므로 필요한 만큼 많은 그림자를 생성할 수 있습니다. 첫 번째 그림자에 배경과 비슷한 색상을 할당하면 그림과 같은 효과가 나타납니다.
아래로 그리고 멀리
텍스트 그림자: 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 );
글자가 방대해서 배경 위에 걸려있는 것 같죠? 여기서는 흐림 정도와 위치가 서로 다른 4개의 그림자를 사용합니다. 일반적으로 그림자를 더 많이 사용할수록 효과가 더욱 현실감 있게 나타나므로 프로젝트에서 이를 고려하십시오.
작은 3D 텍스트
텍스트 그림자: 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 텍스트
텍스트 그림자: 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이 들여쓴 텍스트
배경색: #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);
우울한 텍스트가 이미 거기에 있었지만 지금은 올라와 있습니다. 상당히 간단한 효과이지만 예를 들어 헤드라인에서는 매우 멋져 보입니다. 사용해 보세요, 사용해 보세요
결론적으로 말하고 싶은 것은 - CSS3 텍스트 그림자 속성이미 볼 수 있듯이 매우 간단합니다. 하지만 적절하게 사용하고 약간의 상상력을 발휘하면 놀라운 결과를 얻을 수 있습니다.
실험해 보세요, 좋은 하루 보내세요
블라드 메르제비치
한때 그림자가 있는 텍스트에 대한 특정 패션이 있었고 비슷한 효과는 거의 모든 웹사이트에서 볼 수 있었습니다. 그래픽 편집기에서 그림자를 추가하는 것은 간단하고 멋져 보입니다. 여기 사이트 스타일과 디자이너의 비율 감각에 관계없이 그림자가 있는 텍스트가 웹 페이지에 삽입됩니다. 대부분의 브라우저가 텍스트 그림자 스타일 속성을 지원하기 시작했을 때 이러한 유행은 이미 지나갔고 이제 그림자가 있는 텍스트는 매우 드뭅니다. 그러나 text-shadow에는 소수의 사람들이 의심하는 다른 암시적 용도가 많이 있습니다. 이 속성을 사용하면 윤곽선 텍스트를 만들고 "돌출"하고 광선, 흐림 효과 등을 만들 수 있습니다.
텍스트 그림자 사용
그림자 색상, 수평 및 수직 변위, 그림자 흐림 반경 등 4가지 매개변수가 값으로 기록됩니다(그림 1).
쌀. 1. 텍스트 그림자 매개변수
적절한 CSS 형식으로 모든 매개변수의 시작이나 끝 부분에 색상을 작성할 수 있습니다. 따라서 rgba 형식을 사용하여 반투명 그림자를 만들 수 있습니다. 양수 오프셋 값은 오른쪽과 아래쪽으로 그림자를 드리우고, 음수 오프셋 값은 각각 왼쪽과 위쪽으로 그림자를 드리웁니다. 텍스트 주위에 그림자를 적용하려면 오프셋 값을 0으로 설정하면 됩니다. 흐림 반경은 그림자의 선명도를 설정합니다. 흐림 반경이 클수록 그림자가 부드러워 보입니다.
text-shadow의 가장 큰 장점은 여러 가지 다른 그림자를 한 번에 추가하고 해당 매개변수를 쉼표로 구분하여 나열할 수 있다는 것입니다. 이 기능을 사용하면 기본적으로 다양한 효과를 만들 수 있습니다.
안타깝게도 버전 10.0 이전의 IE는 text-shadow 를 지원하지 않으므로 이 브라우저에서는 어떤 아름다움도 볼 수 없습니다.
개요 텍스트는 각 문자가 선으로 둘러싸여 있다는 사실이 특징이며, 그 색상은 텍스트 색상과 다릅니다(그림 2). 이 효과는 제목과 같이 큰 글꼴 크기에서 가장 잘 나타납니다. 본문 텍스트의 경우 개요를 사용하면 가독성이 손상될 뿐입니다.
쌀. 2. 개요 텍스트
윤곽선은 두 가지 방법을 사용하여 생성할 수 있습니다. 첫 번째 방법에서는 그림자 오프셋을 0으로 설정하고 흐림 반경을 문자 그대로 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 효과와 마찬가지로 그림자도 구현하기가 매우 쉽습니다. 하지만 단순한 행동의 조합으로 놀라운 효과를 얻을 수 있습니다.
