Explore the Articles

30 Pure CSS Alternatives to Javascript

With all the cool things that surround Javascript (especially with jQuery) its easy to forget that it’s possible to push pure CSS (with a touch of HTML) into an all singing and all dancing interactive site, with absolutely no scripting at all.

The pure CSS techniques, outlined in this article, are neither new nor are they ground-breaking. What they do offer is CSS solutions to what would typically and traditionally be associated with Javascript, and as a demonstration that they do exist and could be quite easily used.

Child and Sibling Selectors

I think everyone understands the basic decendent selector, but let’s do a quick overview of the other selectors in this style: the child combinator, the adjacent sibling combinator, and the general sibling combinator.

Amazing CSS3 Techniques You Can’t live Without

CSS3, along with HTML5, is quickly shaping up to be one of the most exciting and useful Web technologies in years. In this article, I will be explaining some of the new graphics-rich techniques and properties available with CSS3.  You will learn what is likely to be approved as part of the final spec, what is still a work-in-progress, and how to deal with cross-browser incompatibilities and lack of support in older browsers.

Coding Up a Web Design Concept into HTML & CSS

In this walkthrough we’ll go through the process of converting the design concept from PSD document right through to completed HTML and CSS mockup, complete with clean and valid code, a few touches of CSS3 and some quick fixes to help out old IE6.

In Depth CSS Part 4: New CSS3 Styles

In the fourth, and last, part of our In Depth CSS series, we’ll talk about several new CSS3 features – from fancy styling to mobile Webkit development.

CSS In Depth Part 3: All About Text

This week in part 3 of our CSS In Depth series, we’ll discuss something more visual and design related – typography! CSS2.1 provides for a lot of ways to use fonts creatively, and with CSS3, we’ll come even closer to full design control over our typography!

CSS In Depth Part 2: Floats & Positions

Last week, in the first of our CSS In Depth post, we discussed the difference between paddings and margins, and what the box model is. This week we’ll be discussing positions and floats as well as what the differences are and when it’s best to use them. Both floats and positions deal with the relationship of elements between each other. Without these, padding and margins would be ineffectual.

Create Reusable Button Classes with CSS and Background Images

With CSS3 on the slow rise and Internet Explorer 6 on the (painfully slow) downfall, most of the time we as developers and designers are forced to use individual images for each button if we want cross-browser friendly, good looking buttons. Especially when it comes to ecommerce, this can sometimes add up to 20+ images. You’ve got buttons for Login, Checkout, Express Checkout, Update, Remove etc.

CSS In Depth: Margins, Padding & The Box Model

In the first of the CSS In depth series, we’ll be talking about margins, padding and the box model. Margins and padding are some of the most widely used styles in CSS, but are often the source of frustration in cross-browser compatibility.

Custom Checkbox and Radio Buttons Using CSS

In my never ending quest to find weird and wonderful ways to abuse CSS and all its little intricacies, I have come up with a pretty good way of using CSS to create custom radio and checkbox inputs without JavaScript, that are accessible, keyboard controlled, don’t use any hacks and degrade nicely in non supporting browsers. The journey wasn’t easy and I was on the brink of filing it in the “to crazy” folder, never to be seen again. Luckily I had a brain wave that paid off and actually allowed this to be a very viable solution that degrades beautifully and works in 80% of the browsers. This is my story.