How to Apply CSS3 Effects and Transforms in Dreamweaver
How to Create a Media Query in Dreamweaver
CSS Code Hinting in Dreamweaver

How to Use Safe Text Decoration in CSS3

The only safe text effect in CSS3 is the use of the text-decoration property to define the addition of a characteristic to the font. This property works everywhere, so you don’t need to worry whether someone viewing your page on a television or using a smartphone will get your message. The following list describes the sorts of text decoration you can perform.

  • none: Removes any text decoration that might already be in place.

  • underline: Places a line under the text.

  • overline: Places a line over the top of the text.

  • line-through: Places a line through the text (often used to mark deletions).

  • blink: Causes the text to blink. This particular feature is unsafe. People who have certain physical issues, such as photosensitive epilepsy could have a seizure just from viewing your page.

    Mind you, this effect isn’t limited to those who have photosensitive epilepsy; it’s been documented for other people as well. In fact, the only reason this unit documents this particular feature is to help you avoid it. Blinking text isn’t just annoying; it can have significant nasty side effects.

  • inherit: Uses whatever decoration is employed with the parent element.

It isn’t possible to combine text decoration effects. For example, if you try to combine an underline with an overline, you won’t see either effect onscreen because the browser will be confused. In addition, text decoration effects won’t appear in places where there’s no text.

blog comments powered by Disqus
Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver
Create a New Style Sheet in the CSS Styles Panel
How to Create a Border around an Image in CSS3
How to Style Images and Layers with CSS3
How to Optimize CSS3 Applications with Modernizr