Tags
Related posts to css3
-
3D Transforms
One of the more eye catching additions to the CSS3 spec is the introduction of 3d transforms. These allow elements to be manipulated and controlled within a 3d space, allowing for a wider range of transformations and transition to happen. Still very much an emerging standard and currently only supported in Safar 4 and up, Chrome 12 and iOS, with IE10 promising future support then other browsers will surely add support over time. Despite this lack of widespread support, there's still no reason to put off designing with them now, and by utilising Modernizr, we're able to target those browsers without support for 3d transforms and provide an appropriate alternative.
I tested this in Chrome 13 and to ensure the full effect I had to apply a border to the "facing" element to ensure that it rendered consistently in Chrome. It seems a weird bug and one I'm sure the Chrome team are working on to resolve.
Modernizr is a small JavaScript library that detects the HTML and CSS3 capabilities of browsers, and applies a class to the html element indicating the level of HTML5 and CSS3 support it has. It adds no functionality at all and purely detects support with the adding of appropriate classes
-
CSS powered slider with animate.css
The CSS3 spec has brought us web designers a lot of great stuff - typographic control, gradients, and image-free shadows to name but a few. One of the more experimental properties that the new specification brings is CSS animation.
The greatest thing about CSS animation (in my opinion, at least) is that it's hardware accelerated. Rather than putting the bulk of the work on the CPU of the user's computer, (like JavaScript animation does) CSS animation taps into the graphics chip for it's power. In other words, it's pretty darn good. It also means that we can leave JavaScript to the things it does best - logic, AJAX queries, and other smart stuff - rather than relying on it for purely visual events. It's a little like the way we used to use JavaScript for rollover effects on images - it's pretty much all CSS now.
There have been a bunch of smart people doing things with CSS animation, and it's evolving pretty quickly. I took it upon myself to create a library of pre-written CSS animations called animate.css, (inventive name, I know) and here I'll go through the process of building a CSS powered slider with a jQuery fallback.
The Ingredients
We won't need a lot for this sl