CSS Library All examples
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.
CSS3 Semi Opaque Menu
This menu takes advantage of CSS3 gradient background to produce a menu with a semi opaque rollover effect. Whatever the solid background color of the main UL behind it, the menu item's background peeks through. Peek-a-boo!
CSS Clay Bricks Menu
This rustic looking horizontal CSS menu utilizes CSS3 gradient backgrounds and box shadows to add progressive visual appeal while still maintaining its minimalist look. The menu uses no CSS floats and hence can be easily left, center, or right aligned.
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!
Clean Arrow Underline Menu
This menu uses the nifty "CSS Triangles technique" to create a clean horizontal UL menu with a thick arrow border applied to the currently active menu item. It uses no images nor any extranous markup to accomplish the effect,
CSS Triangle Arrow DIVs
A look at how to use CSS to produce triangles/ arrows without any image. Using this technique, 4 speech bubble style DIVs can be created using markup only.
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.