1. Technology

CSS3 Tutorials

CSS3 adds a lot of fun new features to your websites. And these tutorials will help you learn about CSS3 and how to add these features.

Make Things Fade In and Out with CSS3
Learn how to use CSS3 properties to create fading effects on your images, buttons and more.

What is CSS3 Opacity?
Opacity is a method of making elements transparent in CSS 3. It is not supported in all browsers, but there are ways to get around it in the browsers that don't support it.

How to Create a Background Image that Scales with the Browser Window
Learn how to use the CSS3 property browser-size to add background images to your designs that scale to fit the window, whether the window is small or large.

Background-size Examples
See examples of how the same web page displays in large and small browser windows with the background stretched and scaled to fit.

How Do you Stretch a Background Image in a Web Page
Stretching a background image seems like something that would be fairly easy to do, but until CSS 3 properties are more widely supported, we have to use a workaround.

Positioning and Clipping Background Images with CSS3
Learn how to use two new CSS3 properties: background-clip and background-origin. This article will help you understand the way these two properties work and how they work together.

CSS Pseudo-Classes and Pseudo-Elements
CSS 2.1 introduced the idea of pseudo-classes and pseudo-elements as ways to style elements of the document that weren't explicitly defined by a position in the document tree. These pseudo-classes and -elements give designers more flexibility in how they style various parts of their web pages.

Rounded Corners with CSS 3
Rounded corners just got a lot easier with CSS 3. Now there are 5 new CSS properties that you can use to create rounded corners on your elements. And if you use the browser-specific options, you can create rounded corners in Firefox, Safari, Opera, Chrome and Internet Explorer 9.

Marquee in the Age of HTML5 and CSS3
The MARQUEE element creates scrolling content blocks, but it was never a valid HTML tag. Now, you can use CSS3 (and vendor prefixes) to get scrolling effects on your text, and with CSS you have more control over the marquee.

How to Use nth-child(N) Expressions
CSS 3 provides a very powerful way of selecting child elements with the nth-child selectors, but these pseudo-classes can be very confusing to use. Learn how these expressions work and how you can use them on your pages.

How to Make a Zebra Striped Table with CSS 3
Zebra striped tables are easy to create using CSS 3 they just require one CSS style.

How to Alternate Floated Images with CSS 3
With CSS 3 you can arange your images so that they appear on alternating sides of the content. It just requires two CSS styles, and no change to your HTML.

CSS3 Media Queries
CSS3 media queries make it possible to define very precisely the devices you want to receive the styles in your style sheets. This means that you can design a style sheet to handle small devices like smart phones, a second style sheet for tablet devices, and a third for web browsers on large and small monitors.

CSS Transparency in Nearly All Browsers
CSS can help you add transparency to your web pages with the opacity property. But while opacity support has been in browsers since IE 5 and other old browsers, the trick is getting it to work. Learn the browser extensions you need to add transparency to nearly every browser.

Multi-column Layout with CSS3
This tutorial explains how to use CSS3 to create multiple columns, adjust the space between them, and even add rule lines separating the columns. You will be surprised how easy multi-column layouts are with CSS3.

CSS3 Linear Gradients
Learn how to create gradients for backgrounds using CSS3. Gradients are a color technique where one color gradually fades into another color. Before CSS3 if you wanted a gradient, you needed to create a tileable graphic to use as the background for your element. But now you can use a CSS3 style property (and appropriate browser extension...

Multiple Backgrounds in CSS3
CSS3 makes it possible to layer background images on top of one another on the same element. This article explains how to add layered background images with CSS3 and gives tips for using them.

CSS Transitions
CSS3 adds a lot of features for dynamic websites. Transitions are the change between one state and another. Until CSS3 if you created a rollover image, for example, you could only create two states on or off. A transition could only be added with some type of scripting language. CSS3 adds transitions right into the web page so you don't need to...

CSS Transformations
Learn how to transform your HTML elements to make them look different on the page using just CSS. You can rotate, skew, scale, and translate (move) your elements using the CSS3 transform property.

CSS Transformations versus Transitions
There are two CSS3 properties that people confuse. They are very different, but if you use them in the wrong place they won't work. Learn the difference between CSS3 transitions and transformations.

Glow Effects with CSS3
CSS3 box shadows give you the ability to create outer glow effects that used to have to be done with Photoshop or another graphics program. This tutorial shows you how to create an outer glow on an element using CSS3 and no images.

How to Create Cool Buttons Using Just CSS3
Learn how to create fancy buttons using just CSS3 features and no images.

CSS3 Borders
CSS provides a lot of ways to dress up borders, and CSS3 adds a bunch of new features to help you use graphics and adjust your borders in other ways.

How to Use Text-Shadows to Make More Interesting Text
The CSS3 text-shadows property does more than just create shadows on your text. This article shows you some interesting effects you can get with the text-shadow property. And they work now in all modern browsers.

©2014 About.com. All rights reserved.