Skew property – CSS

Tejas Hoskatti

12 years ago

CSS has introduced new transform properties. In this section we will learn one more new property known as “skew”. Skew property is usually used to give skewing effects in 3d.

We will see an example which gives skew effect to an html element.

Syntax for skew property is:
transform:skew(30deg, 10deg);

But for different browsers we have to prefix keyword specifically:

For safari 3.2+, chrome 10.0+, etc:
-webkit-transform:skew(30deg, 10deg);

For mozilla 3.5+:
-moz-transform:skew(30deg, 10deg);

For Opera, IE 9+:
-o-transform:skew(30deg, 10deg);

For IE 9+:
-ms-transform:skew(30deg, 10deg);

Skew property accepts 2 value both positive & negative:
1st for X-axis.
Eg: -webkit-transform:skew(30deg, 10deg);

2nd for Y-axis.
Eg: -webkit-transform:skew(30deg, 10deg);

You can also specify it differently as shown below:
X-axis: Eg: -webkit-transform:skewX(50deg);

Y-axis: Eg: -webkit-transform:skewY(50deg);

Here’s the code for same:
<!doctype html>
<html>
<head>
<title>Skew</title>
<!–************** CSS ****************–>
<style type=”text/css”>

.a {
width: 150px;
height: 75px;
border: 2px solid black;
margin: 20px;
position: relative;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’ #A4DDEA’, endColorstr=’ #BDE4ED’); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#A4DDEA), to(#BDE4ED)); /* for webkit browsers */
background: -moz-linear-gradient(bottom, #A4DDEA, #BDE4ED); /* for firefox 3.6+ */

-moz-border-radius: 50px 50px 50px 50px; /*for mozilla*/
-webkit-border-radius: 50px 50px 50px 50px; /*for safari, chrome*/
border-radius:50px 50px 50px 50px; /*for opera*/
-khtml-border-radius: 50px 50px 50px 50px; /*for old Konqueror browsers*/

-moz-transform:skew(30deg, 10deg); /*For mozilla*/
-webkit-transform:skew(30deg, 10deg); /*For safari, chrome*/
-o-transform:skew(30deg, 10deg); /*For Opera */
-ms-transform:skew(30deg, 10deg);/*For IE9+*/
transform:skew(30deg, 10deg);/*Not specifically for any browser*/
}

.b {
width: 150px;
height: 75px;
border: 2px solid black;
margin: 40px;
position: relative;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’ #A4DDEA’, endColorstr=’ EAF5F7′); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#A4DDEA), to(EAF5F7)); /* for webkit browsers */

-moz-border-radius: 30px 30px 30px 30px;/*for mozilla*/
-webkit-border-radius: 30px 30px 30px 30px; /*for safari, chrome*/
border-radius: 30px 30px 30px 30px; /*for opera*/
-khtml-border-radius: 30px 30px 30px 30px; /*for old Konqueror browsers*/

-moz-transform:skewX(50deg); /*For mozilla*/
-webkit-transform:skewX(50deg);/*For safari, chrome*/
-o-transform:skewX(50deg); /*For Opera */
-ms-transform:skewX(50deg);/*For IE9+*/
transform:skewX(50deg);/*Not specifically for any browser*/
}

.c {
width: 150px;
height: 75px;
border: 2px solid black;
margin: 40px;
position: relative;

-moz-border-radius: 10px 10px 10px 10px;/*for mozilla*/
-webkit-border-radius: 10px 10px 10px 10px; /*for safari, chrome*/
border-radius: 10px 10px 10px 10px; /*for opera*/
-khtml-border-radius: 10px 10px 10px 10px; /*for old Konqueror browsers*/

-moz-transform:skewY(20deg); /*For mozilla*/
-webkit-transform:skewY(20deg);/*For safari, chrome*/
-o-transform:skewY(20deg); /*For Opera */
-ms-transform:skewY(20deg);/*For IE9+*/
transform:skewY(20deg);/*Not specifically for any browser*/
}

.d {
width: 210px;
height: 110px;
border: 2px solid black;
margin: 20px;
position: relative;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’ #83D7EA’, endColorstr=’ EAF5F7′); /* for IE */
background: -webkit-gradient(linear, left top, left bottom,from(#83D7EA), to(EAF5F7)); /* for webkit browsers */
background: -moz-linear-gradient(bottom, #83D7EA, #EAF5F7); /* for firefox 3.6+ */

-moz-border-radius: 50px 20px 50px 20px;/*for mozilla*/
-webkit-border-radius: 50px 20px 50px 20px; /*for safari, chrome*/
border-radius: 50px 20px 50px 20px; /*for opera*/
-khtml-border-radius: 50px 20px 50px 20px; /*for old Konqueror browsers*/
}

p {
display: block;
padding: 25px;
color: #FFF;
font: bold 22px Arial;

-moz-transform:skew(20deg, 20deg); /*For mozilla*/
-webkit-transform:skew(20deg, 20deg); /*For safari, chrome*/
-o-transform:skew(20deg, 20deg); /*For Opera */
-ms-transform:skew(20deg, 20deg);/*For IE9+*/
transform:skew(20deg, 20deg);/*Not specifically for any browser*/
}

.E {
width: 210px;
height: 110px;
border: 2px solid black;
margin: 40px;
position: relative;

-moz-border-radius: 30px 60px 30px 60px;/*for mozilla*/
-webkit-border-radius: 30px 60px 30px 60px; /*for safari, chrome*/
border-radius: 30px 60px 30px 60px; /*for opera*/
-khtml-border-radius: 30px 60px 30px 60px; /*for old Konqueror browsers*/

-moz-box-shadow:-20px -20px 20px 5px #D8C00D;/*For mozilla*/
-webkit-box-shadow:-20px -15px 20px 5px #D8C00D; /*For safari, chrome*/
box-shadow:-20px -20px 20px 5px #D8C00D;/*For Opera, IE 9, firefox 4.0 */
}

</style>
</head>
<body>

<div class=”a”> </div>
<div class=”b”> </div>
<div class=”c”> </div>
<div class=”d”> <p> Taiijas </p> </div>
<div class=”e”> <p> Taiijas </p> </div>

</body;
</html>

The above code will result given below output.
In the output given below 1st div will show skew effect accepting both the values i.e X & Y axis both.

2nd div will show skew effect only with X-axis.

3rd div will show skew effect only with Y-axis.

4th div will not skew the whole div but only the text part in it. Here skew effect is given for <p> tag which skews the text in it.

5th div will show skew effect to text, shadow effect with rounded corners.

In the code above we have included gradient property as well as border-radius property for rounded corners for every div.
Gradient property allows us to insert background color to selected html element.