프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[CSS] filter

2023.12.29
북마크 작성자 정보
CSS Filter

filter : option

- none : 기본값, 효과를 지정하지 않음
- bulr(px) : 이미지 bulr 효가 적용 값이 클수록 흐림효과가 커짐, 값을 지정하지 않으면 기본값 0
- brightess(%) : 이미지 밝기를 설정,  0%(검정), 100%,1 이미지 원본값,  100% 기본값보다 밝음
- contrast(%) : 이미지 색상대비 설정 0%(검정), 100%,1 이미지 원본값,  100% 명함대비 향상
- drop-shadow : 이미지의 그림자 효과 적용  dorp-show (H-그림자 v-그림자 흐림 색상) 
=> drop-shadow( 8px 8px 10px gray);
- grayscale(%) :  이미지를 회색조로 변환 0% 이미지 원본, 100% 이미지 완전 회색
- hue-rotate(deg) : 이미지에 색조회전을 적용 최대값 360deg
- invert (%) : 이미지 반전 0% 이미지기본, 100%이미지 완전 반전
- opcity(%) : 이미지 투명도  
- saturate(%) : 이미지 포화
- sepia(%) :  이미지를 세피아로 변환


https://blog.naver.com/jsy930609/221671999277

이 포스트 공유하기

전체목록