With the introduction of CSS3 we now have quite a few new CSS techniques at our disposal. To create a drop shadow we only need two lines of code for our technique to work on most of the popular browser. In order to get rounded corners we only need another two lines of code. This post is purely for reference purposes when using CSS3.
Rounding 4 corners
To round four corners you only need the following code. It is quite simple to get these to work and the information in the lines explain themselves when working with div tags.
-moz-border-radius:0px;
-webkit-border-radius:0px;
An example of this code in action would be as follows:
.post {
-moz-border-radius:5px;
-webkit-border-radius:5px;}
The HTML:
<div class=”post”><h1>hello</h1></div>
Rounding individual corners
To round individual corners you will need to use the following pairs of code. Much like rounding all corners this is pretty self explanatory.
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
An example of the individual corners would be as follows:
.topleft3 {
-moz-border-radius-topleft:3px;
-webkit-border-top-left-radius:3px;}
.topright5 {
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;}
The HTML:
<div class=”topleft3″><div class=”ropright5″><h1>hello there</h1></div></div>
Giving a div a drop shadow
This is pretty simple much the rest of the code. It allows you to give a box a drop shadow and a pretty effective one at that.
-webkit-box-shadow: 0 0 0 #000000;
-moz-box-shadow: 0 0 0 #000000;
Once again an example:
.shadow {
-webkit-box-shadow: 0 1px 5px #333;
-moz-box-shadow: 0 1px 5px #333;}
The HTML:
<div class=”shadow”><h1>Hello Shadow</h1></div>