CSS 그림자 글자 설정은 text-shadow 속성을 사용합니다. 흐리게, 중첩이 가능합니다. 테두리의 경우도 box-shadow 속성으로 그림자 설정이 가능합니다.
CSS 그림자 텍스트 : test-shadow
텍스트 그림자 기본
CSS 그림자 위치를 텍스트에 줄 경우 text-shadow 속성으로 구현합니다.
text-shadow: 수평그림자 수직그림자 흐림효과 그림자색;플러스 값은 오른쪽 또는 아래쪽으로 이동을 의미합니다. 마이너스 값은 왼쪽 또는 위로 이동을 의미합니다.
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-shadow: 2px 2px 0px red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>텍스트 그림자 흐리게
세 번째 요소에 값을 주면 그림자에 블러효과가 진행됩니다.
text-shadow: 수평그림자 수직그림자 5px 그림자색;<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-shadow: 2px 2px 5px blue;
}
</style>
</head>
<body>
<h1>안녕하세요?</h1>
</body>
</html>텍스트 그림자 중첩
쉼표 , 를 이용해서 여러 가지 그림자를 중첩할 수 있습니다.
text-shadow: 수평그림자 수직그림자 흐림효과 색, 수평그림자 수직그림자 흐림효과 색 ...아래 예시에서 마이너스 픽셀이란 왼쪽으로 그림자를 주거나 위쪽으로 그림자를 주는 옵션입니다. 총 4개의 그림자를 상, 하, 좌, 우에 중첩하면 테두리 효과를 줄 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: white;
text-shadow: -2px 0px 0px crimson, 2px 0px 0px crimson, 0px 2px 0px crimson, 0px -2px 0px crimson;
}
</style>
</head>
<body>
<h1>안녕하시렵니까?</h1>
</body>
</html>CSS 테두리 그림자 : box-shadow
테두리 그림자는 box-shadow 속성을 사용해서 구현합니다. text-shadow와 명령어만 다르고 그림자의 방향, 중첩 등의 기능은 모두 동일합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: pink;
box-shadow: -5px 5px 0px green;
}
</style>
</head>
<body>
<div>앗 나의 실수!</div>
</body>
</html>기호에 따라 그림자를 여러개 삽입해서 그림자 색을 구현하는 파트와 명암효과를 주는 파트를 구분해서 편집할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: cyan;
box-shadow: -5px 5px 0px blue, 5px 5px 20px green;
}
</style>
</head>
<body>
<div>세상에서 가장 빠른 사람은? 비사이로 막가!</div>
</body>
</html>워드프레스 등에서 CSS 수정시 그림자가 지워지지 않는 경우 box-shadow 옵션도 지우면 지워지는 경우가 많습니다.