Web Design Blog
Popular Posts
- Fonts on the web and a list of web safe fonts
- CSS Hack:Getting Safari to behave
- Top 10 search engine optimization techniques
- Test IE5 or IE6 on your PC with IE7 installed
- CSS Trick: Target only IE with an if statement
- Top 10 job boards for freelance web designers
- Creating a photo gallery in CSS without tables
- Open source Dreamweaver alternatives
- CSS fix for the double margin float bug in IE6
- Popular fonts with their Mac OSX, Windows and Linux equivalents
Categories
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.
Whats Next?
Leave a Reply
About Dustin Brewer
Dustin Brewer is a freelance web designer based out of Oklahoma City, OK passionate about web standards, and beautiful web design. Dustin Brewer has been in the web design industry for over 8 years through freelance and professional experience. If you are interested in hiring Dustin Brewer please visit the web design services page to find out more information. You can also checkout the web design portfolio.