CSS Tips & Tricks

February 8, 2012
Designers
LinkedInTwitterFacebookEmail

CSS is awesome. There’s no disputing that. But along the CSS yellow brick road, you’re bound to come across conundrums that will bug the living daylights out of you. If you’re like me, your tendency is to substitute depreciated HTML tags just to make it work. You’ve got deadlines and bills and well, things to do!

So, I present CSS Tips & Tricks: the “I-really-should-learn-the-right-way-to-do-this” article.

Center the Page

In CSS, if you make both the left and the right margin equal to “auto”, it will align itself automagically.

1
2
3
#wrap { margin: 5px auto; }
.outline { margin-left: auto; margin-right:auto; }
#DivID { margin: 2px auto 3px auto; }

Above are three different ways of achieving the same thing: Centering the page.

Short-Hand for Borders / Backgrounds

Adding borders/backgrounds to CSS can end up being very long-winded…unless you know the shortcuts.

For borders, you need three items (in any order): the width of the border (1px) the color (#9c9c9c) and type of line (solid). Put a space between each of those items, and you’ve got nice concise CSS.

1
#DivId { border: 1px #9c9c9c solid; }

Border-Radius

Rounded borders have been a web developer’s nightmare for far too long. We’ve (almost) got a nice easy way of creating them. This should work in all the major browsers, including IE9. Be aware that you still need to use both lines to get the radius to work in all the major browsers.

1
2
-moz-border-radius: 15px;
border-radius: 15px;

Adding Shading

Shading is another awesome feature of CSS. It used to be that you HAD to use an image if you wanted any shading. But with CSS3, we’re finally able to start applying gradients. Unfortunately, we still need three different ways to make sure all major browsers display it correctly, but hey, that’s way better then it was!

1
2
3
background: -webkit-gradient(linear, left top, left bottom, from(#3F3F3F), to(#161616));
background: -moz-linear-gradient(top, #3F3F3F, #161616);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3F3F3F', endColorstr='#161616');

Hover Effects

Hover effects is one of the ways CSS has broken into JavaScript territory. You can use it quite easily by adding “:hover” to most items.

1
2
#div { color:#000; }
#div:hover { color:#fff; }

So now, when the mouse moves over that div, the color of the font will change to white. Note, however, that just adding “:hover” to something won’t make the cursor change to pointer. You must actually add that to the div.

1
#div:hover { color:#fff; cursor:pointer }

Join the Discussion

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

1 Trackback