Web-kit css div shadow: is it possible to put it onto div with pure css or images are needed?

So what I nee开发者_C百科d is simple: user presses something, user sees a shadow effect on new div (div centered window) on top of all page (with 1/4 size for example) alike

Is it possible with some pure web-kit css art? Or javascript+images combination is needed? And how to do such thing?

What you are looking for can be called a modal window. It can be done using CSS3 properties, but it is supported only in IE9+, Firefox 4, Chrome, and Opera.

For a cross-browser solution, you should look at javascript scripts which can render the same effect. There are many popular packages like Lightbox, ShadowBox, ThickBox, FaceBox, etc.

If you are using ASP.NET, there is the ModalPopupExtender in the AJAXToolkit, which will give you the effect.

You need two things a div for your dialog box with box-shadow and another div that lies behind your dialog box with an opacity of 50% or so. This can be done with some css in most every browser including ie. Read this article on how to get box-shadow work in all browser: http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/

so your html will look like this:

<div class="overlay"/>
<div class="dialogbox">someContent</div>

and your css:

.overlay {
     position:absolute; 
     height: 100%; 
     width: 100%;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  opacity: 0.5;
}
.dialogbox{ 
    width: 200px; 
    height: 150px; 
    margin: auto;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

}

From this quote:

Web-kit css div shadow: is it possible to put it onto div with pure css

and this one:

user sees a shadow effect on new div

It seems as though you're asking if it's possible to create the "shadow" effect around the inner div using CSS.

Chrome's settings page is using CSS3's box-shadow to do this:

-webkit-box-shadow: 0 5px 80px #505050;

box-shadow works in these browsers: http://caniuse.com/css-boxshadow

and the cross-browser CSS is:

-webkit-box-shadow: 0 5px 80px #505050;
-moz-box-shadow: 0 5px 80px #505050;
box-shadow: 0 5px 80px #505050; 

http://jsfiddle.net/XHAbV/

If you need it to work in older versions of IE, you can use CSS3 PIE to emulate the box-shadow in those browsers.

If you're after the JavaScript side of how to do this (a modal window), the other answer covers it quite thoroughly.