CSS3 Multiple Backgrounds

Here is a very simple example showing the use of multiple background images in one div.

Code below:

#multipleBG {
border: 5px solid #cccccc;
background:url(img1) top left no-repeat, url(img2) bottom left no-repeat, url(img3) bottom right no-repeat;
padding: 15px 25px;
height: inherit;
width: 590px;
}

How to make a DIV absolute center in Browser display area.

Here is the Code . Copy this and paste it in the HTML editor and see the preview in browser

<div style="width:400px;height:200px;position:absolute;top:50%;left:50%;margin-left:-200px;margin-top:-100px;background:#e5e5e5;border:5px solid #999999;z-index:999;-moz-box-shadow:0 5px 5px #000000;-webkit-box-shadow:0 5px 5px #000000;-moz-border-radius:20px;-webkit-border-radius:20px;"> <h2 style="margin:20px;">This will be perfectly Center aligned. Now resize th browser window and see that the DIV will be dynamically centered.
</div>

Rounded Corner, Gradient buttons with shadows with only <a> tag – CSS3

Try this pasting in your HTML editor and see the result. If it is Dreamweaver paste it in HTML source editor.

<style>
  a.TryRedButton 
  		{
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px; 
        color:#ffffff;
        -moz-box-shadow: 0 2px 2px #000000;
        -webkit-box-shadow: 0 2px 2px #000000; 
        border:1px solid #333333;  
        background-image: -moz-linear-gradient(top left -90deg, #585858, #3f3f3f); 
        padding: 5px 10px; 
        text-decoration:none; 
        text-shadow: 1px 1px 1px #000000;}
  a.TryRedButton:hover 
  		{
        background-image: -moz-linear-gradient(top left -90deg, #3f3f3f, #585858);}
  </style>
		
<a class="TryRedButton" href="#">Black Gradient Button</a>