Manmohanjit Singh

I’m going to make this post simple and well structured so that it will be easier for you guys to understand. Don’t expect me explain every single bit.

Final Result

This is the final result of the dialog box using only CSS3, duh except for the huge icon on the left. View a live demo here.

CSS3 Properties Used

[contentAd float=right size=normal /]In this tutorial we will be using 2 CSS3 properties which are:

1. Border Radius (a.k.a. rounded corners)
2. Box Shadows

Border radius will give the dialog box a web 2.0 look which makes it look nicer and neater. Everyone’s favorite, box shadows, will give the dialog box a shadow effect which usually is done using Photoshop. It will also support the borders which may look a little bit dark for certain users. We are adding in borders to the dialog so that it looks contained in browsers that do not support box shadows(such as IE!). Instead of using gradients for the buttons, we will be using box shadows.

The (X)HTML Code

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Submit Cancel

The CSS Code

#message {
font-size: 12px;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
width: 500px;
margin: auto;
margin-top: 125px;
background: #f9f9f9;
padding: 10px;
border: 1px #BBB solid;

text-shadow: 1px 1px 2px #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 1px 1px 6px #bbb;
-moz-box-shadow: 1px 1px 6px #bbb;
-khtml-box-shadow: 1px 1px 6px #bbb;
}
#message .icon { float: left; margin: 10px 20px 0 5px; background: url(info.png) no-repeat left center; width: 64px; height: 64px; display: block; }
#message .content { afloat: right; }
#message .options { text-align: center; }
button::-moz-focus-inner { border : 0px; }
button {
background: #fff;
color: #474747;
border: 1px #BBB solid;
outline: 0;
padding: 2px 6px;
margin: 2px 4px 6px 0;
display: inline-block;

border-radius: 3px;
box-shadow: inset 0 -10px 7px #F4F4F4, 1px 1px 2px #CCCCCC;
-moz-border-radius: 3px;
-moz-box-shadow: inset 0 -10px 7px #F4F4F4, 1px 1px 2px #CCCCCC;
-webkit-border-radius: 3px;
-webkit-box-shadow: inset 0 -10px 7px #F4F4F4, 1px 1px 2px #CCCCCC;
}
button:hover {
background: #f9f9f9;

box-shadow: inset 0 -10px 7px #F2F2F2, 1px 1px 3px #CCCCCC;
-moz-box-shadow: inset 0 -10px 7px #F2F2F2, 1px 1px 3px #CCCCCC;
-webkit-box-shadow: inset 0 -10px 7px #F2F2F2, 1px 1px 3px #CCCCCC;
}
button:active {
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;

background: #efefef;

box-shadow: inset 0 -10px 7px #F1F1F1, 1px 1px 3px #CCCCCC;
-moz-box-shadow: inset 0 -10px 7px #F1F1F1, 1px 1px 3px #CCCCCC;
-webkit-box-shadow: inset 0 -10px 7px #F1F1F1, 1px 1px 3px #CCCCCC;
}

You might have noticed that I used this, button::-moz-focus-inner { border : 0px; }, that’s to remove the outline present in Mozilla browsers when your mouse is focused on the button or input.