FranMich Logo

CSS Tutorial - Lesson 6

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.

What is CSS3? The biggest change that is currently planned with CSS level 3 is the introduction of modules. The advantage to modules is that it (supposedly) allows the specification to be completed and approved more quickly, because segments are completed and approved in chunks. This also allows browser and user-agent manufacturers to support sections of the specification but keep their code bloat to a minimum by only supporting those modules that make sense. For example, a text reader wouldn't need to include modules that only define how an element is going to display visually. But even if it only included the aural modules, it would still be a standards-compliant CSS 3 tool.
The CSS Box Model The CSS box model describes the boxes that are formed around elements of content in a Web page. Every element in a Web page is in a box or is a box, even if it's an image of a circle. The boxes on Web pages are constrained by rules defined by the box model.
CSS Box Properties: Think INSIDE the Box "Think Outside the Box" - this has become such a cliche in business, but in CSS you want to stay inside of it. All elements in HTML generate a rectangular box. This is called the element box. This box describes the amount of space the element and its properties occupy within the layout of the document.
Box Model Hack The CSS box model defines the width and height of a box created with CSS as the width or height of the content area of said box. If the width property is left off, then the box is as wide as the content within it. The same goes for the height. If padding, borders, or margins are added to the box, they are added outside of the content width or height.
Make Things Fade In and Out with CSS3 Learn how to use CSS3 properties to create fading effects on your images, buttons and more.
CSS3 Shadows: Box Shadows and Text Shadows Learn how to create shadows on text and other elements with CSS3. This article explains how to use the CSS3 properties box-shadow and text-shadow and their browser extensions.
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.
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.
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.
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-(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.