Category: CSS

CSS Animated Progress Bar

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

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.

Easy CSS Tooltip

/ 0 Comments / Category: CSS/Tags: Tooltips

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.

IzzyMenu – Create professional CSS/DHTML Menu

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

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

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

Visit IzzyMenu

SitePoint CSS Reference

/ 0 Comments / Category: CSS/

SitePoint CSS Reference is now open to the public!

The reference contains a bunch of features that make it stand out from the pack — things like cross-browser compatibility charts and user feedback (ala the PHP manual) — to ensure that it is accurate, up to date, and best-practice. Enjoy!

Advanced CSS Menu

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

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.

How to make sexy buttons with CSS

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

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:

Float-less CSS layouts

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

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 Text Wrapper

/ 0 Comments / Category: CSS/Tags: Online Tool

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

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

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.