CSS 그림자

(2019-08-03)

text-shadow, box-shadow

1. CSS 텍스트의 그림자 속성 : text-shadow       ☞ MDN (Mozilla) : text-shadow 참조

  ㅇ (형식1) { text-shadow : offset-x offset-y blur-radius color }
  ㅇ (형식2) { text-shadow : color offset-x offset-y blur-radius }
     - offset-x : 그림자 수평위치 offset (필수)
     - offset-y : 그림자 수직위치 offset (필수)
        . 음수 값은 텍스트의 왼쪽에 그림자가 나타남
     - blur-radius : 흐림도(번짐), 번짐 효과 크기 blurriness (선택)
     - color : 그림자 색상 (선택)  ☞ CSS 색상 참조
        . color 생략되면 텍스트의 foreground color가 적용됨


2. CSS 박스의 그림자 속성 : box-shadow          ☞ MDN (Mozilla) : box-shadow 참조

  ㅇ (형식1) { box-shadow : offset-x offset-y }
  ㅇ (형식2) { box-shadow : offset-x offset-y color }
  ㅇ (형식3) { box-shadow : offset-x offset-y blur-radius color }
  ㅇ (형식4) { box-shadow : offset-x offset-y blur-radius spread-radius color }
  ㅇ (형식5) { box-shadow : inset offset-x offset-y color }
     - offset-x : 그림자 수평위치 offset (필수)
     - offset-y : 그림자 수직위치 offset (필수)
        . 음수 값은 박스의 왼쪽에 그림자가 나타남
     - color : 그림자 색상 (선택)  ☞ CSS 색상 참조
        . color 생략되면 박스의 foreground color가 적용됨
     - blur-radius : 흐림도(번짐), 번짐 효과 크기 blurriness (선택)
        . 값이 크면 클 수록 그림자 테두리가 흐려지므로 크기는 더 커지고 색은 더 밝아짐 (≥ 0)
     - spread-radius : 0 => 그림자와 요소 크기 동일, 양수 => 그림자가 요소보다 더 커지고 확산,
                       음수 => 그림자가 요소보다 더 작아짐/줄어듬
     - inset : inset 키워드 적용시, 그림자가 안쪽에 생성됨 (선택)


[CSS] 1. CSS 2. CSS 선택자 3. CSS 속성 4. CSS 속성값 5. CSS 박스 모델 6. block,inline 요소 유형 7. CSS 색상 8. CSS 배경 9. CSS 위치 10. CSS 정렬 11. CSS 텍스트 12. CSS 폰트 13. CSS 리스트 14. CSS @ 규칙 15. CSS 그림자 16. CSS 시간 변형 17. CSS 2차원 변형

 
        최근수정     요약목록     참고문헌