728x90
반응형
포토샵등 이미지 편집 도구를 이용하지 않고 css를 사용해서 이미지에 시각효과를 추가할 수 있다.
filter란?
filter속성은 요소에 대한 시각효과를 나타낸다.
filter 함수
blur(px)
이미지에 흐림효과를 적용한다. 값이 클수록 흐림 효과 ↑
brightness(%)
이미지에 밝기를 조정한다. 100%가 기본값, 100%보다 크면 밝기를 제공하고 0%보면 완전히 검게 처리한다.
contrast(%)
흐림효과 이미지의 대비를 조정한다. 100%가 기본값, 100%보다 크면 더 많은 대비를 제공한다.
drop-shadow(x, y, blur(색상))
이미지의 그림자 효과를 지정한다.
grayscale(%)
이미지를 회색조로 변환한다. 0%가 기본값, 100%는 이미지를 완전히 회색 처리한다. 음수는 제공하지 않는다.
hue-rotate(deg)
0%가 기본값, 이미지에 색조 회전을 적용한다. 0deg ~ 360deg
invert(%)
0%가 기본값, 이미지의 색상을 반전시킨다. 100%는 이미지의 색상을 완전히 반전시킨 값이다.
opacity(%)
이미지의 투명도를 지정한다. 100%가 기본값이다.
saturate(%)
이미지의 채도를 지정한다. 100%가 기본값이고 0%면 이미지의 채도를 완전히 없앤다. 100%를 초과하면 채도를 높이는 것이다.
sepia(%)
0%가 기본값, 이미지를 세피아톤으로 변환시킨다.
728x90
반응형
'Frontend > CSS' 카테고리의 다른 글
css - background 색상 여러개 사용하기 (0) | 2023.11.19 |
---|---|
css - input 태그 안에 이미지 넣기 (feat. input background 투명하게, palceholder 색깔 넣기 등등... ) (0) | 2023.07.30 |
css - 선택자 nth-child (0) | 2023.04.24 |
css-box shadow(animation도 적용시켜보기) (0) | 2023.04.24 |
css - 레이아웃 grid (0) | 2023.04.22 |