From the daily archives: Saturday, June 26, 2010

Accordion using CSS3 animation

By designer@vaniawebdesign.com On June 26, 2010 · 3 Comments

Accordion Using CSS3 Transitions and HTML 5 elements (Try Chrome or Safari to see it correctly!! They Half work on FF
)-

Example uses:
-webkit-transition-property:width,opacity;
-webkit-transition-duration: 1s,1s;
-webkit-transition-timing-function:ease,linear;

Styles –

section,header,figure,aside,footer{
display:block
}
body{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#333;
[...]

Continue Reading →

Image Gallery experiments in CSS 3

By designer@vaniawebdesign.com On June 26, 2010 · 1 Comment

Try Chrome or Safari to see it correctly!! They Half work on FF

This Example uses the following Transitions –

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transition:height 2s linear;
-moz-transition:width 2s linear;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;

Click on the image to view the example.

Continue Reading →