New in CSS3: background-clip: text

While webmasters are arguing about browsers and standards , WebKit is busy :) This week, CSS3 developers introduced a new property called background-clip: text , which allows you to overlay any background / image on text, borders, and even shadow, without overlapping them. and implementing something similar to the mask overlay function in Photoshop.

The code looks like this:




Hello, world!


Result:

Pretty, isn't it? :) Surely, soon users of Safari and FireFox will be able to apply this property.

A few more screenshots of the application of the new property can be found here:
- text with a shadow
- text with a stroke
- text with underline

Source

Cross-post Blog for webmasters