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.
Pull out image using CSS3 keyframe animation
CSS3 animation can be fine tuned and broken up into "frames", thanks to the @keyframes rule. Currently supported in FF5+, Safari, Chome, and possibly IE10, the following uses CSS3 keyframes to create a pull out image that is revealed when the mouse rolls over an image. In IE, it degrades well in both IE8 and IE9.
Image frames using CSS3 border-image
CSS3 makes it possible to specify an image as an element's border, instead of just a solid color. It takes a single image and then slices and dices it before using the end pieces to make up the border. Very cool!
CSS3 Text Shadows
CSS3 throws its full weight behind text shadows, which as the name suggests, lets you add shadows to regular text on the page. And with support for multiple shadows simultaneously applied to the same text, CSS text shadows can produce some stunning textual effects without images.
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.
CSS3 Gradient Menu Buttons
These fancy looking buttons brings together CSS3's
box-shadow, and linear gradients to create glossy looking menu buttons that use NO images.
CSS3 Hover Image Gallery
A sleek image gallery that takes advantage of CSS3 animation, shadows, and the "
transform" property to instantly add a smooth hover effect to its images, whereby the image enlarges and moves closer to the user.
CSS3 Linear Gradients
With the advent of CSS3's comes support for linear gradients, which offer a fast and lightweight way of adding gradients to your page. It can be used in conjunction with a gradient image to get the best of both worlds.