JavaScript Liquid FX - VAIO Logo Demo - by Andrea Giammarchi. 5 Techniques to Acquaint You With CSS 3 - Nettuts+ CSS is a well-known, widely used language to style websites. With version three in the works, many time-saving features will be implemented. Although only the most modern browsers currently support these effects, it's still fun to see what's around the corner! In this tutorial I'll show you five techniques. 1: The Basic Markup Before we start with this tutorial, let's create the basic markup that we will be working with throughout the tutorial. For our xHTML, we'll need the following div elements: #round, to apply rounded corner CSS3 code on.
For this, our xHTML will be: In our HTML document, we've created some div elements, with the IDs stated above. As you can see, we've given all div tags a width and height of 300px each. 2: Rounded Corners It can be a hassle to create rounded corners. This problem can be easily solved with CSS3, with the property called “border-radius”. We do this like so: Once you've created the div, refresh the page. Back to our code, "border-radius" needs a value. 11 Classic CSS Techniques Made Simple with CSS3 - Nettuts+ We've all had to achieve some effect that required an extra handful of divs or PNGs.
We shouldn't be limited to these old techniques when there's a new age coming. This new age includes the use of CSS3. In today's tutorial, I'll show you eleven different time-consuming effects that can be achieved quite easily with CSS3. I'm sure you've heard of CSS in general. CSS3 isn't that much different, in terms of syntax; however, the power of CSS3 is much greater. As you'll see in these eleven techniques, you can have multiple backgrounds, dynamically resize those backgrounds, border radiuses, text shadows, and more! Here's what the official (or at least, what I consider official) website of CSS3, css3.info, has to say about CSS3: CSS3 is the new kid in the stylesheet family. Here are the 11 techniques that I'll be showing you how to recreate with CSS3. Probably my favorite on of this list, rounded corners provide a developer with so many options.
View the demo. I'm using the dropShadow plugin. #57: Using CSS3.