텍스트 그림자와 그라디언트

텍스트 그림자 (text-shadow)

해당 속성은 텍스트에 그림자를 넣어준다. 그림자는 해당 Element X축 Y축의 길이와 색상, 블러넓이 조합으로 생성된다.

• X축은 오른쪽 방향이 +(Plus) / 왼쪽 방향이 -(마이너스)

• Y축은 아래쪽 방향이 +(Plus) / 위쪽 방향이 -(마이너스)

사용법 (ex)

div{
  text-shadow: 2px 2px 3px #F00;
}

설명 (discription)

• div의 텍스트를 우측 2px, 아래쪽으로 2px, 블러효과를 3px, 그림자 색상은 빨간색

• 블러효과를 주고싶지 않을 때에는 'text-shadow: 2px 2px #F00;' 으로 하면된다.

텍스트 그라디언트

텍스트에 그라데이션 효과를 넣는것은 따로 속성이 존재하는 것은 아니다. 그리하여 여러 속성을 조합하여 만들어 가야한다.

• 하지만 그라디언트 속성은 각 브라우저마다 지원하는게 달라서 아래 방법대로라면, 일주 브라우저에서는 사용이 불가하다. 그리하여 접두사를 붙여서 사용해준다. (접두사 -> 크롬기준)

사용법 (ex)

div{
  background: linear-gradient(to left, #F00, #00F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

설명 (discription)

• background: linear-gradient; (방향, 시작색상, 끝색상);

• -webkit-background-clip: text; (텍스트에만 백그라운드 적용)

• -webkit-text-fill-color: transparent; (텍스트를 투명하게)