Visual-Blast Media

Tutorial on how to slice up the menu design and put them together with CSS. Code an advanced (un-typical) list menu utilizing the CSS position property.

Create pretty looking textual buttons (with alternate pressed state) using CSS.

Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day. Here’s what you’ll get:

A CSS layout that does not rely on DIV, FLOAT, CLEAR nor structural HACK! FLOATs are a source of many browser bugs (mainly IE bugs) which make FLOAT constructs difficult to master across browsers… and easy to break.

Article demonstrates an original solution that addresses semantics, construct, and design issues to deliver robust layouts.

The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want.

There is three different ways to apply the wrapping shape to your site. Each has it’s benefits/drawbacks . All you have to do is to copy the generated code to your website.

Oval CSS buttons by Dynamic Drive. These buttons use the sliding doors technique of CSS, plus two sliced background images with “on” and “off” states, to create flexible oval shaped CSS buttons.

Each button can accommodate text of variable widths and supports a hover effect when the mouse rolls over it.

The only limitation is the height of the button, which is fixed based on the background image’s height.

CSS technique of coding a restaurant menu, a well documented, useful and practical use of CSS.

How to Size Text in CSS by Richard Rutter.
A best practice for sizing type and controlling line-height.

Attribute selectors in CSS. Have you looked at other people’s style sheets lately? Were you baffled to find square brackets in the CSS code? If so, this article might be of interest to you.

Full Article

A list of high quality CSS – based layouts and templates you can use for your personal and commercial projects. License agreements are changing all the time, just check each layout and template for the copyright requirements before use.

CSS Layouts

• Layout Gala- A set of 40 professional CSS layouts, each with valid CSS and HTML, without hacks nor workaround and a good cross-browser compatibility.
  
• CSS Layouts - another great collection of CSS layouts.
• Dynamic Drive CSS Layouts – two column, three column, fixed, liquid …
• Nice and Free CSS Layouts – 12 free CSS layouts.
  
• Strictly CSS – 10 css layouts.
• Maxdesign - a range of CSS page layouts, including 2 column and 3 column layouts - free to use and abuse as needed.
• CSSplay - Stu Nicolls presents dozens of free professional layouts. Just check each page for the copyright requirements before use.
• ThreeColumnLayouts, by CSS Discuss - Collection of 3-column-templates.
• CSS Intensivstation - css layouts and templates for Flux CMS.
• Code-Sucks - 5 web templates, 53 Fixed width CSS Layouts and 42 Faux Column CSS Layouts.
• CSS Tinderbox - CSS/XHTML templates that web designers/developers can use as the foundation for their own projects.
• Jimmy Lin - 8 simple CSS/XHTML templates.
• Little Boxes - 16 Layouts
  
• Ruthsarian - Free CSS layouts and CSS-based drop-down menus.
• Mitchbryson – 8 layouts.
• TJK Design - 8 layouts.
• Bluerobot - The Layout Reservoir.
• csscreator - CSS Layout Generator. Generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.

CSS Templates

• Open Source Web Design - OSWD - free web design templates. Currently 2080 free designs!
  

>>> Continue reading …

A PVII solution that will help you produce a quick menu without some of the limitations found in some other “pure” CSS menus.

Example

Full article