CSS | Free web design resources for designers & web developers | Page 3 of 6

CSS Sprite Navigation Generator: Nav-o-Matic Free Online Tool

/ 0 Comments / Category: CSS, Online Tools/Tags: Menus

Nav-o-Matic is a free online tool for creating navigation sprites in a few simple clicks.

You will need an image with 2 rows (no vertical navigation yet) like this one, then lay down some guides like in Photoshop, define the CSS options and Nav-o-Matic will generate all the code you’ll need to get your navigation working.

There is a lot more functionality planned, but for now, Nav-o-Matic only support for 2 states: Normal and hover, hover also acts as the active/on state.

Free CSS Templates – TemplateMo

/ 0 Comments / Category: CSS/Tags: css layouts, css templates

TemplateMo.com – providing 180+ high quality and free CSS templates for your personal or commercial websites.

All css templates are absolutely free to download, modify and apply for your websites without any restriction. All CSS templates are W3C standard compliant XHTML/CSS website layouts.

Cross-Browser Javascript/CSS Buttons – Simply-Buttons v2

/ 0 Comments / Category: CSS, Javascript/Tags: Menus

Simply-Buttons v2 – learn how to create really nice cross-browser buttons for your sites. You can also download the source CSS and Javascript files with a few button samples.

The buttons:

look and behave the same way in every browser and operating system.
fit to any text size.
come with 3 states: inactive, active and hover.
do not need the javascript to work, they work with just the CSS.

The buttons are created with pure CSS and will work with just CSS. However they look a little better with some Javascript enhancements.

Tested in IE6, IE7, Firefox(PC/MAC), Safari, SafariMobile and Opera(PC/MAC).

Remote Linking – Multiple Clickable Areas with CSS

/ 0 Comments / Category: CSS/Tags: css techniques

Remote Linking – a single anchor link has multiple clickable areas in different locations.

It can be used for pretty neat effects and requires nothing but CSS.

View Example

Vimeo-like Top Menu

/ 0 Comments / Category: CSS/Tags: Menus

Vimeo-like Top Menu – a nice tutorial with source files on how to create Vimeo-like top navigation.

Like at Vimeo, when you hover search box, it offers different search options that you can choose and narrow your search. Some browser compatibility is missing, but still a good resource to start with.

Vimeo-like top navigation demo.

Styled Menus – Free CSS Menus

/ 2 Comments / Category: CSS/Tags: Menus

Styled Menus – Free CSS Menus that are cross browser compatible and with valid w3c code. All navigations has been tested in IE6, IE7, Firefox, Opera, Safari and Chrome.

Currently, there is 21 Free CSS Menus available for download.

CSS Stacked Bar Graphs

/ 0 Comments / Category: CSS/Tags: Graphs

Learn how to create Stacked Bar Graphs – using just well formed markup and CSS.

Solution is based on CSSGlobe Pure CSS Data Chart.

View DEMO.

A Circular CSS Menu

/ 0 Comments / Category: CSS/Tags: Menus

Nice looking Circular CSS Menu – using background images and mouseover text to give a brief explanation of each icon.

Tested in IE6, IE7, Firefox, Opera, Safari (PC) and Google Chrome.

You may use this method on your personal and commercial web sites without seeking permission from CSSPlay.

To get the CSS Menu script you need to view the page source (mouse right click / view source).

Free Cross-Browser CSS Drop-Down Menu Framework

/ 0 Comments / Category: CSS/Tags: Menus

Free CSS Drop-Down Menu Framework – Easily transformable, Cross browser and Super fast Drop-Down Menu Framework.

Creating a new drop-down menu means creating only a new theme since structure is permanent. What is more, creating a new theme is easy with available templates and takes 10-15 mins.

Minimal JavaScript code only for IE 6 or earlier. Can be used with popular JavaScript libraries Jquery or Scriptaculous. Everything else is pure CSS.

Configurations are available for IE 5 or later, Firefox 1.5 or later, Opera 7 or later, Safari 2 or later.

MenuMatic – a Dynamic Drop Down Menu System

/ 1 Comment / Category: CSS, Javascript, MooTools/Tags: Menus

MenuMatic takes a sematic ordered or unordered list of links and uses MooTools 1.2 to turn it into a dynamic drop down menu system (horizontal or vertical), with enhanced usability and flair.

For users without javascript, it falls back on a CSS menu system based on Matthew Carroll’s keyboard accessible flavor of Suckerfish Dropdowns.