Feature
Post

Category
Code, Design

Published Thursday April 29, 2010 at 2:31 pm
By Darice de Cuba

10 Awesome CSS3 Techniques to Improve Your Designs

CSS3 Is together with Canvas one of the more exciting elements of web design. With this post we want to showcase some awesome techniques to improve your design with the help of CSS3.

Custom Fonts With @font-face

 

Go beyond the standard web safe fonts Arial, Helvetica, Verdana and Georgia and start
using beautiful typography to enchant your design. @font-face is supported in all web browser if implemented correctly. An example of @font-face supporting Internet Explorer, Safari, Chrome and Firefox:

Sample Code

PLAIN TEXT
CSS:
  1. @font-face { font-family: 'Museo';
  2.  src: url('fonts/Museo.eot');
  3.  src: local('Museo'), local('Museo'),
  4.  url('fonts/Museo.ttf') format('truetype'); }

Read all the details about using @font-face here at Devlounge, find web fonts with @font-face or read Becoming a Font Embedding Master by Jonathan Snook.

Get started right away with Hundreds of @font-face Font Kits at Font Squirrel, ready to use.

Drop Caps

Now that you know how to implement fonts on your website you can go a step farther and use drop caps for more typography effect.

Mark Boultons website is a stellar example of drop cap use.

Drop Caps

While the most common CSS3 way is to use

Sample Code

PLAIN TEXT
CSS:
  1. p:first-child:first-letter {}

Boulton uses CSS3 attribute selector combined with image sprites technique. He chooses this way due that the caps are images and not a font.

Boultons way:

Sample Code

PLAIN TEXT
CSS:
  1. div.post span.cap[title="F"] {
  2.  padding: 40px 95px 40px 0;
  3.  margin: 0 10px 0 0;
  4.  background-position: -456px -10px;
  5.  }

The more simple way is with fonts as shown on Drop Caps the cross browser way

The RGBA Color Method

