Best Web Magazine

I have been working on the new Abduzeedo design and have had the chance to play more with CSS 3, even though it's not fully supported on all browsers we can start using some really cool features such as round corners, text-shadow, box-shadow, transitions and transformations. The major downside still is Internet Explorer, however it seems that the IE 9 will have a much better CSS 3 support and support those features.

I believe that HTML 5 and CSS 3 will replace Flash eventually, and we can notice that the web design community has been talking a lot about it, Smashingmagazine, one of the largest web design sites out there has been publishing great articles and even launched a CSS 3 contest to incetinve designer to play more with CSS 3.

So in this post I will show you some experiments I've been doing with CSS 3, especially with animations using transitions and transformations like scale and rotate.

*The demo and code will only work with Webkit browsers like Safari and Chrome.

CSS Buttons and Thumbs

In this example I will show you how to create a really cool navigation bar using CSS only. I used gradients, transitions and shadows. I also used a Flickr Javascript badge to load some images from Flickr and then use CSS transitions to scale up them when the user hovers an image.

HTML Code

CSS for the Navigation Bar

For the navigation bar I used CSS to create the gradient, the syntax for the gradient in CSS is -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*). For more information about CSS Gradients I recommend that you check out the http://webkit.org website and this article in special http://webkit.org/blog/175/introducing-css-gradients/.

One site that is very useful to generate the CSS 3 codes is http://css3generator.com/ especially because of the extra code we have to add to support Mozilla and Opera.

#menu{
	position: relative;
	display: block;
	margin: 20px auto;
	width: 600px;
	height: 60px;
	padding: 0 20px;
	background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(82,82,82)), color-stop(1, rgb(125,124,125)));
	-webkit-box-shadow:#000 0 1px 2px;
	-webkit-border-radius:2px;
}

CSS for the Navigation Buttons

For the buttons once again I used CSS gradients once again and also Text-shadow, and CSS transition so when the user hovers the button the background color will change with an animation.

ul li{
	list-style-type: none;
	margin: 15px 0;
	float: left;
	height: 30px;
	line-height: 30px;
}
ul li a{
	background: #666 -webkit-gradient( linear, left bottom, left top, color-stop(0.5, rgb(40,40,40)), color-stop(0.5, rgb(80,80,80)) );
	display: block;
	padding: 0;
	text-decoration: none;
	color: #fff;
	font-size: 12px;
	font-weight: bolder;
	text-shadow: #000 0 -1px 1px;
	width: 90px;
	text-align: center;
	border-bottom: 1px solid #666;
	border-top: 1px solid #222;
	border-left: 1px solid #666;
	border-right: 1px solid #222;
	-webkit-transition:text-shadow .7s ease-out, background .7s ease-out;
}
ul li:first-child a{
	-webkit-border-top-left-radius:20px;
	-webkit-border-bottom-left-radius:20px;
}
ul li:last-child a{
	-webkit-border-top-right-radius:20px;
	-webkit-border-bottom-right-radius:20px;
}

ul li a:hover{
	text-shadow: #f5fc39 0 0 10px;
	background: #222;

}

Animated Flickr Images

Here I used the same hover effect I applied on the images of my new personal site http://fabiosasso.com. So when the user hovers the thumbs the image scales up using the -webkit-transition and -webkit-transform:scale(). Below you can see the code, the transition is applied to the image code, while the transform goes on the hover state only.

#flickr_badge_uber_wrapper{
	width: 550px;
	position: relative;
	display: block;
	margin: 0 auto;
	margin-top: 100px;
}
.flickr_badge_image{
	float: left;
}
.flickr_badge_image img{
	margin: 10px;
	border: 3px solid #fff;
	display: block;
	position: relative;
	-webkit-border-radius:5px;
	-webkit-box-shadow: #000 0 0 2px;
	-webkit-transition: -webkit-transform .2s ease-in-out, -webkit-box-shadow .2s ease-in;

}
.flickr_badge_image img:hover{
	-webkit-transform:scale(1.2);
	z-index: 10;
	-webkit-box-shadow: #666 0 5px 10px;
}

Click on the image to see the demo.

90s design with CSS

The possibility of rotating and scaling HTML elements allows us to create different compositions that before would be possible only using images or Flash.

So, I had this idea of playing only with CSS and basic typography to create a design inspired by David Carson. Basically I just added some rectangles and messed the typography reducing line-heights and rotated some texts, then with transitions I animated the whole composition to rotate and scale when the user clicks on the "Who am I" text.

Below you can see the final result of this experiment. It is still a working process but you can have an idea of what you can accomplish now with CSS3.

Click on the image to see the Demo

CSS Scale and Rotate - Click on the image to see the Demo

Similar Posts

• 3D Text Tower
• Build Kick-Ass Practical CSS3 Buttons
• jQuery MagicLine Navigation
• Mac-like Multi-level Dropdown Menu with CSS3
• How to Make a CSS Sprite Powered Menu