Блог

Итак, что мне нужно, это просто: пользователь нажимает что-то, пользователь видит эффект тени на новом div (окно с центром div) поверх всей страницы (например, размером 1/4) одинаково

Возможно ли это с помощью какого-нибудь чистого css-арта web-kit? Или требуется комбинация javascript изображения? И как это сделать?

То, что вы ищете, можно назвать модальным окном. Это можно сделать, используя свойства CSS3, но это поддерживается только в IE9 , Firefox 4, Chrome и Opera.

Для кроссбраузерного решения вам следует посмотреть на скрипты javascript, которые могут отображать тот же эффект. Существует множество популярных пакетов, таких как Lightbox, ShadowBox, ThickBox, FaceBox и т.д.

Если вы используете ASP.NET в AjaxToolkit есть ModalPopupExtender, который даст вам эффект.

Вам нужны две вещи: div для вашего диалогового окна с box-shadow и другой div, который находится за вашим диалоговым окном с непрозрачностью 50% или около того. Это можно сделать с помощью некоторого css в большинстве всех браузеров, включая ie. Прочитайте эту статью о том, как заставить box-shadow работать во всех браузерах:http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers

итак, ваш html будет выглядеть следующим образом:

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

и ваш 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');
  

}

Из этой цитаты:

Тень веб-kit css div shadow: возможно ли поместить это в div с помощью чистого css

и этот:

пользователь видит эффект тени на новом div

Похоже, вы спрашиваете, возможно ли создать эффект «тени» вокруг внутреннего div с помощью CSS.

Страница настроек Chrome использует для этого CSS3 box-shadow :

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

box-shadow работает в этих браузерах:http://caniuse.com/css-boxshadow

а кроссбраузерный CSS — это:

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

http://jsfiddle.net/XHAbV/

Если вам нужно, чтобы это работало в более старых версиях IE, вы можете использовать CSS3 PIE для эмуляции box-shadow в этих браузерах.

Если вам нужна JavaScript-часть о том, как это сделать (модальное окно), другой ответ описывает это довольно подробно.