Пока вебмастера спорят о браузерах и стандартах, WebKit занимается делом :) На этой неделе разработчики CSS3 представили новое свойство, названное background-clip:text, которое позволяет наложить любой фон/изображение на текст, границы и даже тень, при этом не перекрывая их, а реализуя нечто похожее на функцию наложения "маски" в Photoshop.

Код выглядит так:

<style>
div {
background: url(green-background.png), black;
border:5px solid black;
padding:5px;
-webkit-background-clip: text, border;
color: transparent;
}
</style>
<div>
Hello, world! <!--This background clips to the text.-->
</div>

Результат:

Симпатично, неправда ли? :) Наверняка, скоро пользователи Safari и FireFox смогут применить это свойство.

Еще несколько скриншотов применения нового свойства можно посмотреть здесь:
- текст с тенью
- текст с обводкой
- текст с подчеркиваением

Источник