Website Editing Support: (888) 932-9966 (8am-5pm EST)

24/7 Email or Domain Support: (480) 624-2500

Support Articles  >  CuBit Tutorials & Articles

CuBit Tutorial 31 - Working with Heading Tags and adding Shadows & Glows to Your Text

Share:

Sometimes text (when just pasted in or written) can visually seem boring. So we have come up with a way to help you enhance your lettering without having to learn an expensive and complicated graphic design program to add drop shadows or special effects to your text. Aside from the fact that you're not having to insert images to get these effects you're also able to maintain the text value for the message you're trying to enhance (your website will have more actual highlightable text instead of an image of that text) which will really benefit you in the long run with regards to search engine optimization.

The title above has nothing applied to it, it's just a simple typed out text set to "24pt" with a font family of "Trebuchet".

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

The title above is the same exact text but has a "Heading 2" setting applied to it and looks much more custom and all with a simple dropdown choice. Each one of our themes (or templates) have a unique font and shadow setting applied to all the different Headings so you can choose different Headings for different font shadows and styles and colors.

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Setting your own custom Shadows and Glows:

You can of course also set your own shadows and colors. Below we have inserted some text that you can simply copy and paste into your website to get the shadow you want. These text examples are plain text with just the shadow effect added. You can still change the font style, color and size as usual.

Short Shadow Medium Shadow Large Shadow
Heavy Shadow
Dark Short Shadow
Dark Medium Shadow Dark Large Shadow Dark Heavy Shadow
Short Glow Medium Glow Large Glow Heavy Glow
Short Yellow Glow Medium Yellow Glow Large Yellow Glow Heavy Yellow Glow

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Now, let's see this in action...

This is just a sample paragraph with some Shadow Enhancements to bring attention to specific words in the message that you want your reader to notice. It's really easy to do, all you do is copy and paste, you don't have to learn HTML or CSS to do it. A good implementation of the shadow or glow effect is in either titles or links or even little words here and there. This is an Implementation of how an enhanced word looks with the shadow, bold and a custom color set to it.

It's obviously possible to put a shadow on an entire Paragraph, but it's NEVER a good idea. It really look bad, see below for an example of a poorly implemented shadow effect.

 

BAD IDEA, Don't do this because people do not like reading a lot of 3D text...
(no matter how tempted you are!)

This is an example of a really bad idea. We do NOT recommend doing this because it makes your visitor really irritated at trying to read the message and result in an exit from your visitor, not a good thing! This is an example of a really bad idea. We do NOT recommend doing this because it makes your visitor really irritated at trying to read the message and result in an exit from your visitor, not a good thing! This is an example of a really bad idea. We do NOT recommend doing this because it makes your visitor really irritated at trying to read the message and result in an exit from your visitor, not a good thing! This is an example of a really bad idea. We do NOT recommend doing this because it makes your visitor really irritated at trying to read the message and result in an exit from your visitor, not a good thing!

That's all for today, remember... DO try this at home!

 If this was helpful, please let us know!   Click Here to drop us a quick note.   :)