CSS: 요소에 다양한 획 효과를 적용하는 여러 기술. CSS 텍스트 그림자 사용 예 html에서 그림자가 있는 글꼴
타이포그래피는 웹 디자이너가 가장 좋아하는 장난감입니다. 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 효과와 마찬가지로 그림자도 구현하기가 매우 쉽습니다. 하지만 단순한 행동의 조합으로 놀라운 효과를 얻을 수 있습니다.
블라드 메르제비치
한때 그림자가 있는 텍스트에 대한 특정 패션이 있었고 유사한 효과는 거의 모든 웹사이트에서 볼 수 있었습니다. 그래픽 편집기에서 그림자를 추가하는 것은 간단하고 멋져 보입니다. 여기 사이트 스타일과 디자이너의 비율 감각에 관계없이 그림자가 있는 텍스트가 웹 페이지에 삽입됩니다. 대부분의 브라우저가 텍스트 그림자 스타일 속성을 지원하기 시작했을 때 유행은 이미 지나갔고 이제 그림자가 있는 텍스트는 매우 드뭅니다. 그러나 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을 밀어내고 시장 부문을 선점합니다. 투자는 역할의 사회적 지위를 동기화하여 경쟁을 증가시킵니다. 브랜드는 이전 캠페인 경험을 바탕으로 자연스럽게 배치 계획을 결정합니다.
타이포그래피는 웹 디자인에서 제가 가장 좋아하는 장난감입니다. 물론, 도움을 받으면 글꼴의 스타일이나 크기를 약간만 변경하여 사람의 관심을 끌 수 있습니다. 매우 간단하고 매우 효과적입니다. 이 주제에 관해 많은 책이 저술되었으며 많은 사본이 분쟁으로 인해 파손되었습니다. 오늘은 일반적인 타이포그래피에 대한 조언은 하지 않겠습니다. 자격은 부족하지만 웹 사이트 텍스트를 디자인하는 방법은 언제나 환영합니다. 그래서 오늘은 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 텍스트 그림자 속성이미 볼 수 있듯이 매우 간단합니다. 하지만 적절하게 사용하고 약간의 상상력을 발휘하면 놀라운 결과를 얻을 수 있습니다.
실험해 보세요, 좋은 하루 보내세요
이 모듈에는 밑줄, 텍스트 그림자, 동아시아 텍스트 악센트 등 텍스트 스타일과 관련된 CSS 기능이 포함되어 있습니다.
텍스트 스타일 속성
1. 선 디자인: 밑줄, 획, 취소선
밑줄, 획, 취소선은 대체되지 않은 줄 수준 블록(표시: 인라인)에 대해서만 표시되며 줄 시작과 끝의 들여쓰기를 제외하고 문자와 단어 사이의 공백을 포함하여 모든 텍스트에 표시됩니다.
브라우저는 선이 글리프와 교차하는 곳에서 밑줄과 획을 깨뜨려 글리프 외곽선의 양쪽에 어느 정도 거리를 두고 나타날 수 있습니다. 브라우저가 문자 모양 경계에서 밑줄이나 획을 끊을 때 해당 경계선의 모양은 문자 모양의 모양과 일치해야 합니다. 그러나 사양에서는 글리프의 "모양을 따르는" 특정 방법을 규정하지 않고 이를 브라우저에 맡깁니다.
쌀. 1. 밑줄 깨기 1.1. 데코레이션 라인 종류: text-dress-line 속성
브라우저 지원
즉: —
가장자리: —
파이어폭스: 36, 35 -모즈-
크롬: 57
원정 여행: 12.1, 7.1 -웹킷-
오페라: 44
iOS 사파리: 8 -웹킷-
Android용 UC 브라우저: 11.8
안드로이드용 크롬: 73
삼성 인터넷: 7.2
text-design-line 속성은 요소에 추가되는 선 유형(있는 경우)을 결정합니다.
재산은 상속되지 않습니다.
통사론
텍스트 장식 줄: 없음; 텍스트 장식 줄: 밑줄; 텍스트 장식 줄: 윗줄; 텍스트 장식 라인: 라인 통과; 텍스트 장식 줄: 깜박임; 텍스트 장식 라인: 밑줄 윗줄; text-꾸밈-라인: 윗줄 밑줄 통과; 텍스트 장식 라인: 상속; 텍스트 장식 줄: 초기;
1.2. 데코레이션 라인 스타일: text-design-style 속성
브라우저 지원
즉: —
가장자리: —
파이어폭스: 36, 35 -모즈-
크롬: 57
원정 여행: 12.1, 7.1 -웹킷-
오페라: 44
iOS 사파리: 8 -웹킷-
Android용 UC 브라우저: 11.8
안드로이드용 크롬: 73
삼성 인터넷: 7.2
text-design-style 속성은 요소에 지정된 텍스트를 장식하기 위해 그려지는 선의 스타일을 지정합니다. 값은 border-style 속성과 동일한 의미를 갖습니다.
재산은 상속되지 않습니다.
통사론
텍스트 장식 스타일: 솔리드; 텍스트 장식 스타일: 이중; 텍스트 장식 스타일: 점선; 텍스트 장식 스타일: 점선; 텍스트 장식 스타일: 물결 모양; 텍스트 장식 스타일: 상속; 텍스트 장식 스타일: 초기;
1.3. 장식선 색상 : text-design-color 속성
브라우저 지원
즉: —
가장자리: —
파이어폭스: 36, 35 -모즈-
크롬: 57
원정 여행: 12.1, 7.1 -웹킷-
오페라: 44
iOS 사파리: 8 -웹킷-
Android용 UC 브라우저: 11.8
안드로이드용 크롬: 73
삼성 인터넷: 7.2
text-꾸밈-색상 속성은 text-장식-라인을 사용하여 요소에 대해 설정된 텍스트 장식 선 색상을 지정합니다.
재산은 상속되지 않습니다.
통사론
텍스트 장식 색상: currentColor; 텍스트 장식 색상: 연어; 텍스트 장식 색상: #00ff00; 텍스트 장식 색상: rgba(255, 128, 128, 0.5); 텍스트 장식 색상: 투명; 텍스트 장식 색상: 상속; 텍스트 장식 색상: 초기;
1.4. 데코레이션 라인 속성에 대한 간략한 요약: 텍스트 장식 속성
브라우저 지원
즉: —
가장자리: —
파이어폭스: 36, 35 -모즈-
크롬: 57
원정 여행: 12.1, 7.1 -웹킷-
오페라: 44
iOS 사파리: 8 -웹킷-
Android용 UC 브라우저: 11.8
안드로이드용 크롬: 73
삼성 인터넷: 7.2
텍스트 장식 속성은 단일 선언에 텍스트 장식 라인 텍스트 장식 스타일 텍스트 장식 색상 속성을 작성하는 짧은 형식입니다. 결측값은 초기값으로 설정됩니다. 기본값 텍스트 장식: 없음 단색 currentColor; . 재산은 상속되지 않습니다. 그러나 모든 텍스트 줄의 스타일은 한 요소에 대해 동일해야 합니다.
1.5. 디자인 라인 위치 : text-underline-position 속성
브라우저 지원
즉: —
가장자리: 12
파이어폭스: —
크롬: 71
원정 여행: —
오페라: —
iOS 사파리: —
Android용 UC 브라우저: ?
안드로이드용 크롬: 71
삼성 인터넷: —
text-underline-position 속성은 요소에 지정된 밑줄의 위치를 설정합니다.
재산은 상속됩니다.
| 값: | |
| 자동 | 브라우저는 밑줄 위치를 결정하기 위해 모든 알고리즘을 사용할 수 있지만, 밑줄은 텍스트 기준선 위나 아래에 배치되어야 합니다. 기본값. |
| 아래에 | 밑줄은 요소의 텍스트 내용 아래에 있습니다. 이 경우 밑줄은 일반적으로 디센더와 교차하지 않습니다. 수직 인쇄 모드에서 특정 측면을 선호하는 경우 이 값을 왼쪽 또는 오른쪽과 결합할 수 있습니다. |
| 왼쪽 | 세로 입력 모드에서는 밑줄이 텍스트의 왼쪽 가장자리에 정렬됩니다. 그러나 이 값은 아래로 해석됩니다. |
| 오른쪽 | 세로 입력 모드에서는 밑줄이 텍스트의 오른쪽 가장자리에 정렬됩니다. 그러나 이 값은 아래로 해석됩니다. |
| 상속하다 | |
| 초기의 | |
통사론
텍스트 밑줄 위치: 자동; 텍스트 밑줄 위치: 아래; 텍스트 밑줄 위치: 왼쪽; 텍스트 밑줄 위치: 오른쪽; 텍스트 밑줄 위치: 왼쪽 아래; 텍스트 밑줄 위치: 오른쪽 아래; 텍스트 밑줄 위치: 상속; 텍스트 밑줄 위치: 초기; 
쌀. 2. 왼쪽 및 오른쪽 값을 사용하여 세로 타이포그래피 모드에서 양쪽 텍스트에 밑줄을 긋습니다.
2. 텍스트 그림자: text-shadow 속성
브라우저 지원
즉: 10
가장자리: 12
파이어폭스: 3.5
크롬: 4
원정 여행: 4
오페라: 10
iOS 사파리: 3.2
Android용 UC 브라우저: 11.8
안드로이드용 크롬: 73
삼성 인터넷: 4
text-shadow 속성은 텍스트에 그림자를 추가하는 데 사용됩니다. 텍스트 그림자는 놀라운 효과를 만들 수 있는 흥미로운 도구입니다. 그림자는 단일 또는 다중 레이어일 수 있으며 흐릿하거나 색상이 지정되거나 반투명할 수 있습니다. 요소의 그림자를 지정할 때 하나의 길이와 색상만 지정할 수 있으므로 단일 문자나 단어의 컬러 복사본을 생성할 수 있습니다. 또한 텍스트 색상과 배경 색상의 대비가 낮은 경우 그림자를 사용하면 텍스트를 더 쉽게 읽을 수 있습니다.
각 그림자는 텍스트 자체와 디자인 요소(텍스트 장식 속성) 모두에 적용됩니다. 동시에 여러 그림자를 지정할 수 있으며 쉼표로 구분하여 지정합니다. 그림자는 서로 겹치지만 텍스트 자체는 겹치지 않습니다. 첫 번째 그림자는 항상 다른 그림자 위에 위치합니다. 재산은 상속됩니다.
각 그림자는 2~3개의 길이와 선택적인 색상으로 정의됩니다. 허용되는 길이는 0 입니다.
재산은 상속되지 않습니다.
쌀. 3. 텍스트-그림자 속성 구문 | 텍스트 그림자 | |
|---|---|
| 값: | |
| X 오프셋 | 그림자의 수평 오프셋을 설정합니다. 양수 값은 텍스트 오른쪽에 그림자 오프셋을 그리고, 음수 값은 왼쪽에 그림자를 그립니다. |
| y-오프셋 | 그림자의 수직 오프셋을 설정합니다. 양수 값은 그림자를 아래로 이동하고, 음수 값은 그림자를 위로 이동합니다. |
| 흐림 | 흐림 반경을 설정합니다. 음수 값은 허용되지 않습니다. 흐림 값이 0이면 그림자의 가장자리가 선명합니다. 그렇지 않으면 값이 높을수록 그림자 가장자리가 더 흐려집니다. |
| 색상 | 그림자를 설정합니다. 색상이 없으면 사용된 색상은 색상 속성에서 가져옵니다. |
| 없음 | 기본값은 텍스트 그림자가 없음을 의미합니다. 지정된 속성을 가진 요소 그룹에서 요소의 그림자를 제거합니다. |
| 초기의 | 속성 값을 기본값으로 설정합니다. |
| 상속하다 | 상위 요소의 속성 값을 상속합니다. |
box-shadow 와 달리 텍스트 그림자는 잘리지 않으며 텍스트가 부분적으로 투명한 경우 나타날 수 있습니다. box-shadow 와 마찬가지로 텍스트 그림자는 레이아웃에 영향을 주지 않으며 스크롤 가능한 영역이 스크롤되거나 크기가 커지지 않습니다.
통사론
텍스트 그림자: 2px 2px 4px 분홍색; 텍스트 그림자: #fc0 1px 0 10px; 텍스트 그림자: 5px 5px #4D4644; 텍스트 그림자: 파란색 2px 5px; 텍스트 그림자: 5px 10px; 텍스트 그림자: 상속; 텍스트 그림자: 초기;
2.1. 텍스트 그림자 예
포스터 그림자
텍스트 그림자
텍스트 그림자-1( 배경: #77F7DE; 색상: 흰색; 텍스트 그림자: -2px -2px 0 #4D4644, 2px -2px 0 #4D4644, -2px 2px 0 #4D4644, 2px 2px 0 #4D4644, 4px 4px 0 흰색, 5px 5px 0 흰색, 6px 6px 0 흰색; 문자 간격: 0.1em; )
3D 그림자
텍스트 그림자
텍스트 그림자-2( 배경: 선형 그라데이션(-45deg, #FEE864, #F5965E); 색상: #f4f4f4; 텍스트 그림자: -1px -1px 흰색, 1px 1px 회색, 2px 2px #7a7a7a, 3px 3px #757575 , 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px #5c5c5c, 9px 9px #575757, 10px 10px #525252, 11px 11px #4d4d4d, 18px 1 8픽셀 30픽셀 RGBA(0, 0 , 0, .4), 18px 18px 10px rgba(0, 0, 0, .4); )
그림자 텍스트
텍스트 그림자
텍스트 그림자-3( 배경: #FFE6DB; 색상: #FFE6DB; 문자 간격: .1em; 텍스트 그림자: 3px 0 rgba(250, 111, 142, .5), 6px 0 rgba(250, 111, 142 , .4), 9px 0 rgba(250, 111, 142, .3), 12px 0 rgba(250, 111, 142, .2), 15px 0 rgba(250, 111, 142, .1); )
레트로 섀도우
텍스트 그림자
텍스트-그림자-4( 색상: #FB631E; 문자 간격: .1em; 텍스트-그림자: 4px 4px 흰색, 6px 6px #D7CC88; )
레이어드 섀도우
텍스트 그림자
텍스트-그림자-5( 배경: #f1f1f1; 색상: #fcc105; 문자 간격: .1em; 텍스트-그림자: 4px 4px #ff981d, 7px 7px rgba(200, 120, 22, .2); )
웹 페이지를 장식하는 또 다른 방법은 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 텍스트 그림자
