CSS Text Effects That You May Not Know
By Dustin Brewer
Expert Author
Article Date: 2008-01-03
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.
Comments
About the Author:
Dustin Brewer is a web designer located in Oklahoma City, OK specializing in aesthetics in design, web standards, accessibility and usability. He also enjoys helping others to discover CSS and web design best practices through his web site, dustin brewer, a web design news site.
|
|
| Tips for creating
sites |
Creating a professional site is the most
important thing for businesses. Having the look and feel of a corporate site can
make your potential just as high as a corporate website
Click here for more
design tips and help for creating professional sites |
|
Develop Your Skills |
Graphics play a major role in website development
and deployment. By sharpening your skills you can help your website earn more
income.
Get more info on graphics |
|
|
|
