CSS3

Not so long ago, IE6 was the over-dominant browser on the Web. Technically, the Web was full of works-only-in-IE6 web sites and the other browsers, the users were crying. IE6 is dead, this time is gone, and all browsers vendors including Microsoft itself rejoice. Gone? Not entirely… IE6 is gone, the problem is back.

A fairly common technique employed when display data in tables is to trim a cell’s text content when it is over a certain amount of characters to keep your table rows & columns relatively the same size. CSS3 allows us to do this, but, due to the nature of the way the DOM is rendered, you can only trim a value to be in one-line. But what if you want control over where the trim occurs? This is key to doing a multi-line trim. It just takes a bit of javascript magic.

We spoke to Håkon Wium Lie, CTO, Opera and spoke about the latest trends in open web standards.

The Multi Column Layout Module has been introduced to help us create columns quickly and easily using CSS3 only. In this tutorial I’m going to be taking a look at some of its properties and demonstrate them through a series of examples.

Advancements like high-performance compiled JavaScript and hardware-accelerated rendering of HTML5 and CSS3 in Internet Explorer 9 and 10 allow Web developers to create richer and richer experiences. Two related features, CSS3 Transitions and CSS3 Animations, give Web developers a declarative way to add personality to Web page interactions easily.

This blog post describes these two features as implemented in IE10 in the Windows Developer Preview and Windows 8 Metro style apps written in HTML.

In this article, we’re going to examine the CSS cursor property which, as you’d expect, allows you to change the cursor style as the mouse moves over an element. It’s become increasingly important for interactive web applications…

Earlier this month, a new specification, Filter Effects 1.0, was released. It presents some exciting new Photoshop-like effects that we can use in the browser. Even better, Webkit has already landed support (in the nightlies)!

In this short tutorial, I’ll provide both a basic review (or introduction) to the basic concepts of responsive design while building a handy CSS3 Media Query Reporter which you may find handy in your future design projects. (I know I have.)

Then, using that reporter, we will take a first step toward converting a fixed-width grid system into a fluid and responsive grid system.

Many of you have probably seen my CSS3 patterns gallery. It became very popular throughout the year and it showed many web developers how powerful CSS3 gradients really are. But how many really understand how these patterns are created? The biggest benefit of CSS-generated backgrounds is that they can be modified directly within the style sheet. This benefit is void if we are just copying and pasting CSS code we don’t understand. We may as well use a data URI instead.

Drop caps have been around for years in the print industry, but they are still pretty rare in the web world despite the :first-letter selector having been around for a fair few years. Let’s take a look at how we can create a cool drop cap for our web designs and spice it up with some stylish CSS3 text-shadow effects.