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.


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.