CSS Head

I wanted to build a CSS timeline for the “About” section of my site while using some clean and simple markup. I wanted to avoid using images as much as possible, so I spent a few minutes prototyping some options and came up with a solution using unordered lists. The result is a simple and clean looking timeline with some very straight forward markup. In this article I’ll share my approach to creating a timeline out of CSS and HTML which results in a nice looking, simple timeline…

For those not familiar, form buttons are notoriously difficult to customize because they render differently across browsers and platforms. A few methods for styling buttons are commonly used to make them appear dimensional, uniform, and consistent across browsers, however each has limitations.

Here’s a solution using image sprites and a single block of CSS. It works in in all major browsers including IE versions 6 through 8…

With a second style sheet and minor changes to a page’s HTML, many online stores can offer an excellent mobile shopping experience without creating a second web page or registering a mobile specific domain…

SlickMap CSS is a free simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences…

Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6…

In web design, page elements with the CSS float property applied to them are just like the images in the print layout where the text flows around them. Floated elements remain a part of the flow of the web page. This is distinctly different than page elements that use absolute positioning. Absolutely positioned page elements are removed from the flow of the webpage, like when the text box in the print layout was told to ignore the page wrap. Absolutely positioned page elements will not affect the position of other elements and other elements will not affect them, whether they touch each other or not…

No matter how much we all hate IE6, we never seem to agree on what’s the best way to finally get rid of it. Web designers and developers alike have realized that investing too much time and effort in fixing its quirks is not viable from a business perspective, but they still want to reach that audience…

Use this utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The “Normal” mode should work well in most cases, creating a good balance between the two…

If you are an intermediate in CSS and looking to enhance your CSS knowledge then foums are a great way to boost your skills and connect with other designers and developers. Here’s a list of some of the best CSS Forums to join…

A page element with relative positioning gives you the control to absolutely position children elements inside of it.

To some, this is obvious. To others, this may be one of those CSS “Ah-ha!” moments…