CSS3, the latest and greatest version of CSS, has a lot of potentially wonderful features that aren't widely accepted by all of the browsers. Every developer has to harden their heart against falling in love with a CSS3 feature that's never going to make it to widespread use. And, so, for a long time, I turned my back on a feature I really like — background-clip: text.
Background-clip is a useful CSS3 feature that works in most browsers; it lets you control whether or not a background color or image extends past its element's border. Background-clip: text is a variation that allows you to use a background image as the "fill" for text. So you can do something like this:
A feature like that has major design possibilities, especially for elements like blog titles, post titles, and decorative text. Pretty exciting, right?
For the longest time, there was one very big "but" about background-clip: text — it only works with the vendor prefix -webkit, making it exclusively available to Safari and Chrome browsers. It used to be that if you tried to use it, other browsers would make it look weird at best, and completely illegible at worst. So, I put it in the "can't use" pile and forgot about it.
But then came this post from esteemed developer Divya Manian: "Using background clip for text with CSS fallback". In her post, Divya shares a CSS snippet that sets a solid color fallback for background-clip: text so the text stays legible on incompatible browsers.
Since a reliable & reasonable fallback exists now, I think it's safe to use as a "nice to have" detail. Let me show you how it's done!
Compatibility
The pattern "fill" will only show in the WebKit browsers Safari and Chrome. The CSS we'll use sets a solid fallback color for other browsers. Your readers on WebKit browsers will get to enjoy the cool pattern, and your readers on other browsers will see solid-color text. Everything's legible, everybody's happy!
In the demo image below, the text at the top is as it appears in a WebKit browser. The text at the bottom is as it appears in all other browsers.
Using This CSS
If you're able to add custom CSS to your blog or website, you can use this. Blogger, self-hosted Wordpress, and Typepad Unlimited bloggers are good to go. If you're on Wordpress.com, you'll need the premium Custom CSS option.
This tutorial is a bit more "free form" than the usual here; since you can use this in so many different ways, it's impractical for me to try to give specific usage instructions. So, it helps if you have some experience with CSS. If you already know how to find the class or ID of an element, you'll have no trouble using this. If you're new to CSS, this tutorial has tips to get you started. If you're a developer, scroll back up and read Divya's post instead, it's got everything you need :)
Choose Your Font
The "fatter" your font is, the easier it is to see the pattern. I used Abril Fatface from the Google Web Fonts library for the demo text. If you want to learn more about adding Google Web Fonts to your blog, see this tutorial.
Choose Your Pattern
You can use any type of image as the background, including photos, but this effect has the smoothest appearance if you use a seamless pattern. I used "Waves of Sorrow" from the Colourlovers pattern gallery for all of the examples shown in this tutorial.
To use your pattern, you'll need to upload it to your blog's file hosting. If you're on Blogger, upload the image to the Picasa Web Album for your blog. If you're on Wordpress, upload the image to your media library. Typepad users can upload the image to the File Manager. You can also host your image through Photobucket or another image hosting service. Take note of the direct URL to your pattern image, you'll need that in the CSS.
Find Your Selector
Before you can style your text, you need to know what CSS selector to use to select that text. If you don't know your selector, there are two ways to find it:
- With your browser's developer tools. If you're using Firefox or Chrome, you can use your browser's developer tools to identify the class or ID of your text by right-clicking it and selecting "Inspect Element" from the menu.
- Check your blog's source code. Using your browser's "View Source" option, open up your blog's source code. Find the text you'd like to style, and find its class or ID. The class or ID might be inside your targeted element, or nearby in the code.
Use Sparingly
This opens up a lot of design possibilities, but abuse can lead to illegibility and crimes against good taste. Proceed with caution & decorum, please.
Where to Add the CSS
In Blogger, go to Template > Customize > Advanced > Add CSS. If you're on Typepad, go to Design > Custom CSS. On Wordpress your custom CSS location will vary. If you're using Jetpack's Custom CSS option, it's under Appearance > Edit CSS.
The CSS
Again, the credit for the CSS goes to Divya Manian.
SELECTOR-HERE {
color: FALLBACK TEXT COLOR HERE;
-webkit-text-fill-color: transparent;
background: -webkit-linear-gradient(transparent, transparent),
url(BACKGROUND IMAGE URL HERE) repeat;
background: -o-linear-gradient(transparent, transparent);
-webkit-background-clip: text;
}
Ok, let's break down what you need to do to the CSS to get it working:
- Replace SELECTOR-HERE with the selector for the text you want to style. Remember to use # before IDs, and . before classes.
- Replace FALLBACK TEXT COLOR HERE with the name, hex code, or rgb code of the solid color you'd like to use for non-WebKit browsers. It makes sense to use a color that is close to the main color in your background pattern. That way, readers who visit you from different browser types won't find the difference all that jarring.
- Replace BACKGROUND IMAGE URL HERE with the direct URL to your background image.
