Visual-Blast Media

Free web resources for designers and web developers | Tutorials, Scripts, Graphics, Photoshop, CSS

‘CSS’ Articles

Advanced CSS Menu

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.

css-menu3.jpg

Digg it   Add to Del.icio.us  Stumble it   |  Subscribe to RSS

How to make sexy buttons with CSS

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:

css_buttons_2.jpg

Digg it   Add to Del.icio.us  Stumble it   |  Subscribe to RSS

Float-less CSS layouts

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.

css_float_layouts.jpg

Digg it   Add to Del.icio.us  Stumble it   |  Subscribe to RSS

CSS Text Wrapper

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.

CSS Text wrapper

Digg it   Add to Del.icio.us  Stumble it   |  Subscribe to RSS

CSS Oval buttons

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 Oval buttons

Digg it   Add to Del.icio.us  Stumble it   |  Subscribe to RSS

CSS - A Recipe for Success

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

CSS - A Recipe for Success

Digg it   Add to Del.icio.us  Stumble it   |  Subscribe to RSS

How to Size Text in CSS

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

CSS Best practice for sizing type and controlling line-height

Digg it   Add to Del.icio.us  Stumble it   |  Subscribe to RSS

Hip to Be Square: Attribute Selectors in CSS

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

Digg it   Add to Del.icio.us  Stumble it   |  Subscribe to RSS

High Quality and Free CSS Layouts and Templates (0-38)

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.
    layout_gala.jpg
  • 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.
    niceandfreecsstemplates.jpg
  • 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
    little_boxes.jpg
  • 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

Digg it   Add to Del.icio.us  Stumble it   |  Subscribe to RSS

CSS Express Drop-Down Menus

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 

Digg it   Add to Del.icio.us  Stumble it   |  Subscribe to RSS

Page 2 of 3«123»

Translations

English flagItalian flagPortuguese flagGerman flagFrench flagSpanish flagRussian flag