Menu
I have a nice background on my page, and I want my text header to act as a mask to cut through its containing div and have the background as a texture.
Can I do this in CSS or do I have to open up Photoshop?
601
On the Insert tab, in the Text group, click WordArt, click the style of text you want, and then type your text. Click the outside edge of the WordArt to select it, drag the text over your photo and then, if you want, rotate the text to the angle that works best for your photo.
Limited browser support, but background-clip can get you this effect: http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/ (Hit the Animate buttons for more fun)
Using SVG you can do it like this: http://people.opera.com/dstorey/images/newyorkmaskexample.svg (View source to see what is actually done, see reference article too)
Using a background image and then CSS, you could do this: http://www.netmagazine.com/tutorials/texturise-web-type-css
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
