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.

_{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.

_{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.