Home arrow Style Sheets arrow CSS3 Transitions: Width and Height Properties
STYLE SHEETS

CSS3 Transitions: Width and Height Properties


If you enjoyed the first part of this two-part tutorial on using CSS transitions, you'll love the conclusion. You'll learn how to transition the "width" and "height" properties of a generic HTML container.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
October 12, 2011
TABLE OF CONTENTS:
  1. · CSS3 Transitions: Width and Height Properties
  2. · Using CSS3 transitions with the height property of an HTML element

print this article
SEARCH DEVARTICLES

CSS3 Transitions: Width and Height Properties
(Page 1 of 2 )

If you think that the tasty mix of native shadows, juicy gradients and transformations that come with CSS3 are more than enough to satisfy your appetite for new stuff, take a bite of the specification’s dessert cake. It includes a powerful transition module, which permits you to transition different properties of an HTML element without having to put a single foot in the field of JavaScript. Yummy!

What’s more, if you've read the introductory part of this tutorial, you're already familiar with the inner workings of CSS3 transitions. In that first installment I developed some easy examples, which showed how to transition individually and simultaneously the “color” and “background-color” properties of a sample div.

In both cases, the entire process was reduced to first specifying the name(s) of the property that needed to be transitioned, then the duration of the effect, and finally the type of transition applied to the property. It was that simple, really.

As I just noted, though, it’s really easy to transition distinct properties of a web page element, aside from the “color” and “background-color.” To elaborate on this concept from a practical standpoint, in this final tutorial I’ll be setting up a few additional examples. They will show how to apply some engaging transitions to the “width” and “height” properties of a generic HTML container.

Want to learn the full details of this process? Then don’t waste more time in preliminaries; read the lines to come! 

Altering the size of a web page element: transitioning the “width” property

As I mentioned in the introduction, transitioning the “width” and “height” properties of an HTML element isn’t very different from doing the same with its background and text colors. But I’m getting ahead of myself; the first example that I plan to show you here will be focused on demonstrating how to alter just the element’s width.

To do so, below I created a basic code snippet which performs this specific transition with a trivial div. Take a close look at it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using CSS3 transition (transitioning the 'width' property)</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background-color: #fff;
    font: normal 0.9em Arial, Helvetica, sans-serif;
    color: #000;
}
h2 {
    margin: 0 0 10px 0;
    font-size: 2em;
    color: #585858; 
}
p {
    margin: 0 0 15px 0;
    line-height: 1.3em;
}
/* main wrapper */
#wrapper {
    width: 780px;
    margin: 0 auto;
    background-color: #fff;
}
/* header, main and footer elements */
#header, #main, #footer {
    padding: 20px;
}
/* transitioned element */
.section {
    width: 400px;
    padding: 20px;
    background-color: #e27523;
    color: #000;
    border-radius: 8px;
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: ease-in;
    -moz-transition-property: width;
    -moz-transition-duration: 1s;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-property: width;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease-in;
    -o-transition-property: width;
    -o-transition-duration: 1s;
    -o-transition-timing-function: ease-in;
}
.section:hover {
    width: 600px;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h2>Header section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div id="main">
        <div class="section">
           <h2>Width transition</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
        </div>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
</div>
</body>
</html>

See how easy it is to transition the width of an HTML element with CSS3? I bet you do. In this case, the property has been transitioned from an initial value of 400px to a final one of 600px, but naturally it’s possible to use other sizes and get a similar result. Moreover, if you test the previous web page using a browser that supports transitions, you should see that the target div will expand and shrink horizontally when hovering on it.

And now that you've learned how to apply a smooth transition to the width of a div, I'm going to show you how to achieve a similar effect with the element’s height. Given that, in the next segment I’ll be creating another example, which will perform the aforementioned transition in a few easy steps.

So click on the link below and keep reading.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials