By stacking and rotating elements in 3D space, you can create some new shapes out of pure CSS. It’s not practical or useful in the least, but it is interesting. These examples work best in Safari, but they will mostly work in Chrome. Check it out: Pure CSS 3D Shapes (remember to click and drag to rotate. Thanks to Dirk Weber‘s traqball.js for that little bit of magic).

What the heck is going on here?

We’re basically stacking or rotating many elements to create each shape.

cylinder

The jist of the cylinder code goes like this:

#cylinder div{
 border: 5px solid blue;
 -webkit-border-radius: 100px;
 height: 100px;
 width: 100px;
 position: absolute;
 top: 0;
 left: 0;
}
#cylinder .slice-2{ -webkit-transform: translateZ(2px); }
#cylinder .slice-3{ -webkit-transform: translateZ(3px); }
#cylinder .slice-4{ -webkit-transform: translateZ(4px); }
#cylinder .slice-5{ -webkit-transform: translateZ(5px); }
#cylinder .slice-6{ -webkit-transform: translateZ(6px); }
#cylinder .slice-7{ -webkit-transform: translateZ(7px); }
#cylinder .slice-8{ -webkit-transform: translateZ(8px); }
#cylinder .slice-9{ -webkit-transform: translateZ(9px); }
...

What we’re doing is setting all of the elements to the same 2D space, and then moving them along the Z-axis to create our cylinder.

Sphere(s)

In the sphere (and watermelon), we take a different approach:

#sphere div{
 border-width: 1px;
 border-color:#900;
 border-style: solid;
 -webkit-border-radius: 100px;
 height: 100px;
 width: 100px;
 position: absolute;
 top: 0;
 left: 0;
 -webkit-transform-origin: center center 0;
}
.sphere .slice-0{ -webkit-transform: rotateY(0deg); }
.sphere .slice-1{ -webkit-transform: rotateY(1deg); }
.sphere .slice-2{ -webkit-transform: rotateY(2deg); }
.sphere .slice-3{ -webkit-transform: rotateY(3deg); }
.sphere .slice-4{ -webkit-transform: rotateY(4deg); }
.sphere .slice-5{ -webkit-transform: rotateY(5deg); }
.sphere .slice-6{ -webkit-transform: rotateY(6deg); }
...

In this case, instead of stacking elements along the Z-axis, we’re rotating them 1 degree each along the Y-axis, thus getting ourselves a nice sphere.

But…why?

Absolutely no reason. I haven’t thought of any practical application, and I doubt there really is any. But it was a good exercise to try to push 3D CSS to it’s limit, and it was fun. That’s reason enough, right there.

As a bonus, if you’re still paying attention - I present to you the pure CSS 3D solar system. Please do us all a favor and open this in Safari (Chrome just isn’t up to it yet). Be warned, this is A) not to scale, and B) likely to slow down and/or crash your browser.

Enter LESS CSS Toolkit. You can import this file at the beginning of your LESS project, and then have access to the following mixins:

What you get:

• Animation
• Background Properties
• Border Image
• Border Radius
• Box Shadow
• Box Sizing
• CSS Columns
• Easy Clear
• FlexBox Properties
• Gradient
• Transform Properties
• CSS Transitions

Animation

.animation(@name, @duration, @iteration-count, @timing)

Usage:

.myElement{ .animation(myAnimationName, .5s, 1, ease-in-out); }

Will result in

.myElement{
  -moz-animation-name: myAnimationName;
  -moz-animation-duration: 0.5s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: myAnimationName;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -ms-animation-name: myAnimationName;
  -ms-animation-duration: 0.5s;
  -ms-animation-iteration-count: 1;
  -ms-animation-timing-function: ease-in-out;
  -o-animation-name: myAnimationName;
  -o-animation-duration: 0.5s;
  -o-animation-iteration-count: 1;
  -o-animation-timing-function: ease-in-out;
  animation-name: myAnimationName;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

back to top

Background Properties

.background-clip(@clip), .background-origin(@origin) and .background-size(@size)

Usage:

.myElement{ .background-clip(padding-box); .background-origin(border-box) .background-size(250px 150px);

Will result in

.myElement{
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;

    -moz-origin-size: border-box;
     -o-origin-size: border-box;
     -webkit-origin-size: border-box;
     origin-size: border-box;

    -moz-background-size 250px 150px;
     -o-background-size: 250px 150px;
     -webkit-background-size: 250px 150px;
     background-size: 250px 150px;
}

back to top

Border Image

.border-image(@img, @number, @repeat: stretch)

Usage:

.myElement{ .border-image(url(img.gif), 25 25 25 25, round round); }

Will result in:

.myElement{
 -moz-border-image: url(img.gif), 25 25 25 25, round round;
    -webkit-border-image: url(img.gif), 25 25 25 25, round round;
    -ms-border-image: url(img.gif), 25 25 25 25, round round;
    -o-border-image: url(img.gif), 25 25 25 25, round round;
    border-image: url(img.gif), 25 25 25 25, round round;
}

back to top

Border Radius

.border-radius(@radius)

Usage:

.myElement{ .border-radius(5px); }

Will result in:

.myElement{
 -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

back to top

Box Shadow

.box-shadow(@shadow)

Usage:

.myElement{ .box-shadow(3px 3px 2px rgba(0,0,0,.3)); }

Will result in:

.myElement{
    -webkit-box-shadow: 3px 3px 2px rgba(0,0,0,.3);
    -moz-box-shadow: 3px 3px 2px rgba(0,0,0,.3);
    box-shadow: 3px 3px 2px rgba(0,0,0,.3);
}

back to top

Box Sizing

.box-sizing(@sizing)

Usage:

.myElement{ .box-sizing(border-box); }

Will result in:

.myElement{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

back to top

CSS Columns

.columns(@columnValue, @gap: normal, @rule: none)

Usage:

.myElement{ .columns(3); }

Will result in:

.myElement{
 -moz-columns: 3;
    -moz-column-gap: normal;
    -moz-column-rule: none;
    
    -webkit-columns: 3;
    -webkit-column-gap: normal;
    -webkit-column-rule: none;
    
    columns: 3;
    column-gap: normal;
    column-rule: none;
}

back to top

Easy Clear

.easyclear()

Applies an updated easy clear fix to the :after psuedo-element (for times when overflow:auto isn't an option)

Usage:

.myElement{ .easyclear; }

Will result in:

.myElement:after{
 visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;
}

back to top

FlexBox Properties

.flexbox(@orient: horizontal, @pack: start, @align: stretch, @direction: normal)

.box-flex(@flex: 1)

Usage:

.myElement{ .flexbox; }
.myElement div{ .box-flex; }

Will result in:

.myElement{
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: start;
    -webkit-box-align: stretch;
    -webkit-box-direction: normal;
    
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: start;
    -moz-box-align: stretch;
    -moz-box-direction: normal;

    display: -ms-box;
    -ms-box-orient: horizontal;
    -ms-box-pack: start;
    -ms-box-align: stretch;
    -ms-box-direction: normal;
    
    display: -o-box;
    -o-box-orient: horizontal;
    -o-box-pack: start;
    -o-box-align: stretch;
    -o-box-direction: normal;
    
    display: box;
    box-orient: horizontal;
    box-pack: start;
    box-align: stretch;
    box-direction: normal;
}
.myElement div{
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    box-flex: 1;
}

back to top

Gradient

.gradient(@startcolor, @stopcolor, @startpoint: center top, @endpoint: center bottom)

This creates a simple, two-color gradient. It defaults to top-to-bottom.

Usage:

.myElement{ .gradient(#000, #fff); }

Will result in:

.myElement{
    background: -webkit-gradient(linear, center top, center bottom, color-stop(0, #000), color-stop(0.5, #fff));
    background: -webkit-linear-gradient(center top , #000, #fff);
    background: -o-linear-gradient(center top , #000, #fff);
    background: -moz-linear-gradient(center top , #000, #fff);
    background: linear-gradient(center top , #000, #fff);
}

back to top

Transform Properties

.transform(@transform)

.transform-origin(@origin)

Usage:

.myElement{ .transform(rotate(45deg)); .transform-origin(center center) }

Will result in:

.myElement{
 -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);

    -moz-transform-origin: center center;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
}

back to top

CSS Transitions

.transition(@transition)

Usage:

.myElement{ .transition(all ease-out .5s); }

Will result in:

.myElement{
 -webkit-transition: all ease-out .5s;
    -moz-transition: all ease-out .5s;
    -o-transition: all ease-out .5s;
    -ms-transition: all ease-out .5s;
    transition: all ease-out .5s;
}

That's all for now

This is a work in progress, so keep track of the project on github as I'll probably be adding to it down the line. Any suggestions are always welcome.

This situation gets even worse when one wants to use some of the fantastic techniques available to us in CSS3, like border radius, drop shadows, and gradients. In the past, we had to use images for all of these design elements, but now it’s possible to have a fancy, shiny button that uses only a <button> element and some css. Well, possible except in IE. Enter CSS3 PIE.

CSS3 PIE allows us to use these new shinies without reservation by inserting VML elements into the page on the fly that mimic the styles we’re going for, and all it takes for us is  to simply include some extra lines in our IE stylesheets. That’s it. It even takes care of transparent PNG support for EI6.

The best part of CSS3 PIE is that, since it’s loaded through the proprietary CSS behavior: property, it is active over all parts of your site, even elements added to the DOM later through javascript. You don’t need to baby it through AJAX events, or really do anything at all except load an IE stylesheet.

I could go over examples, but they’re all on the online documentation, so check it out for yourself, and have some PIE!

A little experiment I built: a word clock using CSS3 transforms and a little Javascript to run the actual clock. Useful? Maybe not. Fun? Definitely.

The code behind it is fairly straight-forward. Let's take a peak:

CSS

The first thing we need to do is set a base set of styles for each arm of the clock.

li{ 
    position: absolute;  width: 150px;
    text-transform: lowercase; 
    -webkit-transform-origin: 0 center;
    -moz-transform-origin: 0 center;
    color: rgba(255,255,255,.1);
    position: absolute; left: 0; top: 0;
}

This is basically saying for each arm, position it at the top of the clock body, and then rotate around left side, so that we have uniform rotations.

Then, for each arm, we set the actual rotation. Here is the HTML for the "hour" arms:

<ol id="hours">
        <li><span>One</span></li>
        <li><span>Two</span></li>
        <li><span>Three</span></li>
        <li><span>Four</span></li>
        <li><span>Five</span></li>
        <li><span>Six</span></li>
        <li><span>Seven</span></li>
        <li><span>Eight</span></li>
        <li><span>Nine</span></li>
        <li><span>Ten</span></li>
        <li><span>Eleven</span></li>
        <li><span>Twelve</span></li>
</ol>

And, the corresponding CSS:

#hours > li{ padding: 0 0 0 80px; }
#hours > li:nth-child(1){ -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); }
#hours > li:nth-child(2){ -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); }
#hours > li:nth-child(3){ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); }
#hours > li:nth-child(4){ -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); }
#hours > li:nth-child(5){ -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); }
#hours > li:nth-child(6){ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); }
#hours > li:nth-child(7){ -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); }
#hours > li:nth-child(8){ -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); }
#hours > li:nth-child(9){ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); }
#hours > li:nth-child(10){ -webkit-transform: rotate(210deg); -moz-transform: rotate(210deg); }
#hours > li:nth-child(11){ -webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); }
#hours > li:nth-child(12){ -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); }

The first line sets the padding, so that each hour arm begins 80px from the center. The rest set up the individual rotations for each arm, at 30 degrees each. The minute and second hands have more padding, and rotate 6 degrees for each arm. The rest of the CSS in the file is used to style the clock, and to show/hide the extra text.

Javascript

All we need to do for the javascript is create a function that sets class="active" on each arm of the current time. So, at 12:45 and 20 seconds, the 12 hour arm, the 45 minute arm, and the 20 second arm have class="active", and the rest are normal. Then we simply set an interval to run every second.

$(function(){
        var hours = $("#hours"), minutes = $("#minutes"), seconds = $("#seconds");
        
        //these are default grabs so that the first time it runs, it doesn't throw an error
        //after that, we use them to cache the current active arm for each group, so that we
        //don't have to waste time searching
        var cHour = $("html"), cMinute = $("html"), cSecond = $("html");
        
        var setCurrentTime = function(){
            //establish what the time is
            var currentTime = new Date();
            var hour = currentTime.getHours() - 1;
            if(hour == -1){ hour = 11; }
            var minute = currentTime.getMinutes() - 1;
            if(minute == -1){ minute = 59; }
            var second = currentTime.getSeconds() - 1;
            if(second == -1){ second = 59; }
            var ampm = "am";
            if(hour > 11){
                ampm = "pm";
                hour = hour-12;
            }
            if(hour == 11){
                ampm = "pm";
            }
            
            //remove the active class, and add it to the new time
            cHour.removeClass("active");
            cHour = hours.children(":eq(" + hour + ")").addClass("active");
            
            cMinute.removeClass("active");
            cMinute = minutes.children(":eq(" + minute + ")").addClass("active");
            
            cSecond.removeClass("active");
            cSecond = seconds.children(":eq(" + second + ")").addClass("active");
            
            $("body").removeClass("am").removeClass("pm").addClass(ampm);
        
        };
        //set the interval to run each second
        setInterval(setCurrentTime,1000);
    
    });

It's a fun little experiment that doesn't have any real value on it's own, but it's a good exercise and as good of an excuse as any to play around with CSS transforms.

The full CSS file can be found here, and the javascript can be found here

It’s built on the mostly awesome but sometimes infuriating ExpressionEngine, and features some stuff that I’m fairly proud of:

• Brand new design, by yours truly
• Javascript/CSS - based fluid layout (check out the home page for the best example).
• The portfolio section features some custom javascript if you’re in a decent browser. Safari, especially, will give you a treat.
• Some cool stuff like Typekit and Modernizr (and of course jQuery and jQuery UI)
• Some fun HTML5 and CSS3 stuff throughout

I’d like to thank Craig Minch for periodically guiding me in the right direction, and my wife Emily for being so awesome and being my Official Design Consultant on this project.

I’ll most likely be posting about different aspects of the site; but please feel free to drop a comment if you’d like to know more about anything in particular.

Take a look around, and enjoy(:

None of this information is new at all, but it's very nice having it all in one place, and you can just have one bookmark for IE6 fixes instead of an entire folder full of them(:

(via Chris Heilmann)

Aside from having a cool-looking website, Vanadium looks like it will ease all of your validation woes, and make it easy and fun (you know, if you're in to that sort of thing) again. Worth checking out / bookmarking / using.

Aside from containing great information, it really is a pleasure to look at (check out those font stacks!). Two chapters are available right now: Detecting HTML5 Features, which is really an in-depth explanation of how Modernizr works, and Let’s Call It A Draw(ing Surface), which contains some good stuff on the canvas element.

This is the sort of thing that makes me want to work on my redesign(:

A large bonus is their support for a whole slew of CSS 3 features. Their developers page for 3.5 serves as a great resource for checking the -moz specific CSS features, as well as a nice refresher on some of the more complicated CSS 3 features in general. This plus Safari 4's ongoing CSS 3 awesomeness opens plenty of doors for doing some cool stuff. With the two main (good) browsers supporting so many CSS 3 features, plus Firefox's astronomical update rate, the time to start using this stuff is now.