Code examples from Visual Stylin' with CSS3 by Charles Wyke-Smith
.transitions.fig91_2 {
height:100px;
width:150px;
border:3px solid hsla(80,65%,50%,1);
background:url(pics/leaves.png) center center;
-moz-transition:all linear 2s;
-webkit-transition:all linear 2s;
transition:all linear 2s;
}
.transitions.fig91_2:hover {
border:3px solid hsla(325,65%,50%,1);
background:url(pics/2_pink_flowers.png);
border-radius:50%;
}
.transitions.fig93 {
height:100px;
width:150px;
border:3px solid hsla(80,65%,50%,1);
background:url(../pics/leaves.png) center center;
-moz-transition:border 1s linear, border-radius 3s linear,
background 6s linear;
-webkit-transition:border 1s linear, border-radius 3s linear,
background 6s linear;
transition:border 1s linear, border-radius 3s linear,
background 6s linear;
}
.transitions.demo3:hover {
border:3px solid hsla(325,65%,50%,1);
background:url(../pics/2_pink_flowers.png) center center;
border-radius:50%;
}
<nav>
<ul>
<li><a href="#">Create</a></li>
<li><a href="#">Read</a></li>
<li><a href="#">Update</a></li>
<li><a href="#">Delete</a></li>
</ul>
</nav>
nav {
/* basic menu styling */
width:100px;
float:left; /* remove to stack menus */
margin:0 20px 0 0;
border:1px solid #DDD;
padding:5px 0;
border-radius:5px;
/* background gradient */
background:-moz-linear-gradient(#FFF 0%, #EEE 10%, #EEE 90%,
#CCC 100%), #FFF;
background:-webkit-linear-gradient(#FFF 0%, #EEE 10%, #EEE 90%,
#CCC 100%), #FFF;
background:linear-gradient(#FFF 0%, #EEE 10%, #EEE 90%, #CCC 100%), #FFF;
font:11px arial, sans-serif;
background:linear-gradient(#FFF 0%, #EEE 10%, #EEE 90%, #CCC 100%), #FFF;
font:11px arial, sans-serif;
overflow:hidden;
/* set the origin point to top-left of menu */
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
/* set up of menu animation */
-webkit-transition: all ease-out .7s;
-moz-transition: all ease-out .7s;
transition: all ease-out .7s;
}
nav:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
transform: scale(2);
}
/* more stylings for menu */
nav li {
display:block;
border-bottom:1px solid #069;
margin:3px auto;
width:80%;
list-style-type:none;
}
nav li:last-child {
border:none;
margin-bottom:0;
}
nav a {
display:block;
width:100%; /* makes background of link clickable */
padding:0 0 3px;
color:#069;
text-decoration:none;
}
nav a:hover {
color:#F33;
}