Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196
News

How to create cutting edge CSS effects

Discover how to create and animate menus with just CSS3

CSS3 is maturing to the point that we can safely start using it for visual panache on the most fundamental elements of our websites. While it’s still true that a reasonable percentage of users won’t be able to see the extra aesthetic sparkle CSS3 can add, so long as you, as a designer, don’t come to rely on CSS3 for the main functional aspects, the world is very much your oyster. The web is already abound with examples of this ‘progressive enhancement’ in action, so there’s no reason not to embrace the opportunity yourself.

In this tutorial we’re going to take a basic unordered list that’s being used as a navigation menu and give it a CSS3 power-up. The end result will respond with a nice tactility, taking advantage of native browser rendering to produce a smooth, polished animation. Most importantly, the effects we add will progressively enhance the UX, so if a user doesn’t have a modern browser the menu will continue to work perfectly well.

While we’re at it, we will also take the opportunity to have a quick look at embedded fonts, CSS-rendered background graphics and predefined CSS3 animations. Once you’ve completed this step-by-step, you’ll be fully armed to add progressive enhancement to your own designs – so let’s get going!

The basic HTML

The first thing we need to do is get a solid base down. We’ve opted for a very basic HTML page that features a div tag containing an unordered list with navigation links, plus two further divs. One for content and another for a heading.

DOWNLOAD FULL CODE

Apply a stylesheet

You may have noticed that we’ve called in an external stylesheet, named styles, from a sub-folder. We need to create that stylesheet now, so open a new blank document and save it as ‘screen.css’ inside a sub-folder called ‘styles’ to match. Paste in the code – which is in full on the CD – to set the main page rules:

001 /* Advanced navigation effects with CSS3
*/t
002 body {
003 background: #dedede;
004 font-size: 62.5%;
005 font-family:verdana, helvetica, 
arial, sans-serif;
006 }
007 #container {
008 width: 960px;
009 position: relative;

Make a basic rollover

Part of fundamental user experience design is providing feedback when visitors interact with elements on your page. A classic example of this is the humble rollover, and it’s on top of this core functionality that we’ll be building all our effects here. Start off by adding the CSS code below to create a simple rollover that just swaps the background colour.

001 ul#nav li:hover {
002 background: #dcebeb ;
003 z-index: 1000;
004 }

Add some CSS3

One of the best things about the proposed CSS3 properties is the ability to transform elements in scale, position or rotation. Let’s add a bit of scale to our rollover so that, as we hover our mouse over the list item, it gets a little bigger and also gains a drop shadow. The end result should be an apparent ‘lifting’ off the page. (We’ve only used the –webkit- browser prefix, but this will also work with –ms- and –moz- for IE and Firefox, respectively.)

001 ul#nav li:hover {
002 background:	#dcebeb	;
003 -webkit-transform: translateY(-3px) scale(1.05);
004 -webkit-box-shadow: 0px 2px 7px 	#999;
005 box-shadow: 0px 2px 7px #999;
006 z-index:	1000;
007 }

Make it smooth

As well as fancy new transformation effects, CSS3 enables us to automatically create animations between two different states for an element. We set this up using the transition property and specify which elements to animate, over what period of time the animation should take place, and which animation speed to apply. Add the code below to the ul#nav li selector to create an auto animation:

001 -webkit-transition: all 0.15s linear;

A little more setup

We’ve got a basic navigation menu working nicely now, so let’s get the rest of the page set up before we move on to more advanced CSS3 properties and animations. Add the CSS below to create the content area styling and set the remainder of the page up to match the main design. The full code is on the CD.

001 	div#panel {
002 	margin: 0 1px;
003 	width:		560px;
004 	height:		477px;
005 	float:		left;
006 	border:		2px solid #cfcfcf;
007 	background: #fefefe;
008 	-webkit-box-shadow: 0px 0px 4px #ccc;
009 	box-shadow: 0px 0px 4px #ccc;
010 	}
011 	div#smallpanel {
012 	margin: 	0 1px;
013 	width:		60px;
014 	height:		477px;

Get in a spin

The panels are looking great, but the title found within the small box isn’t fitting correctly right now. We need to rotate the text through 90 degrees so that it reads vertically. Luckily we can do this using CSS3 once more. Again, the transform property lets us take control and position the heading as required. Change your CSS so that it reads as the following:

001 #smallpanel h3 {
002 	width:		477px;
003 	margin:		0;
004 	padding:	0;
005 	font-size:	5em;
006 	display:	block;
007 	text-transform:capitalize;
008 	color:		#8faabd;
009 	color:		rgba(255,255,255,0.5);
010 	font-weight:normal;
011 	-webkit-transform-origin: 0 0;
012 	-webkit-transform: rotate(90deg) translateY(-60px) translateX(20px);
013 	-webkit-transition: all 0.3s linear;
014 	cursor:		pointer;
015 	}

Add some vector graphics

We thought that it could be good to add some visual icons that represent the different sections of our menu, but if we render standard JPEG, PNG or GIF files out, they’ll look a little soft as we scale them up when moving a mouse over the list item. Instead, we can use a web font to render icons which act like vectors but can scale to any size while also remaining sharp. Have a browse at www.justbenicestudio.com/studio/websymbols for a suitable font.

Download and install

Download the Web Symbols font (or something similar) from the site mentioned in the previous step and install it into your page by adding the step code to the top of your stylesheet. This imports the font into the page, enabling us to apply it to individual elements as if it were any other typeface in common use.

