✨사진에 다양한 필터 적용하기✨
안녕하세요. 오늘은 vscode로 html/css 만을 이용해서 사진에 필터를 적용하는 법을 배워봐요. 대각선, 흐림, 회색조, 세피아 네 가지로 연출해보는 다양한 사진 꾸미기!! 지금부터 시작해 볼까요
📌 1. 대각선을 활용한 빗금무늬 필터
사진에 대각선 필터를 적용해주면, 아날로그 느낌을 연출 할 수 있습니다. 또 카피라이팅 할 때 문구를 배치하기 위한 배경으로 사용하기도 좋아요. 가상요소인 ::before로 대각선을 만들고, 사진 위에 포갠 디자인입니다.
☑️ HTML 코드
<div class="pic">
<img src="Images/pic03.png" alt="">
</div>☑️ CSS 코드
<style>
.pic {
position: absolute;
}
.pic img {
display: block; /* 이미지에 있는 불필요한 여백 처리 */
}
.pic::before {
content:'';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: repeating-linear-gradient(
-45deg, /* 선 45도 회전 */
rgba(130, 51, 27, 0.6) 0px, rgba(201 72 31 / .6) 1px, /* 반투명 선 생성*/
rgba(0 0 0 / 0) 0%, rgba(0 0 0 / 0) 50% /* 선 사이의 투명한 여백 부분 설정 */
);
background-size: 7px 7px;
}
</style>
📌 2. 도트 필터
점 무늬 필터로 화질이 낮은 사진에도 재미있는 효과를 줄 수 있어요.
☑️ HTML 코드
<div class="pic">
<img src="Images/pic13-3.jpg" alt="">
</div>☑️ CSS 코드
<style>
.pic {
position: absolute;
}
.pic img {
display: block;
}
.pic::before {
content:'';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-image:
radial-gradient(rgba(197, 137, 119, 0.6) 30%, rgba(209, 168, 168, 0) 31%);
background-size: 4px 6px;
background-position: 0px 0px 3px 3px;
}
</style>
📌 3. 흑백사진 만들기(grayscale)
grayscale 프로퍼티로 사진을 회색조로 만들어 분위기 있게 연출해줄 수 있어요.
☑️ HTML 코드
<body>
<img src="Images/pic11.png" alt="">
</body>☑️ CSS 코드
<style>
img {
filter: grayscale(100%);
}
</style>
📌 4. 사진을 갈색조로 만들기(sepia)
sepia 필터를 쓰면 사진을 갈색조로 만들 수 있어요. 빛 바랜 사진처럼 무드있는 연출이 가능합니다. () 소괄호 안의 값을 변경하면 갈색조의 정도를 변경 할 수도 있어요.
☑️ HTML 코드
<body>
<img src="Images/pic11.png" alt="">
</body>☑️ CSS 코드
<style>
img {
filter: sepia(70%);
}
</style>
📌 5. 사진을 블러 처리하기(blur)
사진을 흐릿하게 만드는 코드입니다. blur()의 소괄호 안의 값을 높여주면 사진이 더 흐릿하게 변해요.
☑️ HTML 코드
<body>
<img src="Images/pic11.png" alt="">
</body>☑️ CSS 코드
<style>
img {
filter: blur(1px);
}
</style>
어떠셨나요? 많은 도움이 되셨나요? 궁금하신 점은 댓글에 남겨주시고 좋아요 눌러주세요.
'html&css' 카테고리의 다른 글
| [Image Design] 다양한 모양으로 사진 형태 수정하기(Fancy Border Radius Generator) (2) | 2024.04.07 |
|---|---|
| [Logo Design] 사진에 로고 넣기, 글씨를 사진으로 채우기 (0) | 2024.04.07 |
| [Image Design] 사진에 프레임 추가하기, 액자처럼 꾸미기 (0) | 2024.04.07 |
| [html/css] 가상요소 ::before, ::after 쉽게 이해하기 (1) | 2024.04.07 |
| [Image Design] 사진에 음영 추가하기 (1) | 2024.04.07 |
