Home arrow Style Sheets arrow Page 2 - 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 - Using CSS3 transitions with the height property of an HTML element
(Page 2 of 2 )

I'm not dismissing the importance of all the examples developed so far, but in my personal opinion, transitioning the height of a block-level element can be extremely useful. The process allows you to easily create animated drop-down menus without having to use jQuery or any other JavaScript library.

For the moment, however, I’d like to keep the complexities of a project like this out of this article’s scope. So, pay attention to the following code sample, which applies this type of transition to a single div: 

<!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 'height' 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;
    height: 200px;
    padding: 20px;
    background-color: #e27523;
    color: #000;
    border-radius: 8px;
    transition-property: height;
    transition-duration: 0.5s;
    transition-timing-function: ease-in;
    -moz-transition-property: height;
    -moz-transition-duration: 0.5s;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-property: height;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in;
    -o-transition-property: height;
    -o-transition-duration: 0.5s;
    -o-transition-timing-function: ease-in;
}
.section:hover {
    height: 300px;
}
</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>Height 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>

Definitely, the above example is fairly straightforward, since it looks quite similar to the one that you learned in the preceding segment. In this case, the transition has been applied to the “height” property of the target element. If you try out the previous web page on your own browser, you should see the selected div expanding and shrinking alternately when you're hovering on it, but this time in a vertical direction.

So far, so good, right? At this point, you've seen for yourself that individually transitioning the height and width of an element is a breeze to achieve. But, if you’re anything like me, you’re wondering if it’s possible to perform a transition with the two properties at the same time. The answer is a resounding yes! And to prove that my claim is true, in the forthcoming section I’ll be creating a final example. It will implement this “parallel” transition in a snap.

To see how this will be done, just keep reading.

Simultaneously transitioning the “width” and “height” properties of a target element

As I promised in the section that you just read, I’d like to finish this tutorial by showing you how to simultaneously transition the “height” and “width” properties of the same target div defined previously. As you may have guessed, the implementation of this parallel effect is a no-brainer process, which the following code fragment demonstrates: 

<!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' and 'height' properties)</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;
    height: 200px;
    padding: 20px;
    background-color: #e27523;
    color: #000;
    border-radius: 8px;
    transition-property: width, height;
    transition-duration: 0.5s;
    transition-timing-function: ease-in;
    -moz-transition-property: width, height;
    -moz-transition-duration: 0.5s;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-property: width, height;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in;
    -o-transition-property: width, height;
    -o-transition-duration: 0.5s;
    -o-transition-timing-function: ease-in;
}
.section:hover {
    width: 600px;
    height: 300px;
}
</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 and height 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>

That was really simple to code and read, wasn’t it? As you can see above, simultaneously transitioning two or more properties of a given HTML element is a breeze to achieve. Moreover, in this case, the type of transition and the duration given to the selected properties are exactly the same; it’s possible, though, to assign different algorithms and durations to each property and obtain interesting variations of the original effect.

But before you start tweaking the earlier example, feel free to test it with your own browser. As you would expect, the target div will expand/contract vertically and horizontally when the mouse is placed over it. That's not too bad at all, considering that the effect has been implemented only with pure CSS!

And now that you have a clearer idea of how to take advantage of the functionality provided by CSS3 transitions, go ahead and start using them for enhancing the behavior of your web pages. It’ll be an instructive and fun experience, believe me.

Final thoughts

Over the course of this two-part tutorial, I provided you with a humble introduction to using transitions in CSS3. Even though the set of examples were admittedly quite simplistic, they came in handy for demonstrating how easy it is to “animate” different properties of an HTML element without having to write a single line of JavaScript.

Moreover, when used in a clever way, transitions can be a powerful tool that will let you enhance your user interfaces in all sorts of creative ways. As with many other CSS features available out there, be careful and use them with due responsibility.

See you in the next web design tutorial!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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