001  @font-face{ 
002 	font-family: ‘WebSymbolsRegular’;
003 	src: url(‘fonts/websymbols-regular-webfont.eot’);
004 	src: url(‘fonts/websymbols-regular-webfont.eot?#iefix’) 
	format(‘embedded-opentype’),
005 	url(‘fonts/websymbols-regular-
	webfont.woff’) format(‘woff’),
006 	url(‘fonts/websymbols-regular-
	webfont.ttf’) format(‘truetype’),
007 	url(‘fonts/websymbols-regular-
	webfont.svg#WebSymbolsRegular’format(‘svg’);
008 	}

Pick your icons

Now we’ve got the font installed we can add an icon to the start of each list item. Add a

with a class of icon before each tag in the navigation list and then add the CSS code below to assign the Web Symbols font to the .icon class. Full code is on the disc.

DOWNLOAD FULL CODE

Experiment

You’ll notice that in our example code we’ve chosen some letters to act as the content for our icon

s. Each letter displays a different icon when rendered in the Web Symbols font, so it’s worth testing your page and experimenting with various letters to find a pictorial character that best matches your button.

Animate the icon

When the list item is rolled over we use CSS3 to scale it up and the transition property to animate that automatically. Let’s do the same thing for the icon. By adding an animation to the icon as well as the list item, the icon will be subjected to two animations: one as a child of the list item and another as an icon. The result is a more complex-looking animation that looks less mechanical. Insert the CSS below:

001  ul#nav li:hover .icon {
002 	-webkit-transform: scale(1.5);
003 	color:#b7480c;
004 	}

Take advantage of CSS3

Notice that we animated the scale of the icon so that it grows far more than the rest of the button, and also the colour. CSS3 is happy animating any CSS property for you, so you can achieve a nice smooth transition without any complex scripting required!

Predefined animations

Sometimes it can be really useful to be able to specify a starting position and an ending position for an animation instead of just the starting and ending states. This enables us to have an animation launch from a set of properties other than the standard default. Just add in the code below to your stylesheet in order to create a preset animation:

001  @-webkit-keyframes slideFromTop {
002 from {
003 opacity: 0;
004 -webkit-transform: 
	translateY(-200%);
005 }
006 to {
007 opacity: 1;
008 -webkit-transform: translateY(0%);
009 }
010 }

What does that do?

The code we just added in step 14 doesn’t do anything by itself – however, if we apply the animation to the :hover state of an element, when we move our mouse over that element, the style will animate between being transparent – and 200% of the height above the element bounds – to being opaque and in the normal position. Add the following code to see this in action; once again, the complete code that you’ll need can be found on the cover disc.

001  ul#nav li a h4 {
002 margin:		0;
003 padding:	0;
004 font-size:	3em;
005 display:	block;
006 text-transform:capitalize;
007 font-weight:normal;
008 }

Test and repeat

What we’ve just set up is an animation that applies to the h4 element inside each list item. When you mouse over the item, the heading disappears and slides back into view. We can repeat this trick for the other element within our buttons. Add the code below to set up the animation preset:

001  @-webkit-keyframes slideFromRight {
002 from {
003 opacity: 0;
004 -webkit-transform: 
	translateX(200%);
005 }
006 to {
007 opacity: 1;
008 -webkit-transform: translateX(0%);
009 }
010 }

Cross-browser friendly

Now we’ve got two different animation presets completed. Before we add the second preset to the text of the button, let’s bring the other browsers up to speed by adding support with their own vendor prefixes. Add the code below to duplicate the animation presets for other non-WebKit browsers.

001 @-webkit-keyframes slideFromTop {
002 from {
003 opacity: 0;
004 -webkit-transform: 
	translateY(-200%);
005 }
006 to {

Keep things consistent

Now that’s in place, let’s add the effect to the text. This works in exactly the same way as with the h4 we saw a few steps back – we simply add the call to the preset and, when the user moves their cursor over the

  • , four animations in total will be called simultaneously.
001 ul#nav li a h4 {
002 	margin:		0;
003 	padding:	0;
004 	font-size:	3em;
005 	display:	block;
006 	text-transform:capitalize;
007 	font-weight:normal;
008 	}

Make some noise

The final few flourishes we need to set our page off to best effect are pretty basic but still worth having a close look at. First of all, the page feels quite clinical and flat now – it would be great to have some texture in the background, but not at the expense of download speed. Start off by creating a repeating textured background inside your favourite image editor.

Convert and deploy

Rather than include this image as an external reference as you would normally, we can embed it directly into the CSS, saving an extra call to the server and increasing rendering speed. Navigate to http://tinyurl.com/uriconvertor and upload your image to convert it to base64 code; copy this to your clipboard.

Paste ’n’ go

Now you’ve got your base64 code, we need to apply it as a background image to the desired element. We’ve chosen to place our texture on the page background, so add the following step code (DOWNLOAD FULL CODE) to your existing body {} CSS rules to apply the texture. Note that your base64 code may be slightly different to ours depending upon the texture graphic that you chose to upload.

001  body {
002 background:	#dedede 
	url(data:image/jpeg;base64,/9j/…) 
003 repeat top left;
004 font-size:	62.5%;
005 font-family:verdana, helvetica, arial,
	sans-serif;
006 }

Polish and test

Finish the page off by applying another texture to the small panel, an icon and an animation for the position and text shadow of the h3 within. Once done, test the menu in your browser and then just wallow in the CSS3 greatness!

Cutting edge CSS Effects
Cutting edge CSS Effects
Supercharge your CSS with SASS
Supercharge your CSS with SASS
×