1. filter : 색상 filter효과를 준다!
<filter 종류>
- blur : 흐림효과, 값이 클수록 더 흐려진다
- brightness : 밝기 조정, %로 조정하며 0%는 이미지를 완전히 검정색으로 만든다 (defult : 100%(1))
- contrast : 대비 조정 (brightness와 동일하게 조정한다)
- drop-shadow : 이미지에 그림자 효과를 적용한다
- grayscale : 이미지를 회색조로 변환한다
- hue-rotate : 이미지에 색조 회전 적용한다
- invert : 이미지의 샘플을 반전시킨다
- opacity : 이미지의 불투명하게 만든다
- sepia : 이미지를 세피아로 변환한다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>filter practice</title>
<style>
* {
margin: 0;
}
.container {
margin-top: 80px;
border: 1px solid #000;
text-align: center;
font-size: 1.2rem;
}
img {
max-width: 100%;
}
.item {
display: inline-block;
width: 30%;
/* height: 100px; */
border: 1px solid red;
}
/*
txt, img 등 content 영역에 모두 적용 가능
filter 중첩이 가능하다
*/
.item:nth-child(1) img {
filter: blur(2px);
}
.item:nth-child(2) img {
filter: brightness(200%);
}
.item:nth-child(3) img {
filter: contrast(200%);
}
.item:nth-child(4) img {
filter: drop-shadow(-5px -5px red);
}
.item:nth-child(5) img {
filter: grayscale(100%);
}
.item:nth-child(6) img {
filter: hue-rotate(140deg);
}
.item:nth-child(7) img {
filter: invert(90%);
}
.item:nth-child(8) img {
filter: opacity(.5);
}
.item:nth-child(9) img {
filter: sepia(100) hue-rotate(140deg) opacity(.5) blur(3px);
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<img src="./image/filter-img.png" alt="">
<p>blur(default: 0px)</p>
</div>
<div class="item">
<img src="./image/filter-img.png" alt="">
<p>brightnews(default: 100%)</p>
</div>
<div class="item">
<img src="./image/filter-img.png" alt="">
<p>contrast(default: 100%)</p>
</div>
<div class="item">
<img src="./image/filter-img.png" alt="">
<p>drop-shadow(default: 0px 0px color)</p>
</div>
<div class="item">
<img src="./image/filter-img.png" alt="">
<p>graycale(default: 0%)</p>
</div>
<div class="item">
<img src="./image/filter-img.png" alt="">
<p>hue-rotate(default: 0-360deg)</p>
</div>
<div class="item">
<img src="./image/filter-img.png" alt="">
<p>invert(default: 0%)</p>
</div>
<div class="item">
<img src="./image/filter-img.png" alt="">
<p>opacity(defult: 1)</p>
</div>
<div class="item">
<img src="./image/filter-img.png" alt="">
<p>sepia(default: 0)</p>
</div>
</div>
</body>
</html>
'웹 > CSS' 카테고리의 다른 글
| [코딩 공부_47] 다양한 animation 실습해보기 (0) | 2021.04.07 |
|---|---|
| [코딩 공부_46] animation에 대하여 (0) | 2021.04.06 |
| [코딩 공부_44] self_introduce 만들기_2 (0) | 2021.04.04 |
| [코딩 공부_43] transform - translate, scale, skew, rotate? (0) | 2021.04.02 |
| [코딩 공부_42] self-introduce 만들기_1 (0) | 2021.04.01 |
댓글