box-shadow

엘리먼트들에게 그림자를 만들 수 있는 속성이 있는데, box-shadow속성이다.
2차원인 화면에 조금 더 입체감을 집어넣어서 표현할 수 있는 기능이다.

selector{
box-shadow: (offset-x) (offset-y)
}

를 기본 형식으로 하며

• offset-x (필수): x축(가로 축) 거리(양수, 0, 음수 적용 가능). 길이 값(% 단위 사용 금지)
• offset-y (필수): y축(세로 축) 거리(양수, 0, 음수 적용 가능). 길이 값(% 단위 사용 금지)
  -> 두 개는 x,y 순서대로 와야하고 사이에 다른 옵션을 넣을 수 없다.
• blur-radius (옵션): 흐림 효과. 크기의 기준은 흐림 효과를 원의 반지름으로 측정(양수, 0, 음수 없음). 초깃값은 0. 길이 값(% 단위 사용 금지)
  -> 반드시 offset-y 바로 뒤에서 지정해야 한다.
• spread-radius (옵션): 그림자 확대와 축소(양수, 0, 음수 적용 가능). 양수 값은 그림자를 확장하고 더 크게 만들고, 음수 값은 그림자를 축소
  -> 반드시 blur-radius 바로 뒤에서 지정해야 한다.
• color (옵션): 그림자 색상 값. 초깃값은 currentcolor(현재 글자색)
  -> offset-x, offset-y, blur-radius, spread-radius 사이에 올 수 없다.
• inset (옵션): 그림자를 박스 외부 그림자에서 박스 내부 그림자로 변경
  -> offset-x, offset-y, blur-radius, spread-radius 사이에 올 수 없다.

여러가지 옵션들을 추가할 수 있다.
그리고 box-shadow는 두 개이상 사용이 가능하고 (,)로 구분하여 사용한다. 순서대로 앞에서 뒤로 적용하고 첫 번째 그림자가 맨 위에 오게된다. 두 개 이상의 그림자를 적용하여 조금 더 깊이감있고 다채로운 그림자를 만들 수 있다.

transition과 hover를 사용한 box-shadow

이번에는 transition과 hover까지 사용하여 아래처럼 카드들을 선택하는 듯한 효과를 구현해보자.

<div class="cards">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

body {
  background-color: #e2e1e0;
  /*배경색을 하얀색과 약간 다른 색으로 해주어 카드를 구분해준다.*/
  text-align: center;
  /*카드들(div태그)을 가운데 정렬해준다*/
}

.cards > div {
  width:300px;
  height:300px;
  background-color:#fff;
  display:inline-block;
  margin:1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3);
  /*불투명도가 다른 두 그림자를 만들어 겹친다.*/
  transition: box-shadow 0.3s;
  /*box-shadow속성에 재생시간을 부여한다.*/
}

.cards > div:hover {
  box-shadow: 0 20px 38px rgba(0,0,0,.3), 0 10px 10px rgba(0,0,0,0.3);
  /*위치와 흐림도가 다른 두 그림자를 생성한다*/
  /*hover시에 그림자가 나타나도록 한다.*/
}

text-shadow

box-shadow와 유사하지만 text에 그림자를 넣을 수 있는 text-shadow속성이다.

selector{
text-shadow: (offset-x) (offset-y)
}

를 기본 형식으로 하고 box-shadow와 마찬가지로

• offset-x (필수): x축(가로 축) 거리(양수, 0, 음수 적용 가능). 길이 값(% 단위 사용 금지)
• offset-y (필수): y축(세로 축) 거리(양수, 0, 음수 적용 가능). 길이 값(% 단위 사용 금지)
  -> 두 개는 x,y 순서대로 와야하고 사이에 다른 옵션을 넣을 수 없다.
• blur-radius (옵션): 흐림 효과. 크기의 기준은 흐림 효과를 원의 반지름으로 측정(양수, 0, 음수 없음). 초깃값은 0. 길이 값(% 단위 사용 금지)
  -> 반드시 offset-y 바로 뒤에서 지정해야 한다.
• color (옵션): 그림자 색상 값. 초깃값은 currentcolor(현재 글자색)
  -> offset-x, offset-y, blur-radius 사이에 올 수 없다.
  여러가지 옵션을 추가할 수 있고 두 개 이상 (,)로 구분해 사용할 수 있다.

transition과 hover를 사용한 text-shadow

아래와 같이 transition과 hover를 이용해서 마우스를 가져다대면 그림자의 위치와 색이 바뀌도록 구현해보자.

<div>
  안녕하세요.
</div>

body {
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  /*text(div태그)를 정가운데에 오게한다.*/
  min-height:100vh;
  /*text를 정가운데로 오는 과정에서 align-items:center적용을 위해 body의
  높이를 웹 전체 높이로 만들어준다.*/
}

body > div {
  font-weight:bold;
  letter-spacing:-0.3rem;
  font-size:3rem;
  /*text꾸미기*/
  text-shadow: -10rem -3rem 10px gold, 10rem -3rem 10px red;
  /*첫번째 그림자는 왼쪽 위 금색 그림자이고 두번째는 오른쪽 위 빨간색 그림자이다.*/
  transition:text-shadow 1s;
  /*text-shadow에 재생시간을 부여한다.*/
}

body > div:hover {
  text-shadow: 10rem 3rem 0 blue, -10rem 3rem 0 green;
  /*:hover시에 왼쪽위 금색 그림자, 오른쪽 위 빨간색 그림자가 왼쪽 아래 초록색 그림자와
  오른쪽 아래 파란색 그림자로 바뀌도록 한다.*/
}