We have used DIVs many times in its best way and it has always served us as expected.  Now it’s time to make some interesting layout using CSS3.

These stylish DIVs can be used for styling the Heading tags, Title of content or simply wrapping the contents inside it. It’s up to you where you like to use them.

So, first of all, we will take two DIVs. One of which will be nested in the second one. I.e. Parent DIV and Child DIV.

<div class="parent">
    <div class="child">Welcome to the Awsome</div>
</div>

So, we got two nested DIVs. Now we will use CSS3 to transform the layout. To do that, simply we will skew the parent DIV on the y-axis.

Let’s write CSS.!

Skewing parent div using .parent class.

.parent {
    -webkit-transform: skewY(-5deg);
    -moz-transform: skewY(-5deg);
    -ms-transform: skewY(-5deg);
    -o-transform: skewY(-5deg);
    transform: skewY(-5deg);
    padding: 20px;
    color: #fff;
    background: #1266ae;
    text-align: center;
}

Output:

skewed Y-axis of div

As we can see, after skewing parent DIV, content inside child DIV has been also skewed. To keep our content unaffected inside child DIVs, we will simply skew it opposite to parent DIV.!

Skewing child DIV using .child class.

.child {
    -webkit-transform: skewY(5deg);
    -moz-transform: skewY(5deg);
    -ms-transform: skewY(5deg);
    -o-transform: skewY(5deg);
    transform: skewY(5deg);
    padding: 80px;
    color: #fff;
    font-size: 2em;
    font-style: italic;
    font-family: georgian
}

 Output:

final-output after-skewing child div

Now we get the desired style for the div and our content inside child div is not affected.

We have added padding and colors in child DIV to make it more impressive (you can move the “colors, padding and font-size”  from parent DIV to child DIV ).

Thus using CSS3 we get the beautiful unconventional layout for highlighting our headings, titles etc..

If you have any issue, let us know in the comment box.
#Code Snippets #CSS3 #HTML