Web Design Blog

Popular Posts

Categories

• blogging
• browser news
• CSS
• design inspiration
• design resources
• design theory
• design tutorial
• designer tools
• firefox
• freelance
• Giveaway
• random design news
• SEO
• site update
• social marketing
• social networking
• twitter
• Uncategorized
• web design links
• web design news
• web standards
• XHTML

CSS text effects you may not know about

Posted on Monday, December 17th, 2007 under CSS, web design news, web standards by Dustin Brewer.

There are a lot of different ways to display text using CSS, some of them are rather straight forward. Like assigning a color or setting the font size of your text. However, there are several text effects that you may not know about that can manipulate more then just the color or font size of the text. You can literally transform the text using various CSS rules. I’m going to show you a few that I think are kind of cool, some are handy and others are nearly useless in design. But they are all there and available to use, and I’m going to show you how.

The CSS text-transform command

When you are using the CSS text-transform command you can do anything from making all of your text uppercase, lowercase to capitalizing the first letter of each word. It seems simple but there are times when it is needed to make all of your text capital for navigation or headers. It all depends on the way you or the designer comp’d out the initial design. Capitals aren’t always a bad thing when used in certain situations.

The text-transform command is just like any other CSS command when it is being used and can really benefit you when it comes to controlling how your site works. You can easily force all navigation to be uppercase, or if you are making a content management system and want to ensure that all your section names are named with a capital letter even if your user didn’t assign it that way— you can do that too.

#nav li {text-transform: uppercase;}

Using the font-variant command in CSS

The font-variant command doesn’t have nearly as many options as text-transform but it still has a pretty cool ability. You can use small caps in CSS by using this command. It is pretty cool and straight forward, it does look a little funny on some fonts though. You really need to find the right font size and typeset for this to work on a design but it is a pretty cool ability to have when you need it.

#nav li {font-variant: smallcaps;}

Now the stupid CSS tricks that are basically useless

You can also add a shadow to your text but just like the 1990s era design it is probably a bad idea to use this. It is available for you to mess around with though.

.shadowy {text-shadow: #fff;}

The oh so famous Shadow text.

.blink {text-decoration: blink;}

You can also use the all familiar blinking text. My favorite.

Why are we still using 1990s era code for modern sites?

This is a question that a lot of people have been asking lately. All of these style elements remind of us of how old CSS really is, they all display quite well some of the horrible ideas that were included in CSS. Not only do we not have a way within CSS to make columns without manipulating divs with floats but we can make out text blink or embossed.

There have been a lot of articles around lately about the CSS Unworking Group and why the W3C can’t save us. I think it is time for change, it is time for us to move forward with technology on the web. I think we’re ready.

One Response to “CSS text effects you may not know about”

1. sunnysunglohia says:

   August 2, 2009 at 11:14 am

   I found your blog on google and I really like your design. I just Bookmark your Blog to see your latest design. Keep up the good work. Look forward see more of your design in the future.
   Btw Website Design Middlesex
   Really need some good web designers like you. Thanks

   Reply