WebKit의 CSS 마스크

2008.04.28 00:09 from [IT] Web Tech
CSS Mask 샘플

CSS Mask 샘플


WebKit 에서 CSS 마스크를 지원한다고 합니다. 이 속성은 이미지는 몰론, <video> 엘리먼트에도 적용이 가능합니다.

WebKit 이 CSS에서의 알파 마스크를 지원하게 되었습니다. 마스크를 이용하면 최종 화면에서 어떤 부분을 제외하는 데 사용하는 패턴을 컨텐트 위에 겹칠 수 있습니다. 다시 말해, 어떤 이미지의 알파를 이용해 복잡한 모양으로 자를 수도 있습니다.

이런 속성들을 사용할 수 있습니다:

-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-clip (background-clip)
-webkit-mask-origin (background-origin)
-webkit-mask-image (background-image)
-webkit-mask-repeat (background-repeat)
-webkit-mask-composite (background-composite)
-webkit-mask-box-image (border-image)

이 글 상단에 있는 이미지는 이렇게 만들 수 있습니다:
[code:Xml]
<img src=”kate.png” style=”-webkit-mask-box-image: url(mask.png) 75 stretch;”/>

좀 더 둥근 모서리를 사용할 수도 있습니다:
[code:Xml]
<img src=”kate.png”style=”-webkit-border-radius:10px; -webkit-mask-image:
-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1), to(rgba(0,0,0,0))”/>

이미지 입력을 SVG로 할 수도 있습니다:
[code:Xml]
<img src=”kate.png” style=”-webkit-mask-image: url(circle.svg)”/>

from WebKit keeps going with CSS Masks on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0