CSS3 Tutorial: Gradients, Rounded Corners and Transforms – Part 2

After all the fun with CSS Gradients in my previous post, its time to get on to some other useful CSS tricks.

With rounded corners and transforms, creating buttons and other interesting shapes becomes not only fun, but incredibly useful for designers and developers alike. Editing the shape has never been so easy.  So without further ado, lets get to it!

CSS Rounded Corners

Create a div to experiment with or copy the code below(minus the quotes) and paste it into the body.

Example:

[box style=”rounded” border=”full”]<div class=”box”></div>[/box]

Next we’re going to create the initial class that we’re going to play around with.

Example:

[box style=”rounded” border=”full”].box{
width:100px;
height:100px;
background-color:#066;
top:20px;
left:20px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
position:absolute;
}[/box]

The key property of this style here is the border-radius. With the addition of border-radius were able to control the curve of the corners. Note that the div itself doesn’t take on rounded corners, only the background colour within it. Also, we’ve added some extra properties here to help overcome browser compatibility issues. Make sure that any editing you make to border-radius, you add to the others.

We are also able to control single corners instead of all.  To do that change the border-radius property to read:

Example:

[box style=”rounded” border=”full”]border-radius: 0px 0px 0px 0px;[/box]

This is the equivalent of saying: “border-radius: Top Right Bottom Left;”.  So to control each corner, change the pixel amount of the desired corner.

CSS Transforms

Next we will deal with transforms. Using the same class, add the below properties to your property list.

Example:

[box style=”rounded” border=”full”]-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);[/box]

When you render off to the browser, right away you notice the box has rotated 20 degrees.  Not only can you rotate the box, but if you change the word rotate to skew, or add that property, you can skew your box.  Let’s try that.

Example:

[box style=”rounded” border=”full”].box{
width:100px;
height:100px;
background-color:#066;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-transform:rotate(20deg)skew(5deg,10deg);
-webkit-transform:rotate(20deg)skew(5deg,10deg);
position:absolute;
}[/box]

CSS Shapes

Now if you start thinking outside the box (beautiful use of a pun!), you may realize that you can also overlap div’s to create all sorts of CSS shapes. Let’s look at some different possibilities.

CSS Point Burst:

[box style=”rounded” border=”full”].star1{
width:50px;
height:50px;
background-color:#FF0000;
position:absolute;
}

.star2{
width:50px;
height:50px;
background-color:#FF0000;
-moz-transform:rotate(45deg);
-moz-transform-origin:center;
-webkit-transform:rotate(45deg);
-webkit-transform-origin:center;
position:absolute;
}[/box]

CSS Heart:

[box style=”rounded” border=”full”].heartTop1{
width:54px;
height:50px;
top:74px;
left:68px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
position:absolute;
background-color:#FF0000;
}

.heartTop2{
width:54px;
height:50px;
top:74px;
left:20px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
position:absolute;
background-color:#FF0000;
}

.heartBase{
position:absolute;
top:111px;
left:23px;
width: 0;
height: 0;
border-left: 48px solid transparent;
border-right: 48px solid transparent;
border-bottom: 49px solid red;
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}[/box]

CSS Arrow:

[box style=”rounded” border=”full”].arrowTip{
position:absolute;
top:20px;
left:100px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}

.arrowTube{
position:absolute;
top:55px;
left:20px;
width: 80px;
height: 30px;
background-color:#FF0000;
}[/box]

CSS Speech Bubble:

[box style=”rounded” border=”full”].speechBubble{
width:200px;
height:100px;
background-color:#cccccc;
top:20px;
left:20px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
position:absolute;
z-index:3;
}

.point{
width:54px;
height:50px;
top:93px;
left:142px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
position:absolute;
background-color:#cccccc;
z-index:1;
}

.pointCover{
width:54px;
height:50px;
top:92px;
left:119px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
position:absolute;
background-color:#ffffff;
z-index:2;
}[/box]

 

Leave a Reply

Your email address will not be published. Required fields are marked *

 
Top