CSS3

In case you weren’t aware, CSS animations are awesome. They’re smooth, less taxing than JavaScript, and are the future of node animation within browsers. Dojo’s mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application’s JavaScript footprint. One of my favorite effects is the spinning, zooming CSS animation. Let me show you how it’s done!

We are extremely excited to be able to provide vendor-prefixed support of CSS3 Gradients in Internet Explorer 10 Platform Preview 1! CSS3 Gradients comes from a subsection of the CSS3 Image Values and Replaced Content specification, which is still in Working Draft status. Using CSS markup, a gradient image is generated by the browser and can be rendered where CSS images are permitted. In Platform Preview 1, CSS3 gradients can be used as a background-image.

If your icon or button has insufficient text or none at all, or it just needs some additional explanation, then you surely need a tooltip for it. Why’s that? Because, as they have proved till now, tooltips can help you improving your website usability.

Having said that, in this article you’ll learn how to create your own CSS tooltips: no images, no javascript.

CSS3 is a wonderful thing, but it’s easy to be bamboozled by the transforms and animations (many of which are vendor-specific) and forget about the nuts-and-bolts selectors that have also been added to the specification. A number of powerful new pseudo-selectors (16 are listed in the latest W3C spec) enable us to select elements based on a range of new criteria.

CSS 3 media queries make building a mobile version of your site incredibly simple — just add a few lines of CSS to handle the smaller screen size of tablets and phones. The only problem is that not every web browser understands @media queries, and in those that don’t your elegant, responsive design is going to fall apart.

When IE9 was released, I was really happy to see all the great CSS3 features it supported. 2D Transforms, advanced selectors, border-radius, rgba/hsla colors, WOFF fonts … the list goes on. And no polyfills required! I was, however, disappointed that IE9 doesn’t support two of my favorite CSS3 effects: border-image and text-shadow. I’m sure that I will notice other CSS3 effects missing over time, but these are two features that I currently find incredibly useful. This article will deal with text-shadow: how it works in browsers that support it, and strategies we can use today to emulate some of its functionality in IE. Although the solutions I present here are based on IE’s Visual Filters, and that some articles like this one by Neil Crosby have looked into it as a solution, I present here some new information – how to make them work correctly with Windows Standard and ClearType font-smoothing and how to write the final CSS that won’t break any browser.

Now, since CSS3 “hit the charts”, you don’t need Adobe’s design tool to add a drop shadow or an inner shadow to a box.

CSS3 can help you create beautiful shadows without actually needing Photoshop anymore.

I finally got around to doing what I wanted to do for quite a few months: Create a gallery with all the basic patterns I was able to create with CSS3 gradients. Here it is…

In this free six minute video from Think Vitamin, you’ll learn about all of the new attribute selectors in CSS3, allowing for more fine grained control of your page styles.

Web design is an industry where things change very fast. Over the last year or two, CSS3 has taken web design potential to a new level. It’s not that many more features are available in this latest iteration of the CSS specifications, it’s that CSS3 makes it easier to work with things that typically involved more work, more technologies, and more software. For example, basic animation and dynamic image capabilities such as color gradients were previously only possible with JavaScript, Flash, and image editing software like Photoshop. Not anymore.