이번 포스트에서는 여러 색상과 이미지를 감각적으로 혼합하여 웹사이트의 시각적 완성도를 극대화해 주는 블렌드 모드Blend Mode 속성들을 정리해 보겠다.
이전 포스트
CSS 이미지 필터 효과: filter 속성과 transition으로 부드러운 애니메이션 만들기
생활코딩 CSS 수업 영상: blend (소개)
blend는 시각 효과를 준다는 점은 이전 포스트에서 다룬 'filter'와 비슷하지만, 작동 원리는 완전히 다른 주제다.
filter는 요소 하나에 특수 효과를 입히는 것이지만, blend는 두 가지 이상의 색상이나 이미지가 겹칠 때, 서로 어떻게 '혼합'될지 결정하는 것이다.
생활코딩 CSS 수업 영상: blend (background-blend-mode)
CSS 색상 지정 방법 Color Name, HEX, RGB의 차이점과 투명도(RGBA vs Opacity) 비교
영상 속에서 중간에 rgba( )에 대해서 설명하는데, 전에 작성한 이 포스트에서 자세히 설명했었다.
CSS 가상 클래스 선택자
.blend:hover는 가상 클래스 선택자다.
그건 이 포스트에서 다뤘었다.
<!DOCTYPE html>
<html>
<head>
<style>
.blend {
height: 567px;
border: 5px solid;
background-color: green;
background-image: url('The_Holly_Fairy.jpg');
background-blend-mode: exclusion;
transition: background-color 1s;
}
.blend:hover {
background-color: purple;
transition: background-color 0.3s;
}
</style>
</head>
<body>
<div class="blend"></div>
</body>
</html>수업 영상 속의 CSS 코드를 약간 바꿨다.
사용된 속성들은 동일하다.
이 코드 안에서 blend와 관련된 코드들을 살펴보겠다.
background-color: green;: 기본 배경색은 초록색이다.background-image: url('...');: 그 위에 이미지를 겹친다.background-blend-mode: exclusion;: 초록색 바탕과 이미지가 서로 제외Exclusion 방식으로 혼합된다. Exclusion은 대비가 낮은 색상은 어둡게, 대비가 높은 부분은 반전된 색상처럼 표현되어 몽환적이고 독특한 분위기를 연출한다.background-color: purple;: 가상 클래스 선택자(:hover)로 인해 마우스를 올리면 배경색이 초록에서 보라로 바뀐다.
background-blend-mode 속성에 사용할 수 있는 값에는 color, color-burn, color-dodge, darken, screen, difference, exclusion, hard-light, hue 등 다양하게 있다.
생활코딩 CSS 수업 영상: blend (mix-blend-mode)
영상의 길이는 길지만, 실제 수업은 6분 정도로 끝난다.
이전 영상에서 다룬 background-blend-mode는 배경 이미지와 배경색을 섞는 블렌드 모드였고, 이 영상에서 소개하는 mix-blend-mode는 배경 이미지와 요소(글자)를 혼합하는 블렌드 모드다.
넣을 수 있는 값에는 마찬가지로 color, color-burn, color-dodge, darken, screen, difference, exclusion, hard-light, hue 등이 있다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('The_Holly_Fairy.jpg');
}
.blend {
font-size: 2rem;
font-weight: bold;
color: red;
mix-blend-mode: color-burn;
}
</style>
</head>
<body>
<div class="blend">
<h1>Blend is awesome!</h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente expedita molestiae, aliquam quo beatae neque ducimus reprehenderit quasi voluptatum sed, hic odit architecto nemo dolore id, corrupti quam numquam ipsam aperiam quisquam natus vero at. Perspiciatis ut fugiat totam animi commodi reiciendis inventore, nostrum quasi, eligendi deleniti architecto quaerat doloremque! Asperiores, praesentium? Nulla maxime harum blanditiis ipsam voluptatem iusto molestias earum non sunt reprehenderit explicabo fuga vitae consectetur quae id omnis, neque deleniti reiciendis accusantium sed. Nam quibusdam laudantium ipsum dolorum alias saepe quia veritatis similique et impedit, ipsam cum non? Natus recusandae quasi pariatur ab necessitatibus totam dolor possimus.
</div>
</body>
</html>color: red;: 글자의 기본 색상은 빨간색이다.mix-blend-mode: color-burn;: 컬러 번Color Burn 모드를 적용한다. Color Burn 효과는 배경색을 어둡게 만들어 혼합색(빨간색)을 반영한다. 결과적으로 글자가 배경 이미지에 자연스럽게 타들어 간 듯한 느낌이나, 도장을 찍은 듯한 진하고 어두운 붉은 톤으로 배경과 합쳐지게 된다.
CSS 블렌드 모드는 정적인 이미지를 훨씬 역동적이고 예술적으로 만들어주는 마법 같은 도구다.
프로젝트에 이 몽환적인 효과들을 직접 적용해 보며 나만의 독특한 스타일을 완성해 보는 것도 좋을 것 같다.
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊
지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
0 Comments
댓글 쓰기
🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