10 Experimental JS/CSS3 Coding Techniques

Sam Deering

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.
Saying-Goodbye-to-the-overflow-hidden-Clearing-Hack.jpg
Source


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.
Using-Rounded-Corners-with-CSS3.jpg
Source


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.
Rounded-corner-HTML-elements-using-CSS3-in-all-browsers.jpg
Source


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.
IE-CSS3-pseudo-selectors.jpg
Source


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.
Cleaner-Code-with-CSS3-Selectors.jpg
Source


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.
CSS3-+-Progressive-Enhancement-Smart-Design.jpg
Source


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!
Create-a-Letterpress-Effect-with-CSS-Text-Shadow.jpg
Source


8. CSS3 HSL & HSLA


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


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!
CSS3-Gradients-No-Image-Aqua-Button.jpg
Source


10. More on 3D CSS Transforms


Various 3D CSS Transforms in an overview.
More-on-3D-CSS-Transforms.jpg
Source

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.