CSS Library CSS3 demos
Welcome to Dynamic Drive's new CSS library! Here you'll find original, practical CSS codes and examples such as CSS menus to give your site a visual boast.
Page 1 of 7 pages 1 2 3 > Last »
3D Depressible Button
CSS can be used to really jazz up a plain looking link and create an awesome "call to action" button, as in the case of our 3D depressible button here.
3D flip menu
Using CSS3 transform, this menu flips the traditional menu around, or on its y-axis to be exact. When the user clicks on the menu anchor, it flips over to reveal a drop down menu. The menu degrades well in IE9 and IE8, resorting to a drop down menu activated by JavaScript in the later. Flippin' cool!
3D rollover menu
This horizontal menu flips the traditional rollover effect over its head to create a rather unique effect. As the user mouses over a menu item, it rolls up in a 3D fashion like a cube to reveal the bottom side, which is a duplicate of the original menu item's content.
Animated UL background effect
This CSS example demonstrates animating the min-width property of an element to create a stretching background effect. Here we use the technique to add a nice rollover effect to UL lists, so the user can easily home in on a particular list item just by rolling the mouse over it. The animation uses CSS3, which works in IE10+, FF, Chrome, and Safari.
Before and After (Peel Back) Image
"Before and After" images are always fun to look at, especially if the right transition is used to effectively swap between the two. This CSS example shows just that, using CSS3 animation to animate the "clip" property of the "before" image to peel back and reveal the "after" image onMouseover. The result is a simple but sleek "Before and After" Image effect!
CSS 3D Flip
One of the groundbreaking features in CSS3 is the ability to rotate HTML elements in 3D space. The below CSS code shows how to rotate a "2 sided" element either on its X or Y axis to reveal the content on the back side.
CSS Circle Menu
This CSS example uses CSS3's border-radius property that's set to a very large value to create circle menu links.







