6 Smashingly Practical CSS3 Effects You Can Use Right Now

css3

CSS3 is developing fast, and the most exciting part is seeing all of the intriguing and attractive effects that are being invented to solve real design problems. With the combined creativity of the design community, CSS3 has quickly traveled through the zone of interesting speculation and into the territory of time/resource saving practical everyday use.

Today, we're going to look at 7 impressive, concrete, real-life effects and techniques that you can implement in your next design. This isn't going to be the usual overview of features - these are all specific techniques that will help your design work to be more advanced and effective. Let's dig in!

Drop-down Menu

What designer doesn't have to create a drop-down menu now and then? Despite the usability argument, drop-down menus remain popular and useful. As Nick La has demonstrated in a recent tutorial, this can be accomplished attractively and effectively with nothing more than good markup and some smart CSS. This has been achievable for a while, but the application of some CSS3 features definitely has a nice touch. Here's his markup, slightly modified for display here:

[sourcecode language="xhtml"]

[/sourcecode]

Nothing out of the ordinary. Now here's the CSS with all extraneous 'pretty' styling stripped out and comments added to explain what's going on:

[sourcecode language="css"]
/*style the navigation wrapper*/
#nav {
margin: 0;
padding: 7px 6px 0;
line-height: 100%;
}

/*nav items*/
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}

/* main level link (inside the nav items) */
#nav a {
padding: 8px 20px;
margin: 0;
}

/* dropdown- display items when the menu is hovered on */
#nav li:hover > ul {
display: block;
}

/* level 2 list - where all the action happens*/
#nav ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}

/* level 3+ list - if we have sub-sub-menus, position them off to the right*/
#nav ul ul {
left: 181px;
top: -3px;
}

[/sourcecode]

I'd say this is definitely an awesome setup. It's especially impressive once you add some nice colors, backgrounds, borders and shadows ('pretty' styles). You can check out Nick La's full version of the code with all that included here. An interesting add-on would be to use some CSS3 transitions to animate the menus as they slide down.

> View Full Tutorial on WebdesignerWall

Awesome Buttons

The great folks over at ZURB have figured out how to make some excellent buttons with RGBA and box-shadow, and they've shared their secrets with all of us. Here's how they do it:

[sourcecode language="css"]
.yourselectorhere{

/*color is up to you, overlay png gives button a gradient*/
background: #222 url(/images/alert-overlay.png) repeat-x;

/*set up the layout just right*/
display: inline-block;
padding: 5px 10px 6px;
position: relative;

/*style the cursor and text of the button*/
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
cursor: pointer;

/*add rounded corners in mozilla and webkit*/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

/*Add box shadows and a bottom border with rgba colors*/
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);

}
[/sourcecode]

> View Full Tutorial on ZURB

Speech Bubble

Creating a sleek speech bubble with no images - now that's pretty neat. It works by using a couple spacer elements and the border-radius property to create two contrasting curves that go together to form a speech bubble shape. Here's the markup:

[sourcecode language=html]

Got something to say?

[/sourcecode]

Now here's the CSS magic:

[sourcecode language=css]
/* get the bubble area ready */
.bubble {
width:400px;
color:#efefef;
background: #ffffff;
}

/*this creates a block that is above and the same color as the content area*/
.bubble .pointer {
height:15px;
background:#393939;
}

/*This 1st pointer will float to the left. The large bottom right border radius will allow a little rounded portion of the dark grey background to peek through.*/
.bubble .pointer .one {
height:100%;
background:#ffffff;
width:50%;
-moz-border-radius-bottomright: 15px;
-webkit-border-bottom-right-radius:15px;
float:left;
}

/*Same thing as the first pointer but reversed*/
.bubble .pointer .two {
height:100%;
background:#ffffff;
width:50%;
float:right;
-moz-border-radius-bottomleft: 15px;
-webkit-border-bottom-left-radius:15px;
}

/*Now we style the content area (below the pointer). It's rather self-evident: */
.bubble .content {
padding:10px;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
background:#393939;
text-align:center;
}
[/sourcecode]

Another neat similar idea would be to nest 2 circles of different sizes to create an assymetrical pointer, which would probably look a little more natural.

> View Full Tutorial on SublimeOrange

Letterpress Effect

The letterpress effect (where type appears to be "pressed in") is a popular and attractive way of adding some flair to a design. It used to be you'd require an image or some jQuery to pull this off. Now, CSS can take care of it easily and effectively - and there's no excuse not to know how. The technique works by using the text-shadow property. By using a shadow color that is lighter than the text color, you can easily create an embossed letterpress effect. This is all the code you need:

