Feb 03

Valentine animation with CSS3

Posted by Benedikte Vanderweeën on 03/02/2011 at 03:22 PM   (4) Comments -

A few weeks ago, I finally had some time to read the green book “CSS3 for web designers” written by Dan Cederholm and published by A book apart (ISBN 978-0-9844425-2-2). The book explains what and how you can already implement CSS3 in websites starting today. I felt the urge to try some of Dan’s fantastic examples (the code is explained with a complete webpage example) and to experiment a bit with the code inside the book.

Something wonderful arrived in the mail today.

Dan Cederholm - CSS3 for web designers

Because it's almost Valentine's day, I did an experiment with a little card i designed. A bit inspired by Michelangelo's The Creation of Adam, i thought of 2 hands reaching for each other as a symbol of the need to connect with each other. And the beating heart in between to show each other love.

Valentine animation

View the result

Browsers

Only Chrome and Safari

The list of supporting browsers is small: the animation only works in Webkit browsers, namely Safari and Chrome. This is because the other browsers don't support the animation CSS3 property (yet). Other browsers will only see a static image.

Multiple backgrounds

Infinite adjusting colors with only 2 images

A new css3 property that is one of my favorites, is the multiple backgrounds. Placing more than 1 image is a huge improvement for your designs. In this example, i used 2 background images and a background color. I added a javascript to show that with 2 background images you can easily change the background color without having to change the whole image. If you use a certain percent of transparency, the background color will shine through.

This is the code i used to set my background:

	
	body{
		background: url("../img/ie-bg.png") repeat fixed top left;
		background: url("../img/hearts.png") no-repeat fixed 0 410px,url("../img/stripes.png") repeat fixed top left,url("../img/grain.png") repeat fixed top left;
		background-color:#ed4724;	
	}
	

Placing the elements

Top and bottom

I placed 3 images in the document: the woman's arm, the man's arm and the heart in the middle. I placed them with an absolute position.

Here's the code:

	
		#lady img{
			position: absolute;
			top: -20px;
			left: 60%;
		}
		#man img{
			position: absolute;
			bottom: 0;
			left: 20%;
		}
	

Animating the illustration

The beating heart

I wanted to illustrate the beating of the heart by scaling the image up and down, this is done with the transform property. Here's the extract of the code that I took over from the book and adjusted:

	
	@-webkit-keyframes pulse {
		0% {
			-webkit-transform: scale(0.7);
			}
		50% {
			-webkit-transform: scale(1);
			}
		100% {
			-webkit-transform: scale(0.7);
			}
	}
	
	#hearts{
			-webkit-animation: pulse 1.5s infinite ease-in-out;
			}
	

Changing the background color

Choose your colors

After i defined the background color to red, i thought maybe it would be a good idea to let the user choose his/her own background color, so i decided to pick a range of 5 colors, put them in a drop down list. I had to adjust the background tile images a bit, set the transparency a bit lower so that the background color shine through the image.

This is done with a javascript function that is called within the select element of the form.

	
	function change_it() {		
	  if (document.getElementById && document.createTextNode) {
		  
	    var new_color = "";
	    var color_sel = document.getElementById("change_bg").value;
		color_sel *= 1;
	    
		switch (color_sel) {
	      case 0 : window.alert("Please select a color."); return false;
		  case 1 : new_color = "#abc800"; break; //green
	      case 2 : new_color = "#97928b"; break; //beige
		  case 3 : new_color = "#e9cb3a"; break; //yellow
		  case 4 : new_color = "#318bc7"; break; //blue
		  case 5 : new_color = "#fda7bb"; break; //pink
		}	    
		document.body.style.backgroundColor= new_color;
	    return false;	
	  } 
	}
	

This is the form code that calls the javascript function in which all the background colors are defined.

	
		<form action="#">
			<select name="change_bg" id="change_bg" onchange="return change_it();">
				<option selected="selected" value="0">Select Background</option>
				<option value="1">green</option>
				<option value="2">beige</option>
				<option value="3">yellow</option>
				<option value="4">blue</option>
				<option value="5">pink</option>
			</select> 
		</form>
	

The fun thing about this little experiment is that is that you define animation in your stylesheet, that's something that feels a little weird after being used to javascript within your document for so many years. I hope non-supportive browsers will implement this soon.

Readers Comments

1. izmir web tasarım

on 13 February, 2011
at 02:25 PM

avatar Bene

Great animation.


2. ivan

on 20 February, 2011
at 06:38 AM

avatar Bene

Hi Benedikte,
nice work
pls mind, I am watching it on a 1027x768 screen and I see the whole picture sliding to left periodically because of the scrollbar on the left side.
hi
ivan


3. Chris Marsh

on 04 May, 2011
at 12:00 PM

avatar Bene

CSS3 animations are great - they give loads more options to the web designer. Good work!


4. mini projects

on 04 July, 2011
at 01:03 PM

avatar Bene

Nice animation, pleased very much….


Leave a comment

Commenting is not available in this weblog entry.

My products for sale!

Syndicate Weblog