[CSS] 그림자 text-shadow , box-shadow

 

 

 

 

 

공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다.

재배포 수정하지 마세요. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

css로 문자나 박스의 그림자를 추가할 수 있다. 

그림자를 추가할 때 쓰는 속성은 text-shadow와 box-shadow 두 가지이다. 

 

 

---

 

Text shadow

text-shadow 속성으로 문자의 그림자를 추가 할 수 있다. 

입력값으로는 수평값(px)과 수직 값(px)을 지정해주어야 한다.

 

	h1 {
	  text-shadow: 2px 2px;
		}
        

 

 

 

또한, 색상도 지정 해 줄 수 있다. 

 

	h1 {
    	text-shadow: 2px 2px red;
	}
        

 

 

 

그림자의 크기와 색상 사이에 블러값도 넣어줄 수 있다.

블러값이 높아질수록 블러의 효과가 더 커진다.  

 

	h1 {
    	text-shadow: 2px 2px 5px red;
	}
        

 

 

 

그림자의 크기값을 0으로 하면 네 방면으로 다 그림자가 생긴다. 

 

	h1 {
    	text-shadow: 0 0 5px red;
	}
        

 

 

 

그림자를 중첩하여 사용 할 수도 있다.

 

	h1 {
     	color: yellow;
    	text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
	}
        

 

 

 

또한 그림자를 이용하여 단순한 border를 만들 수도 있다. 

 

	h1 {
    	color: yellow;
    	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	}
        

 

 

 

 

 

 

 

 

 

---

 

box shadow

 

박스에 그림자를 만들어 주는 속성이다.

text-shadow와 마찬가지로 수평 값(px)과 수직 값(px)을 지정해주어야 한다.

 

	div {
    	box-shadow: 10px 10px;
	}
        

 

 

 

그림자의 색상을 지정해준다. 

 

	div {
    	box-shadow: 10px 10px grey;
	}
        

 

 

 

그림자의 블러효과를 넣어준다. 

 

	div {
    	box-shadow: 10px 10px 5px grey;
	}
        

 

 

 

나머지 내용 또한 text-shadow와 같다.