CSS Head

A prefab CSS framework can be a great help or serious hindrance. This article will give proper coverage to both sides of the fence by looking at common arguments for and against using a CSS framework…

Building consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly different and almost arbitrary in what can and cannot be done. No where does this become more apparent than when you’re dealing with form elements and the biggest loser of them all in the battle for a standardized look is the infamous Submit button.

As is, the input with the type=”submit” is either too ugly (Firefox), a little buggy (Internet Explorer) or completely inflexible (Safari). The solution for most is to use image inputs and create the damn things ourselves. What we need is something better – something more flexible and meant for designers. Lucky for us, the solution already exists and all it needs is a little love. My friends, let me introduce you to my little friend : the “button” element…

You may not get a Wii, but you can still get your own Wii Buttons with only 2 tags and 1 image and one CSS file. It’s tested and compatible with IE6, IE5.5, IE7, Safari 2, Firefox 2, Opera 9…

I have coded this pager only CSS based navigation/pagination bar. No javascript is required. There are tooltips on hover and previous/next buttons to make navigation easier…

CSS backgrounds are an important part of web design. The property is where you add the colors and images that sit behind your content, which controls much of the aesthetics of your site. Remove your CSS backgrounds and your site will probably be text on a white background. While relatively easy to understand, CSS backgrounds often lead to some questions and confusion when it comes to pulling off specific techniques. Let’s see if we can clear up some of that confusion and then answer a few of those technique specific questions…

Question: Which Global Reset for CSS Should I Use? The short answer is the simplest one possible. The slightly longer answer is that you should reset some styles, but do so with a good reason. The long answer is that the exact CSS reset you choose will depend on the needs of your design…

There’s an awful lot of noise at the moment regarding dropping IE6 and forging ahead with CSS3 properties for the finer touches on web layouts. One such example is adding drop shadows to content blocks. There are countless ways of achieving this, most requiring additional HTML markup and one or more PNG images. Not to mention hacks for IE6 to get render PNGs properly.

CSS3 provides the box-shadow property to achieve just that. Thankfully Safari/Webkit has supported this for some time, and Firefox more recently with Firefox 3.5. Internet Explorer provides a DropShadow filter but this provides a hard-edged shadow unlike its CSS3 counterpart. By combining the Glow and Shadow filters however, we can achieve something that fairly closely resembles the rendered CSS3 shadow…

Writing your first piece of css code can seem really weird if you’re used to working with tables, or just haven’t written code before. In this article I want to talk about 10 different ways you can write proper and clean css code as well as streamline the process and ensure you’re getting the job done as quickly and efficiently as possible…

Rosemary is an open-source modular cascading filter-based modification system for CSS files; or commonly recognized as the acronym, OSMCFBMS4CSS. Your CSS files are run through a series of filters that modify it one after another. These filters can be toggled on/off, rearranged, or all of them disabled completely to give you raw output. It provides a scalable CSS wrapper that you can continue to use no matter what version of CSS is supported (or unsupported)…

What would HTML be without CSS? And what is an index of all HTML elements without an index of all CSS properties? To fix the latter I indeed proudly present a continuously updated index of all properties specified in CSS 1, CSS 2, CSS 2.1, and even CSS 3, including all initial values as well…