Add shadow to images:
<html> <head> <style type="text/css"> .image1 { border: 1px solid #ccc; margin: 5px 10px 5px 0px; padding: 5px; box-shadow: 2px 2px 3px rgba(30,30,30, 0.3); -moz-box-shadow: 2px 2px 3px rgba(30,30,30, 0.3); -webkit-box-shadow: 2px 2px 3px rgba(30,30,30, 0.3); } .image2 { border: 1px solid #ccc; margin: 2% 4%; padding: 10px; box-shadow: 2px 2px 3px rgba(30,30,30, 0.3); -moz-box-shadow: 2px 2px 3px rgba(30,30,30, 0.3); -webkit-box-shadow: 2px 2px 3px rgba(30,30,30, 0.3); } </style> </head> <body> <img class="image1" src="image1.jpg" width="300" /> <br /> <img class="image2" src="image2.jpg" width="300" /> </body> </html>
Create a rollover effect using a single image:
a { display: block; width: 200px; height: 25px; background-image: url(/images/button.gif); background-position: 0px 0px } a:hover { display: block; width: 200px; height: 25px; background-image: url(/images/button.gif); background-position: 0px 25px }
Place an image at the top of the page. It may serve as a banner:
<html> <head> <title>Test</title> <style type="text/css"> .top { background-image:url(image.png); background-position: top; background-repeat: no-repeat; position: relative; margin: auto; padding: 0; min-height: 90px; } </style> </head> <body> <!-- Page top --> <div id="top"> <div class="top"> </div> </div> </body> </html>