Черная тень CSS3

У меня вопрос про box-shadow, поэтому у меня есть картинка с этим эффектом.

Я хочу получить такой же эффект, как это изображение в моем примере Jsfiddle.

http://jsfiddle.net/aldimeola1122/EAb3V/2/

Это мой код css:

#wrapper{
    background:url("http://ealtinel.com/bg1.jpg") no-repeat;
    width:1000px;
    height:1000px;
}

#probe{
position: absolute;
margin-top:100px;
margin-left:200px;;
z-index: 9999;
height: 35px;
width: 138px;
background:#fff;
padding-left: 20px;
padding-top: 14px;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
transition: width 0.5s;
-moz-transition: width 0.s;
-webkit-transition: width 0.5s;
-o-transition: width 0.5s;
-webkit-box-shadow: 0px 1px 40px -13px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 40px -13px rgba(0,0,0,0.75);
box-shadow: 0px 1px 40px -13px rgba(0,0,0,0.75);
}

заранее спасибо

введите здесь описание изображения


css shadow
person aldimeola1122    schedule 03.07.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я отредактировал ваш css, я немного поиграл с различными настройками и получил его настолько близко, насколько я думаю, вы сможете:

http://jsfiddle.net/EAb3V/3/

Вот css, который я изменил:

До:

-webkit-box-shadow: 0px 1px 40px -13px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 40px -13px rgba(0,0,0,0.75);
box-shadow: 0px 1px 40px -13px rgba(0,0,0,0.75);

После:

-webkit-box-shadow: 0px 1px 25px rgba(19, 19, 19, 0.50);
-moz-box-shadow:    0px 1px 25px rgba(19, 19, 19, 0.50);
box-shadow:         0px 1px 25px rgba(19, 19, 19, 0.50);

Вот еще одна версия, которую я сделал, я добавил границу в 2 пикселя, немного темнее фона: http://jsfiddle.net/EAb3V/4/

-webkit-box-shadow: 0px 1px 20px rgba(19, 19, 19, 0.40);
-moz-box-shadow:    0px 1px 20px rgba(19, 19, 19, 0.40);
box-shadow:         0px 1px 20px rgba(19, 19, 19, 0.40);
border: 2px solid #cd870f;

Также есть инструменты, которые могут помочь, например, этот, который я считаю лучшим для теней: http://css3gen.com/box-shadow/

person matt    schedule 03.07.2013
comment
Я только что добавил еще одну версию с рамкой в ​​2 пикселя, которая вам тоже может понравиться. - person matt; 03.07.2013