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:

<ul id="nav"> 
	<li class="current"><a href="#">Home</a></li> 
	<li><a href="#">Our Work</a> 
		<ul> 
			<li><a href="#">Team</a> 
				<ul> 
					<li><a href="#">Sub-Level Item</a></li> 
					<li><a href="#">Sub-Level Item</a> 
						<ul> 
							<li><a href="#">Sub-Level Item</a></li> 
							<li><a href="#">Sub-Level Item</a></li> 
							<li><a href="#">Sub-Level Item</a></li> 
						</ul> 
					</li> 
					
					<li><a href="#">Sub-Level Item</a></li> 
				</ul> 
			</li> 
			<li><a href="#">Sales</a></li> 
			<li><a href="#">Another Link</a></li> 
			<li><a href="#">Department</a> 
				<ul> 
					<li><a href="#">Sub-Level Item</a></li> 
					<li><a href="#">Sub-Level Item</a></li> 
					<li><a href="#">Sub-Level Item</a></li> 
				</ul> 
			</li> 
		</ul> 
	</li>	
	<li><a href="#">About</a></li> 
	<li><a href="#">Contact Us</a></li> 
</ul> 

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:

/*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;
}
 

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:

.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);
	
}

> 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:

<div class="bubble">
	<div class="pointer">
		<div class="one"></div>
		<div class="two"></div>
	</div>
	<div class="content">
		<p>Got something to say?</p>
	</div>
</div>

Now here’s the CSS magic:

/* 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;
}

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:

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

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:

<div id="slider"> 
 
<!-- :target hooks --> 
<div id="a1"> 
<div id="a2"> 
<div id="a3"> 
<div id="a4"> 
 
	<!-- 1 --> 
	<a href="#a2" class="up2 default">2</a> 
	<a href="#a2" class="up2">2</a> 
	
	<!-- 2 --> 
	<a href="#a1" class="down1">1</a> 
	<a href="#a3" class="up3">3</a> 
	
	<!-- 3 --> 
	<a href="#a2" class="down2">2</a> 
	<a href="#a4" class="up4">4</a> 
	
	<!-- 4 --> 
	<a href="#a3" class="down3">3</a> 
	
	<ul> 
		<li>Panel #1</li>	
		<li>Panel #2</li>	
		<li>Panel #3</li>	
		<li>Panel #4</li> 
	</ul> 
 
</div> <!-- End #a4 --> 
</div> <!-- End #a3 --> 
</div> <!-- End #a2 --> 
</div> <!-- End #a1 --> 
 
</div> <!-- End #slider --> 
 

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

/*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; }

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:

<div class="bubble">
	<div class="rectangle">
		<h2>3D CSS Ribbon</h2>
	</div> 

	<div class="triangle-l"></div> 
	<div class="triangle-r"></div>

	<p class="content"> 
		Lorem ipsum dolor sit amet.
	</p>
</div>

Now for the 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 */
}

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!

Written By Nick Parsons

Nick is the editor of Webitect and a developer + designer from Houston TX.

26 Comments

  1. Doug Montgomery (Douglife)

    February 25th, 2010 at 07:42 pm

    Nick, I usually don’t comment too much on tutorial collections, but I must say you’ve displayed exactly what I wanted to read by visiting. You’ve also done a great job listing the code needed. Great job all around!

  2. Nick Parsons

    February 25th, 2010 at 07:51 pm

    @Douglife – Thanks, Doug. I’m glad you enjoyed!

  3. Neal G

    February 25th, 2010 at 10:26 pm

    Thanks for the plug man! Glad you found my article interesting.

  4. Tony

    February 26th, 2010 at 01:54 pm

    Thus far, I’ve implemented box shadow and rounded border effects to my site. It’s looking pretty awesome. Not to sure about whether it will show up the same across all browsers, esp. IE.

  5. Lakeville Web Design

    February 26th, 2010 at 10:44 pm

    No joke, earlier tonight whilst watching UFC, I decided that I wanted to take tomorrow to learn and utilize about 3 of the ‘tricks’ you’ve mentioned here. Then I get on the ol’ Twitter and what do I see? A beautiful article written as such.

    Thanks for being psychic.

  6. TutsBot

    February 27th, 2010 at 07:26 am

    Great effects … Thanks Nick :)

  7. Michael

    March 2nd, 2010 at 01:51 pm

    Brilliance – I’m passing this one on to the designer.

  8. Niklas

    March 2nd, 2010 at 11:31 pm

    Most of the examples don’t work on Internet Explorer, especially on IE6, which still unfortunately is a de facto in corporate world..

    Otherwise, a nice article!

  9. Kelly Johnson

    March 3rd, 2010 at 12:03 am

    Nice additions. I like Andy Clark’s recent comment about soon we’ll all leave the old-fashioned concern that a website should look the same across the different browsers.

    Play up what you can when you can… IE6? Supply a nice dressed-up text version.

  10. Octo Fraguto

    March 3rd, 2010 at 08:18 am

    Uow,

    Useful tips, I loved the buttons and why you talked about the ribbons but not about the labels over it. They are perfect.

  11. tasarhane

    April 14th, 2010 at 02:22 am

    nice article.. thanks

  12. bigjobsboard

    April 21st, 2010 at 02:38 am

    Amazing post. I will try to utilize these. Thank you for the tips.

  13. andy

    November 15th, 2010 at 07:57 pm

    fantabulous

    thanks!

  14. Rohit Rox

    May 23rd, 2011 at 06:30 am

    fabulous collection of impressive effects man … very practical and gr8 way to get started with CSS3….I am sharing this article on my blog if you dont mind…thank again for this useful share !!!

  15. Endy

    July 24th, 2011 at 09:03 am

    thanks for the great post…
    I was so infatuated with CSS3 ..
    every day I look for inspiration and in my opinion, this is one very good inspiration to design my blog ..
    Anyway, thanks again..

  16. Xtence

    August 23rd, 2011 at 02:03 pm

    Great collection, this one is tweeted and bookmarked !

    thanks for sharing !

  17. Mark

    September 6th, 2011 at 03:20 am

    Thanks for sharing, this is a cracking selection! I particularly like the 3d ribbons…

What Do You Think?