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.
DD Color Tabs
This is a lightweight, very easy to customize image tabs menu similar to the one you see throughout Dynamic Drive. Instead of swapping between two tab images, this menu uses a single transparent tab instead. What this means is that you can in fact change the menu and menu hover colors just by changing the two color values inside the CSS code! It doesn't get simpler than that.
CSS Popup Image Viewer
Enable arbitrary links or image thumbnails to pop up an enlarged (different) image onMouseover by using this CSS code. With the help of CSS's ":hover" pseudo class, combined with relative and absolute positioning, the enlarged images are simply included on the page as normal HTML, "popping" up on demand.
CF Navigation Menu
This is CSS based navigational menu based on a single tab interface. Four images are used as part of its interface- the two round corners, an indented divider between menu links, and a gradient background image spanning the menu.
CF Navigation Menu II
This is an inverted version of the original CF Navigation Menu. Four images are used as part of its interface- the two round corners, an indented divider between menu links, and a gradient background image spanning the menu.
DD Blue Blocks Menu
This is our rendition of a block looking vertical menu, inspired by the original Blue Blocks menu and based on the CSS used by the vertical menu of our sister site CSS Drive. It supports the insertion of menu headers to act as dividers between groups of menu links.
Sliding Doors Tabs Menu
This is a two state rollover image tabs menu based on the popular sliding doors technique. It uses two images, a right and left tab that shifts up and down as the mouse moves over a tab, to create a highlight effect.
CSS Drop Shadows
This examples shows how to add a drop shadow to any container element using only CSS (no images). It does this by wrapping the desired content in a DIV with its background color set to the desired shadow color.