다양한 그래픽 효과 적용하기

box-shadow, text-shadow - 요소의 그림자 만들기

• 블록 요소와 텍스트에 그림자 효과 적용
  • box(text)-shadow: (가로축) (세로축) (퍼짐 정도) (색상) <= 이런식으로 나타냄

See the Pen Untitled by 신범식 (@ulqsqjpw-the-solid) on CodePen.

 

border-radius - 모서리를 둥글게 만들기

See the Pen Untitled by 신범식 (@ulqsqjpw-the-solid) on CodePen.

 

linear-gradient, radial-gradient - 그레이디언트 적용하기

• 그라데이션 적용 가능
  • linear-gradient(방향, 색상1,색상2) : 직선 모양
  • radial-gradient(색상1,색상2) : 타원 모양

See the Pen Untitled by 신범식 (@ulqsqjpw-the-solid) on CodePen.

 

filter - 특수 효과 사용하기

• 이 속성을 사용하면 포토샵에서 이미지를 리터칭한 효과
  • blur : 흐림 효과를 조절
  • brightness : 밝기를 조절
  • contrast : 명도 대비를 조절
  • grayscale : 흑백을 지정
  • hue-rotate : 색상 단계를 조절
  • invert : 색상 반전 단계를 조절
  • saturate : 채도를 조절
  • sepia : 갈색 톤 단계를 조절

See the Pen filter by 신범식 (@ulqsqjpw-the-solid) on CodePen.

순서대로 예시 (첫번째는 원본사진)