With RGBA you use the the amount of red, amount of green, amount of blue, and the level of opacity. Instead of using a hex (#) code. The RGBA method is used often in many CSS3 buttons effect. RGBA is one of the most easiest CSS3 properties as it's juts a matter of checking in Photoshop or your design app of choice what the color codes are.

RGBA transparency is much better then the opacity property. When applying opacity to a div box it will be applied to everything contained in the div, may it be text or image. While RGBA transparency is only applied to the div it's assigned too and not to its content.

css rgba

Sample Code

PLAIN TEXT
CSS:
  1. h1 {
  2.  color: #000;
  3.  background-color: rgba(255, 255, 255, 0.5); }

Source: Working with RGBA colour

Learn how to apply RGBA in tables to create multi-colored rows and columns to enchant your data tables with Coloring Columns and Rows on Tables with CSS3 and RGBA.

RGBA colored tables

CSS Gradients

This is one of the more complicated CSS3 techniques, especially for web-kit browsers the code can get really intricate, while for Mozilla browsers it is pretty simple after looking at web-kits version.

CSS Gradient

Sample Code

PLAIN TEXT
CSS:
  1. -moz-box-shadow: 0 10px 16px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad;
  2.  -webkit-box-shadow: 0 10px 16px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad;

It's imperative to know how to use gradients so you can improve your CSS only buttons. The next item on the list relies heavily on precise use of gradients to get the best effect.

Source: Cross-Browser CSS Gradient

Google Style Buttons

They are neutral, uniform and fit for most designs, now with gradient support for Firefox.

CSS Google Button

Sample Code

PLAIN TEXT
CSS:
  1. .buttons {
  2.  padding: 3px 3px;
  3.  -webkit-border-radius: 2px 2px;
  4.  -moz-border-radius: 2px 2px;
  5.  border: solid 1px rgb(153, 153, 153);
  6.  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(221, 221, 221)));
  7.  background: -moz-linear-gradient(-90deg,#FFF,#DDD);
  8.  color: #333;
  9.  text-decoration: none;
  10.  cursor: pointer;
  11.  display: inline-block;
  12.  text-align: center;
  13.  text-shadow: 0px 1px 1px rgba(255,255,255,1);
  14.  line-height: 1;
  15.  }
  16.  
  17. .buttons:hover { border-color: #666; }
  18.  .buttons:active { margin-top: 1px; }

Original code can be found at Roll your own Google Buttons.

Another great button effect using only CSS3, the aqua button.
CSS Aqua Button

Sample Code

PLAIN TEXT
CSS:
  1. input[type=button].new-aqua {
  2.  width: 155px;
  3.  height: 35px;
  4.  background: #cde;
  5.  border: 2px solid #ccc;
  6.  border-color: #8ba2c1 #5890bf #4f93ca #768fa5;
  7.  font: 600 16px/1 Lucida Sans, Verdana, sans-serif;
  8.  color: #fff;
  9.  text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
  10.  text-align: center;
  11.  vertical-align: middle;
  12.  white-space: nowrap;
  13.  text-overflow: ellipsis;
  14.  overflow: hidden;
  15.  border-radius: 16px; -moz-border-radius: 16px; -webkit-border-radius: 16px;
  16.  box-shadow: 0 10px 16px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad;
  17.  -moz-box-shadow: 0 10px 16px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad;
  18.  -webkit-box-shadow: 0 10px 16px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad;
  19.  }
  20.  .new-aqua:hover {
  21.  text-shadow: rgb(255, 255, 255) 0px 0px 5px;
  22.  }

Source: CSS3 Box-Shadow with Inset Values – The Aqua Button ReReVisited

Text Shadow

If used correctly it can add a lot to your design but it can also easily make your text look like some cheap Word document. Text-shadow is not supported by Internet Explorer so use carefully.

A great example of text-shadow is the Letterpress Effect

CSS letterpress effect

Sample Code

PLAIN TEXT
CSS:
  1. h2 {
  2.  color: #222; text-shadow: 0px 2px 3px #555;
  3.  }

Or roll your own with this awesome tool.

Border Radius

One of the best CSS3 properties yet, removing the need of countless images and divs to create rounded corners, now it's a simple matter of a few CSS lines.

Sample Code

PLAIN TEXT
CSS:
  1. #box { -webkit-border-radius: 10px; }
  2.  #box { -moz-border-radius: 10px; }

The above code gives you a rounded corner div in Firefox, Safari and Chrome, that simple it is.

CSS border radius

Source: Learn all about the different implementations of border radius.

Box Shadow

CSS box shadow
I have found box-shadow most useful for images, for years already it has been popular to style your images with white padding and a gray border, while for the shadow effect several images where needed. Now you can easily add shadows with CSS.

Instead of using it as hover effect you can just use it on the image. You can almost never go wrong with this CSS style for images on your website.

Sampe Code

PLAIN TEXT
CSS:
  1. .imagedropshadow {
  2.  padding: 5px;
  3.  border: solid 1px #EFEFEF;
  4.  border: solid 1px #CCC;
  5.  -moz-box-shadow: 1px 1px 5px #999;
  6.  -webkit-box-shadow: 1px 1px 5px #999;
  7.  box-shadow: 1px 1px 5px #999;
  8.  }

CSS3 box-shadow and image hover effects

Bonus tip

Here you can find an IE-CSS3 script to add CSS3 support for the most popular CSS3 techniques in Internet Explorer.


 

Did you like this post? Then please consider subscribing!

Tags

, , ,

Share and Love

Submit post to: Reddit, StumbleUpon, Digg, Del.icio.us or Blogosphere News

Related Reading

  1. By George Kulick - Web Design posted on April 29, 2010 at 6:30 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I really liked the ie compatibility part of “Custom Fonts With @font-face” Thanks for the info.

    George

  2. By colin posted on April 29, 2010 at 7:06 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    The RGBA code example doesn’t actually include “RGBA”. instead it just has a css value for “RGB”…

  3. By AEXT.NET MAGAZINE posted on April 29, 2010 at 11:36 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Great tips. Thanks for sharing!

  4. By Lorraine Nepomuceno posted on April 30, 2010 at 1:21 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Great post, Darice! I’m currently enamored by the Letterpress effect.

  5. By Darice de Cuba posted on April 30, 2010 at 6:42 am
    Want an avatar? Get a gravatar! • You can link to this comment

    @colin thanks for pointing it out, I have fixed the code now.

    @Lorraine I love it too, I use it in a more subtle form on some of my websites.

  6. By Captain Obvious posted on May 4, 2010 at 3:13 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Why are are the examples flat images instead of actual css3 samples?

  7. By wpBlast posted on May 5, 2010 at 5:47 am
    Want an avatar? Get a gravatar! • You can link to this comment

    These are some great new effects. I’m going to try to implement some of these on my sites soon. I really like the text shadow effect.

    Nice post

  8. By Sam Milne posted on May 10, 2010 at 3:00 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Its going to be great not haveing to use images to achieve rounded corners and drop shaddows, is css3 now accepted across all the major browsers?

  9. Trackback • 10 Tips for Picking a Wordpress Theme > 10 Tips For