Zenland

Responsive one pager for 'Zenland' landing page builder with some custom colorful icons. The signup link seems broken for...

Techniques for Creating Textured Text

View demo Download source In this article we’re going to explore several techniques that can be used to create textured text or apply a background to text. Please remember that some of the techniques covered in the article are experimental with very low browser support, and may not be the best technique to use when you’re building real projects that need wide browser support. I’ve included a screenshot for each demo, the link to the demo in the end of each technique. You can also click the screenshot to see the respective demo. Applying an Image Background to Text Using -webkit-background-clip: text We’re going to start with the CSS background-clip property and use it to get the following result: The CSS background-clip property determines an element’s background painting area, which is the area within which the background is painted. By default, the background extends all the way to the border of an element with a default value of border-box, and it can take other values like padding-box and content-box, which are self-explanatory. Different effects, such as giving an element transparent borders, can be created using this property, and it is pretty well supported in all modern browsers. The background-clip property was extended in Webkit with a fourth value, text, which causes the background image to clip to foreground text (including decorations and shadows). Then, by giving the text a transparent color using the Webkit-only property -webkit-text-fill-color, the background image will show through the text, thus completing the clipping effect. The text value of the background-clip property is, at the time of writing of this article, not part of any...