Тень при наведении для Дива

[repacksman]

Добрый день всем форумчанам! Не могу разобраться как сделать тень при наведении по контуру для дива Для просмотра ссылки Войди или Зарегистрируйся . Вот сайт _ h t t p:// shop-script.temp089.pp.ua/pizza/.Заранее спасибо

P.S. Если не сложно то посмотрите почему перестает плавать корзина ( Для просмотра ссылки Войди или Зарегистрируйся ) после нажатия на кнопку "Добавить в Корзину". Уже неделю не могу решить проблему. Три программиста не могли исправить.

 

[Q_BASIC]

Видимо, Вы хотите сделать тень по контуру оранжевой рамки, а углы у Вас - это отдельные картинки. Так не получится, так сам блок - это обычный прямоугольник.

Можно сделать так:

.decorated-block:hover {
-webkit-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.75) !important;
-moz-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.75) !important;
box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.75) !important;
}

Но думаю, это не то, что Вы хотели

 

[repacksman]

Видимо, Вы хотите сделать тень по контуру оранжевой рамки, а углы у Вас - это отдельные картинки. Так не получится, так сам блок - это обычный прямоугольник.

Можно сделать так:

.decorated-block:hover {
-webkit-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.75) !important;
-moz-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.75) !important;
box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.75) !important;
}

Но думаю, это не то, что Вы хотели

Ну да, такой вариант не подходит Для просмотра ссылки Войди или Зарегистрируйся

 

[Q_BASIC]

Ну да, такой вариант не подходит Для просмотра ссылки Войди или Зарегистрируйся

Можно нарисовать тень как надо (изображение) и ставить фоном, тогда всё будет ровно

 

[repacksman]

Можно нарисовать тень как надо (изображение) и ставить фоном, тогда всё будет ровно

Спасибо. Буду делать так. А есть еще другие варианти? Чтоб без изображения?

 

[Solus_Rex]

Спасибо. Буду делать так. А есть еще другие варианти? Чтоб без изображения?

Можно без изображений.
Делаете основной блок с тенью.
Поверх(z-index) по углам размещаете 4 круглых маленьких div-a с внутренней тенью и отключёнными 3-мя сторонами.
Это не то чтобы сильно сложно, но сходу я такое не напишу, надо повозиться часик-другой. Пока скилл маловат.
А времени сейчас нет.
Попробуйте.

 

[repacksman]

Спасибо. Все получилось как нужно. Темму можно закривать. Вот код:

.decorated-block:hover{
    -webkit-box-shadow:0 -24px 12px -18px #be9d82,0px 24px 12px -18px #be9d82,24px 0 12px -18px #be9d82,-24px 0 12px -18px #be9d82 !important;
    -moz-box-shadow:0 -24px 12px -18px #be9d82,0px 24px 12px -18px #be9d82,24px 0 12px -18px #be9d82,-24px 0 12px -18px #be9d82 !important;
    box-shadow:0 -24px 12px -18px #be9d82,0px 24px 12px -18px #be9d82,24px 0 12px -18px #be9d82,-24px 0 12px -18px #be9d82 !important;
}

.decorated-block:hover:before, .decorated-block:hover .wrapper:before, .decorated-block:hover:after, .decorated-block:hover .wrapper:after{
    background-image:url("img/round-corners-s.png") !important;
}

И результат Для просмотра ссылки Войди или Зарегистрируйся

 

[Jekins]

Если брать в расчет моб устройства, то лучше через css3 делать

 

[zlobinberg]

Можешь взять у мення с разрабатываемого сайта вот тут: Для просмотра ссылки Войди или Зарегистрируйся

Там при наведении на блоки (товары) нарезана картинка тени.

 

[bebizkit]

можно обойтись и без возни с картинками, просто:
.decorated-block:hover{
-webkit-filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.5));
filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.5));
}