Visual-Blast Media

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

‘CSS’ Articles

CSS Menu Generator - Create CSS Menus in 3 easy steps

CSS Menu Maker - create custom, cross browser compatible website menus. Menu generator makes it easy to create custom CSS menus without having to know HTML and CSS in 3 easy steps.

  • Step 1: Choose a menu to either customize or download the source code.
  • Step 2: Customize the headings, links, and color of your CSS menu.
  • Step 3: Download the HTML, CSS, and images

css_menu_maker.jpg

        |  Subscribe to RSS

CSS Animated Progress Bar

CSS Animated Progress Bar - A simple demonstration of how you can create animated progress bar using pure css. The trick is very simple. We need 3 elements, one container and 2 nested elements. Take a look at  demo.

css_animated_progress_bar.gif

        |  Subscribe to RSS

Easy CSS Tooltip

Easy CSS Tooltip - the easiest way to show tool tips. If you need a really simple and basic Crossbrowser Tooltip on your website, this less then 1kb tooltip CSS script might be the one for you (3lines css, 1line html).

If you want to display a tooltip for a link, just add the class “tooltip” to the link and write your Tooltip Text in a span tag within the a tag - thats it.

easy_css_tooltip.jpg

        |  Subscribe to RSS

IzzyMenu - Create professional CSS/DHTML Menu

IzzyMenu is a Free on-line CSS Menu Builder. Choose from dozens ready styles or create your own menu style.

izzymenu_online_tool_css_menus.jpg

If need for a submenu of the main menu you can add it in a very simple way. You can also save all menus you create and browse all menus created from the other users. Customize the font, width, height,  background, border, padding, margin, link, hover state and more

izzmenu_css_menu_builder.jpg

Visit IzzyMenu

        |  Subscribe to RSS

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

        |  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

        |  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

        |  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

        |  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

        |  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

        |  Subscribe to RSS

Page 1 of 212»

Translations

English flagItalian flagGerman flagSpanish flagFrench flagPortuguese flagRussian flag