CSS3

With the rise of both very large screens and mobile devices, web developers have to be able to create websites that display correctly and look good whatever the device is. Sure, you can use good old techniques like fluid layouts, but I’ve got something better to show you today. This tutorial will teach you how you can create an adaptable website layout using CSS3.

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.

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.

In this article, we’re going to discuss the issue of columns, which have been introduced in CSS3. While considering the influence of print on web design, we’ll look at the issue of how usability can potentially be impacted by some potential uses of CSS columns.

A breakdown of which CSS3 features are supported in which browsers.