Home arrow Style Sheets arrow CSS3 Transform Property: the SkewX() Method
STYLE SHEETS

CSS3 Transform Property: the SkewX() Method


In this sixth part of a series, you will learn how to work with the “skewX()” method included with the “transform” CSS3 property. It can be used for distorting the width of a selected HTML element.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
October 26, 2010
TABLE OF CONTENTS:
  1. · CSS3 Transform Property: the SkewX() Method
  2. · Distorting the width of an HTML element with the skewX() method

print this article
SEARCH DEVARTICLES

CSS3 Transform Property: the SkewX() Method
(Page 1 of 2 )

More and more browser vendors (yes, even Microsoft) are slowly starting to provide support for many of the new properties that come with the upcoming CSS3 specification. What does this mean? Hopefully, in a not-so-distant future, you'll be able to add dynamic behavior to your web page elements without having to use a single line of JavaScript, or Flash in the worst case.

There's no need to wait that long, however, to see some of these properties in action. Currently some modern browsers, such Firefox, Safari and Opera (to name a few) can parse them with quite impressive results. That's exactly the case with "transform," a useful feature provided by CSS3 that allows you to move, scale, rotate and even skew HTML elements through a set of intuitive methods that are a breeze to use.

Moreover, to illustrate "transform"'s actual functionality, in earlier chapters of this series I developed some basic examples that showed how to move, resize, rotate and skew a sample HTML container by using some of the methods that the property provides by default. And to be frank, understanding the logic behind these transformational effects was a no-brainer process. That's pretty exciting, right?

As I said before, the "transform" property is effectively capable of skewing a web page element by altering at the same time its width and height attributes, which is all well and good. It's valid to notice, however, that the property also includes a couple of complementary methods, called "skewX()" and "skewY()," which permit you to perform the skewing process individually on each attribute. Therefore, in this sixth installment of the series I'm going to show, via a concrete hands-on example, how to work with the first of these methods, so that you can start using it when developing your own web pages.

Does my proposal sound attractive enough for you? Then don't waste more time; read the lines to come!

Review: distorting a web page element with the "skew()" method

As always, before I start explaining how to use the "skewX()" mentioned in the introduction, it'd be instructive to take a brief look at the example created in the previous episode of this series. It showed how to work with its parent "skew()." As the name suggests, the method allows you to simultaneously "distort" the width and height of a target HTML element, quite similar to the effect achieved with any popular graphic editor. Here's how the example was built initially:

<!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 'skew()' 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: skew(30deg, 10deg);
    -moz-transform: skew(30deg, 10deg);
    -o-transform: skew(30deg, 10deg);
    transform: skew(30deg, 10deg);
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Using the transform CSS3 property (with the 'skew()' 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>

As the above code snippet illustrates, using the "skew()" method isn't very different from working with other, older CSS properties that have been available for a long time. As you can see, the method accepts two arguments expressed in degrees, which are used to distort the width and height of the target web page element. That's pretty straightforward, isn't it?

Even so, if you're still confused and not sure how the "skew()" method does its thing, I suggest you look at the following screen shot, which shows how the previous div is rendered on screen:

To be honest, it looks like the element is actually an image edited with Photoshop or Flash. However, the effect has been achieved only with a CSS one-liner! Before you go ahead and start applying some fancy transformational effects to your web page elements using the earlier method, however, it's worthwhile to recall that it's possible to implement more selective distortions via an additional option called "skewX()."

Assuming that you're interested in learning how to use this complementary method, in the following section I'm going to modify the web page that you just saw, which this time will apply the method to the same target div.

To learn more on this topic, jump forward and read the lines to come.


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