Web-kit css div shadow: возможно ли поместить его на div с чистым css или нужны изображения?

Question

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

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

Answer 1

Вам нужны две вещи: 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');

}

Answer 2

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

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

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

Answer 3

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

Web-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 (модальное окно), другой ответ охватывает его довольно тщательно.