| Recent
Articles |
Don't Get Banned For Paid Links!
Google has officially announced that selling links is a linking scheme and outlines what is considered bad for your site and what is considered acceptable when it comes to advertising on your blog. They added...
The Complete Guide To Using Words Correctly On...
When optimizing your website, it is generally expected that your pages need to have certain keyword density to be ranked with the search engines. While it is a good idea to have at least one keyword on the page...
Usability Tips For Login And My Account Pages
Sites that require users to log in to access certain information and/or purchase products add an additional layer of potential complication to the usability process. To avoid potential visitor confusion and the...
Links Range from Good to Bad to Ugly
As a site owner, it’s important to devote what link building time you have to creating connections that count – really count – as far as search engine spiders...
Duplicate Content Due To URL Parameters
It is true that URL parameters, like session IDs or tracking Ids, can be the reason behind duplicate content. This was revealed by Google itself. Google..
Let The Domain Drive
Domainers have been enjoying some additional attention these days, and that extends to a session at SES San Jose 2007 where they discussed tips the power of the domain address bar. (Our on-scene...
Design Your Way To Higher Conversions
During the design phase of building a website all too often we find that the end result is really nothing more than what somebody decided "looked good".
|
|
|
01.03.08
CSS Text Effects That You May Not Know
 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.
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.
|
