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.
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.
Chrome Menu Bar
This is a lightweight "chrome" looking CSS menu bar. The menu uses two variants of the same background image to create the hover effect, and each menu items can easily be set to either align "left", "center", or "right" on the page, just by changing the "text-align" attribute.
CSS Tabs menu
This is a basic CSS tabs menu, created from an ordinary HTML list. The menu supports two common requests- the ability to align the menu "left", "center", or "right" on the page, plus highlight a particular tab so it appears selected.
Curly Corner Container
There are countless techniques on the web for adding curly/ round corners to DIV containers. The below shows one way to add a curly lower right corner to any DIV on your page. It does so by using relative positioning to slightly offset a DIV to the right and bottom, so its background image, which is a curly image, falls inline with the border of the outer DIV.