Advanced Search

Dialog with CSS Shadow

/ Published in: CSS
Save to your folder(s)
Dialog with CSS Shadow.
It does't use any png transparent images.
Support browser:
IE5 +( use IE CSS filter ), Firefox 3 +, Opera 10 +, Safari 3 +, Chrome all.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. <title>Dialog</title>
  6. <style type="text/css">
  7. .dialog{
  8.     position:absolute;
  9.     padding:5px;
  10.     background:rgba(0,0,0,0.1);
  11.     -webkit-border-radius:5px;
  12.     -moz-border-radius:5px;
  13.     border-radius:5px;
  14.     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#22000000,endColorstr=#22000000);
  15. }
  16. .dialog-inner{
  17.     background:#fff;
  18.     border:1px solid #ccc;
  19. }
  20. .dialog-content{
  21.     width:500px;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div class="dialog" style="top:10px;left:10px;">
  27.     <div class="dialog-inner">
  28.         <div class="dialogcontent">
  29.             CONTENTS...
  30.         </div>
  31.     </div>
  32. </div>
  33. </body>
  34. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.