In this video post, you’ll learn how to use CSS to add transparent headings with a colored outline for your website. Let’s dive right in.
Welcome back to the screencast peeps, let’s get started.
One of my favorite elements on a webpage is the headings. With a little creativity, you can really make your website headings pop out using some simple CSS.
Not only do creative headings look great but they can be really useful for boosting conversions.
First of all, I’m doing this all inside of Oxygen Builder since this is the plugin that I use for building WordPress websites. However, you do not need to own Oxygen to make this work on your website.
Whichever theme you’re using, you can simply add your own CSS by finding the dedicated CSS sandbox (if your theme comes with one). Or you can go to Appearance > Customize > Additional CSS.
Just remember to save any changes, and clear the cache if you’re using a WordPress caching plugin like Super Cache.
Right then, let’s get started.
Below you’ll find the video tutorial for this little hack. In addition, I’ve included the CSS snippet that you can copy and paste into your website. Feel free to tweak the code any way you wish.
CSS Code Snippet
Below is the CSS you need to make this work. Don’t forget to give your heading element a custom class name. I’ve simply used the class .heading-outline in the tutorial.
.outline-heading {
font-weight: 900;
line-height: 1em;
color: transparent;
-webkit-text-stroke: 1px #ffffff;
}That’s it. Nice and short and I hope you enjoyed this tutorial. Don’t forget to check out more of my WordPress and CSS hacks here.
Web Design Video Course
If you’re interested in learning how to design a beautiful WordPress website like mine, check out my brand new WordPress + Oxygen Builder Web Design Video Course. You can signup here.
Recommended Tutorials