How to Create a Drinking Straw Text Effect in...

Mega Dropdown

May 28, 2015 Comments (0) Views: 2232 Coding, Tutorials

Easy Cross-Browser Text Masks with Blend Modes

There are many ways to do text clipping masks (the appearance of graphics or effects inside letterforms) on the web, but the techniques are all somewhat scattershot: Chrome and Safari have long supported -webkit-background-clip:text;, but that only addresses two browsers; there is also an SVG technique, but that has limitations also.

After experimenting with blend modes it was possible to use them to create text clipping masks by “sandwiching” text and backgrounds. One nice advantage is the technique is not only fully cross-browser (with the exception of IE), but it’s also naturally progressive, with elegant fallbacks.

Check out this Pen!


View Tutorial

Tags: #, #, #, #, #, #, #, #, #, #, #, #, #

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.