[sourcecode language="css"]
/*you can replace 'h2' with any selector you want to letterpress*/
h2{ color: #222;  text-shadow: 0px 2px 3px #555; }
[/sourcecode]

Text-shadow takes four values: horizontal (x) offset, vertical (y) offset, blur radius and color. In this example we've put the shadow right below the text by just a couple of pixels and given a little blur to soften it. Interestingly, you can also create the same indented look on block elements using box-shadow (which takes the same 4 values). You can see that Chris Spooner did exactly that in his demo of this technique.

> View Full Tutorial on Line25

Content Slider

jQuery content sliders are all the rage - it's another common feature/effect that we can expect to implement a lot more than once. But did you know that you can create a pure CSS content slider? Yup, as Neal Grosskopf would tell you, the magic lies in the :target pseudo-selector, which enables us to grab elements based on the current hash tag. That means that we can tell what panel we're supposed to be showing without having to use scripting variables - an impressive feat. The markup is less semantic than I would like, but it works - there are several nesting number divs, 7 navigation links and a list to hold the slider content:

[sourcecode language=html]


2
2


1
3


2
4


3

  • Panel #1
  • Panel #2
  • Panel #3
  • Panel #4

[/sourcecode]

And this is what the CSS looks like, explained with comments:

[sourcecode language=css]
/*layout the panels side by side inside the slider with only one showing at a time*/
#slider{ margin: auto; overflow: hidden; }
#slider, li { position: relative; width: 500px; }
#slider, ul, li { height: 300px; }
li { float: left; }

ul{
list-style-type: none;
position: absolute;
left: 0px;
top: 0px;
width: 2000px;

/*create sliding animation*/
-webkit-transition: left .3s linear;
}

/*position the ul based on what the hashtag is*/
#a1:target ul { left: 0px; }
#a2:target ul { left: -500px; }
#a3:target ul { left: -1000px; }
#a4:target ul { left: -1500px; }

/* Default */
:target .up2.default { display: none; }

.up2.default,
#a1:target .up2,
#a2:target .down1,
#a2:target .up3,
#a3:target .down2,
#a3:target .up4,
#a4:target .down3
{ display: block; }
[/sourcecode]

That is really impressive, and another neat thing about it - it's sticky, meaning that bookmarks/addresses still work without having to implement yet another plugin. It always impresses me when people build things like a content slider or lightbox with pure CSS. Good job, Neal!

> View Full Tutorial on Neal Grosskopf's Blog

3D Ribbons

Our last CSS3 effect for today is learning to create 3d ribbons, another popular and attractive design effect. This time we can use a combination of CSS borders, the box-shadow property and a couple extra spacer divs to create some spectacular 3 dimensional ribbons. For our markup:

[sourcecode language=html]

3D CSS Ribbon

Lorem ipsum dolor sit amet.

[/sourcecode]

Now for the CSS:

[sourcecode language="css"]
/*style the 'bubble', the part that the ribbon goes around
.bubble {
background: #fff;
clear: both;
margin: 0px auto;
width: 350px;
position: relative;
z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */

/*rounded corners and box shadows*/
-moz-border-radius: 10px; -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-border-radius: 10px; -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-border-radius: 10px; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
}

/*this is the rectangular part of the ribbon*/
.rectangle {
background: #7f9db9;
height: 50px;
width: 380px;
position: relative;
left:-15px;
top: 30px;
float: left;
z-index: 100; /* the stack order: foreground */

/*box-shadows give ribbon 3-d look*/
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
}

/*style the heading inside the ribbon*/
.rectangle h2 {
font-size: 30px;
color: #fff;
padding-top: 6px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
text-align: center;
}

/*these 2 triangles go on either side of the rectangle
.triangle-l {
border-color: transparent #7d90a3 transparent transparent;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: -30px;
top: 65px;
z-index: -1; /* displayed under bubble */
}

.triangle-r {
border-color: transparent transparent transparent #7d90a3;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: 350px;
top: 35px;
z-index: -1; /* displayed under bubble */
}
[/sourcecode]

Wondering how those triangles happen? It works because we set the border to be thicker than the element and we made every side transparent except for the side that was supposed to be showing (left on .triangle-r, right on .triangle-l). The borders are split diagonally, so when only one side is visible you're left with a diagonal angle that is perfect for creating a triangle. So there you have it - creating a 3d ribbon with pure CSS!

> View Full Tutorial on PVM Garage

Bonus: 4 More Impressive CSS3 Effect Tutorials

Wait - don't go yet! Here's a bonus round of 4 more exciting CSS3 tutorials. Enjoy!

The Hidden Power of Border-Radius

border-radius

Create an Aqua Button without Images

aqua-button

Creating a Polaroid Photo Viewer with CSS3 and jQuery

polaroid

Old School Clock with CSS3 and jQuery

When It's All Said and Done...

I hope you've enjoyed learning some practical and readily useful CSS3 techniques today. I picked these 7 because they were fun, interesting, and can be used right away. You now have 7 more nifty CSS techniques in your toolset - go use them and have fun, and remember to share your questions/opinions below!

17 Comments

  1. Doug Montgomery (Douglife) February 25, 2010
  2. Nick Parsons February 25, 2010
  3. Neal G February 25, 2010
  4. Tony February 26, 2010
  5. Lakeville Web Design February 26, 2010
  6. TutsBot February 27, 2010
  7. Michael March 2, 2010
  8. Niklas March 2, 2010
  9. Kelly Johnson March 3, 2010
  10. Octo Fraguto March 3, 2010
  11. tasarhane April 14, 2010
  12. bigjobsboard April 21, 2010
  13. andy November 15, 2010
  14. Rohit Rox May 23, 2011
  15. Endy July 24, 2011
  16. Xtence August 23, 2011
  17. Mark September 6, 2011

Leave a Reply