Home arrow Style Sheets arrow CSS3 Transform Property: the SkewY() Option
STYLE SHEETS

CSS3 Transform Property: the SkewY() Option


In this penultimate part of a series, I develop a basic example that shows how to easily distort the height attribute of an HTML element via the “skewY()” method provided by the “transform” CSS3 property. Similar to its cousins “skew()” and “skewX()” discussed in previous tutorials, the functionality offered by “skewY()” is pretty limited, at least when evaluated in production environments. This shouldn’t stop you from trying the method to see if it fits your requirements.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
November 01, 2010
TABLE OF CONTENTS:
  1. · CSS3 Transform Property: the SkewY() Option
  2. · Using the skewY() method

print this article
SEARCH DEVARTICLES

CSS3 Transform Property: the SkewY() Option
(Page 1 of 2 )

If you’re in search of an approach that lets you apply some eye-catching effects to your web page elements without having to deal with the issues of client-side scripting, then you should look at the “transform” property. It's a cool feature bundled with the coming CSS3 specification that will permit you to transform (hence the property’s name) one or multiple HTML elements in all sorts of clever ways. These include rotating and scaling them, and even skewing their width and height attributes, similar to what you do when using an image editing program like Photoshop.

To demonstrate how easy it is to individually distort the attributes of a web page element, in the previous installment of the series I created an example. It made use of the “skewX()” method provided by the property to skew the width of the element in a snap. The entire process of transformation was as easy as assigning the distortion value in degrees to the method and nothing else. It really was that simple.

It’s fair to note, though, that “transform” supports another complementary method called “skewY().” As its name implies, it can also be used for distorting the dimensions of an element, but unlike its counterpart “skewX(),” this method alters an element's height. Since using the “skewY()” option is a straightforward process that you'll surely master in a snap, in this penultimate part of the series I’m going to build another basic example to demonstrate the actual functionality of this option when used in a concrete case.

Ready to continue your education on the “transform” CSS3 property? Then start reading right now!

Review: distorting an HTML element's width with the “skewX()” method

As I mentioned in the introduction, the “transform” property makes it really easy to distort the width of a selected HTML element by means of its “skewX()” method, which was covered in depth in the preceding installment of this series. If you've missed that tutorial, however, below I listed the example created then, which shows how to put the previous method to work with a simple div. Here’s the corresponding code sample:

<!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 the transform CSS3 property (with the 'skewX()' option)</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #ddd;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #585858;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
    background: #fff;
}
#header, #content, #footer {
    padding: 20px;
}
#sample_div {
    width: 350px;
    padding: 20px;
    background: #00f;
    color: #fff;
    border: 1px solid #fff;
    -webkit-transform: skewX(30deg);
    -moz-transform: skewX(30deg);
    -o-transform: skewX(30deg);
    transform: skewX(30deg);
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Using the transform CSS3 property (with the 'skewX()' option)</h1>
        <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. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
    </div>
    <div id="content">
        <h2>Main content section</h2>
        <div id="sample_div">
            <h3>Subheading section</h3>
            <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.</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. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
    </div>
</div>
</body>
</html>

Without a doubt, understanding how the above “skewX()” method does its business is so simple that the process doesn’t bear any further explanation. Quite possibly, the most important thing that must be illustrated here is how the target div is rendered on screen, once the method has been applied to it. Hopefully, the following image will be of help in this case. Check it out:

Not too bad, huh? Considering that skewing the X axis of the div required only a single method call, the result is more than acceptable. Nonetheless, the earlier example would be somewhat incomplete if I didn’t show you how to create a similar transformation by using the complementary “skewY()” method referenced in the introduction. In line with this idea, in the following segment I’m going to create another example, which will show how to use that method with the same sample div that you saw before.

To learn how this example will be developed, 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