소개
블랜드는 이미지와 이미지를 혼합해서 새로운 이미지를 만들어내는 기법입니다.
background-blend-mode
배경 그래픽 간의 블랜드 효과
예제 - blend_1.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!doctype html><html> <head> <style> .blend{ height:400px; border:5px solid; background-color: rgba(255,0,0,0.5); background-size:cover; background-image:url('sample.mt.jpg'); background-blend-mode: saturation; transition:background-color 10s; } .blend:hover{ background-color: rgba(255,0,0,1); transition:background-color 5s; } </style> </head> <body> <div class="blend"> </div> </body></html> |
mix-blend-mode
컨텐트와 배경 사이의 블랜드 효과
예제 - blend_2.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!doctype html><html> <head> <style> body{ background-image: url(sample.mt.jpg); } .blend{ font-size:2rem; font-weight: bold; color:red; mix-blend-mode:screen; } </style> </head> <body> <div class="blend"> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, maiores!</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quam quibusdam cupiditate, necessitatibus ratione illum asperiores sint voluptate vel ex esse vero culpa. Totam aliquam minus eum sequi commodi vitae numquam officia placeat repellat, alias dignissimos. Commodi optio ipsam illum culpa voluptatum, obcaecati veritatis rem similique molestiae fugit autem, animi. </div> </body></html> |
참고
아직 CSS에서 블랜드는 최신 기능이기 때문에 CSS 블랜드로 할 수 있는 일에 대한 논의가 풍부하지 않습니다. 포토샵 블랜드로 검색해보면 다양한 사례를 찾아볼 수 있을 것입니다.
또 codepen.io를 통해서도 블랜드를 활용한 사례를 볼 수 있습니다.
블랜드는 최신 기능이기 때문에 일부 브라우저에서는 동작하지 않을 수 있습니다. 이에 대한 통계는 caniuse를 참고해주세요.
