Форум Сайтостроение Веб-строительство

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

V
На сайте с 28.09.2012
Offline
75
vasyakrn
973

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

P.S. Если не сложно то посмотрите почему перестает плавать корзина ( http://prntscr.com/6f5zrs ) после нажатия на кнопку "Добавить в Корзину". Уже неделю не могу решить проблему. Три программиста не могли исправить.

LY
На сайте с 28.05.2010
Offline
50
LEXXiY
#1
vasyakrn:
Добрый день всем форумчанам! Не могу разобраться как сделать тень при наведении и по контуру для дива http://prntscr.com/6f5xhl . Вот сайт http://shop-script.temp089.pp.ua/pizza/ .Заранее спасибо

P.S. Если не сложно то посмотрите почему перестает плавать корзина ( http://prntscr.com/6f5zrs ) после нажатия на кнопку "Добавить в Корзину". Уже неделю не могу решить проблему. Три программиста не могли исправить.

По первому варианту. 

.item:hover {box-shadow: 0 0 10px rgba(0,0,0,0.5);}

Подробнее о параметрах тени тут http://htmlbook.ru/css/box-shadow

Магазин аккаунтов с балансом Litres,DNS,Ozon,Rotapost и еще 50+ других сервисов тут - vk.cc/7QK0Sk
V
На сайте с 28.09.2012
Offline
75
vasyakrn
#2
LEXXiY:
По первому варианту. 

.item:hover {box-shadow: 0 0 10px rgba(0,0,0,0.5);}


Подробнее о параметрах тени тут http://htmlbook.ru/css/box-shadow

Немного некрасиво получается http://prntscr.com/6f70k8 . Нужно чтоб по контуру

S
На сайте с 13.10.2014
Offline
171
silicoid
#3

vasyakrn, У вас очень сложные углы. Если размер блока фиксированный, то при наведении, можно под него подкладывать прозрачный див с нарисованной тенью.

если блок _не_ фиксированного размера придется шаманить с версткой

добавить отдельные png тенюшки для всех сторон и уголков.

в общем делать в стиле сайтов середины нулевых

Округлая строка поиска Помощь в верстке Как лучше для СЕО-div
V
На сайте с 28.09.2012
Offline
75
vasyakrn
#4

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

.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;
}

И результат http://prntscr.com/6feis1

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий