지금까지 이미지에 효과를 적용하기 위해서는 포토샵으로 효과를 적용한 다음 저장하여 이미지를 사용했다.
하지만, filter()라는 속성을 활용해 css문서에서 적용해 볼 수 있게 되었다.
아래 속성값 중에서 선택하여 작성한 코드는 아래를 참고한다.
CSS 속성 Syntax
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
See the Pen xxGYwvO by LimsUIUX (@LimsUIUX) on CodePen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>이미지 및 background관련속성-3</title>
<style>
#wrap{
width:850px;
height:3000px;
overflow: hidden;
}
ul>li{
list-style:none;
float: left;
margin:0 10px;
text-align: center;
color:#fff;
}
img{
width:120px;
display:inline-block;
border:10px solid #ff73e1;
}
.filter1>img{filter:blur(5px);}
.filter2>img{filter:brightness(200%);}
.filter3>img{filter:contrast(200%);}
.filter4>img{filter:drop-shadow(5px 5px 5px #000);}
.filter5>img{filter:grayscale(70%);}
</style>
</head>
<body>
<h1>이미지처리의 업그레이드 속성들</h1>
<ul>
<li>filer : 이미지의 이펙트 효과를 적용</li>
<li>blend-mode : 두개 이상 겹쳐진 배경이미지 간의 합성효과</li>
<li>clip : 배경 색의 속성을 설정</li>
<li>origin : 배경 이미지의 속성을 설정</li>
<li>gradient</li>
</ul>
<div id="wrap">
<h2>★ filter ★</h2>
<ul>
<li class="filter1"><img src="img/1.jpg" alt=""></li>
<li class="filter2"><img src="img/1.jpg" alt=""></li>
<li class="filter3"><img src="img/1.jpg" alt=""></li>
<li class="filter4"><img src="img/1.jpg" alt=""></li>
<li class="filter5"><img src="img/1.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
'UIUX Web Standard > COA Lab's CSS' 카테고리의 다른 글
| background 속성 5 - clip (0) | 2021.01.25 |
|---|---|
| background속성 4 - blend-mode (0) | 2021.01.25 |
| background 속성 3 - gradient (0) | 2021.01.25 |
| background속성 2 - attachment (0) | 2021.01.25 |
| background 속성 1 - 기본 (0) | 2021.01.25 |
