Feb 03

Valentine animation with CSS3

Posted by Benedikte Vanderwee├źn on 03/02/2011

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.

  



Shopify Shopping Cart Software - Start your FREE trial today!

lynda.com online training tutorials