10 Experimental JS/CSS3 Coding Techniques

As we’ve promised, here’s another set of CSS3/JS coding techniques that can strongly improve user experience, improve designer’s workflow and replace dirty old workarounds that we used in Internet Explorer 6 & Co. Please note that most techniques presented below are experimental, and many of them are not pure CSS3-techniques as some do use jQuery or other JavaScript-libraries. Worth a look though…

Related Posts:

1. Saying Goodbye to the overflow: hidden Clearing Hack


I’m now saying goodbye to overflow: hidden and the deciding factor for me is CSS3. Specifically box-shadow. At least in the sense that box-shadow was the first property I noticed being negatively impacted by the use of overflow: hidden. Like the positioned child elements mentioned above, box-shadow can get clipped when the parent (or other ancestor) element has overflow applied. And there are several other things to consider as we move forward using more CSS3. Text-shadow and transform can also potentially be clipped by overflow: hidden.

2. Using Rounded Corners with CSS3

As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. This means less headache and time spent working out alternatives for each browser.

3. Rounded corner HTML elements using CSS3 in all browsers

This is a behavior htc file for Internet explorer to make CSS property ” border-radius ” work on all browsers. At present, all major browsers other than IE shows curved corner by adding 4 lines of CSS.

4. IE CSS3 pseudo selectors

Allows Internet Explorer to identify CSS3 pseudo-class selectors and render any style rules defined with them. Simply include the script in your pages and start using these selectors in your style sheets — they’ll work in IE.

5. Cleaner Code with CSS3 Selectors

In this tutorial I’m going to take a look at some of the ways our front and back-end code will be simplified by CSS3, by looking at the ways we achieve certain visual effects now in comparison to how we will achieve them in a glorious, CSS3-supported future.

6. CSS3 + Progressive Enhancement = Smart Design

Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before.

7. Create a Letterpress Effect with CSS Text-Shadow

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!


A tutorial on using the HSL & HSLA declarations along with the quick + / – guide to which browsers currently support the herein effect.

9. CSS3 Gradients: No Image Aqua Button

Aqua button with no images! Back in the time when Mac OS X was first announced, there’re a plenty of web tutorials that describe how to create the sexy aqua button with Photoshop, and now I can show how to create one with CSS!

10. More on 3D CSS Transforms

Various 3D CSS Transforms in an overview.