씨에스에스로 글자와 상자에 그림자를 넣을 수 있다. (CSS Shadow Effects)
www.w3schools.com/css/css3_shadows.asp
CSS Shadow Effects
CSS Shadow Effects With CSS you can create shadow effects! Hover over me! CSS Shadow Effects With CSS you can add shadow to text and to elements. In these chapters you will learn about the following properties: CSS Text Shadow The CSS text-shadow property
www.w3schools.com
1. 글자에 넣기: text-shadow
h1 { text-shadow: 3px 2px; }
기본 꼴이다. 그림자 위치는 오른쪽으로 3px 아래쪽으로 2px가 된다. 왼쪽이나 위쪽으로 넣고 싶다면 음의 부호($-$)를 넣으면 된다. $+$가 $y$축 방향으로 아래쪽인 것이 수학에서 쓰는 좌표와 다르다.
글자 그림자: text-shadow
h1 { text-shadow: 2px 2px 5px; }
다음 세 번째 숫자는 그림자를 퍼지게 해서 흐릿하게 만든다.(blur)
글자 그림자: text-shadow
h1 { text-shadow: 2px 2px 5px blue; }
그림자 색을 정해서 반영할 수 있다.
글자 그림자: text-shadow
h1 { color: #fff; text-shadow: 1px 1px 2px #000, 0 0 25px #666, 0 0 5px #333; }
마지막으로 그림자를 잇달아 쌓아서 새로운 효과를 만들 수 있다. 이때 효과들은 쉼표(,)로 구분하여 만든다. 블로그 제목처럼 흰색 글씨에 그림자를 넣어서 강조하는 꼴을 만들 수 있다.
글자 그림자: text-shadow Effort
2. 상자에 넣기: box-shadow
같은 방법으로 상자에도 그림자 효과를 넣을 수 있다.
div { box-shadow: 10px 10px 5px #333; }
상자에 그림자 넣기
box-shadow
div.card { box-shadow: 0 4px 8px 0 #333, 0 6px 20px 0 #f00; }
상자에 그림자 넣기
box-shadow
