From the monthly archives: June 2010
Works on Webkit(Chrome and Safari).
you can View the source code by clicking on Demo.
It is very simple to create such an effect with CSS3 transitions. The mouse over images are absolutely positioned and have an opacity of 0.On hover i am just changing the opacity and width height padding [...]
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;
[...]
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.
CSS for this menu –
<style>
.accordion div
{
background-color:#9CF;
width:100px;
float:left;
-webkit-transition: width 1s ease;
-moz-transition:width 1s ease;
font-family:Georgia, "Times New Roman", Times, serif;
overflow:hidden;
height:50px;
}
.accordion p:first-child
{
padding:10px;
[...]
-
Categories
-
Meta
