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

Тема в разделе "JavaScript", создана пользователем repacksman, 10 мар 2015.

Модераторы: ZiX
  1. repacksman

    repacksman

    Регистр.:
    12 июн 2012
    Сообщения:
    154
    Симпатии:
    2
    Добрый день всем форумчанам! Не могу разобраться как сделать тень при наведении по контуру для дива http://prntscr.com/6f5xhl . Вот сайт _ h t t p:// shop-script.temp089.pp.ua/pizza/.Заранее спасибо

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

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    352
    Симпатии:
    223
    Видимо, Вы хотите сделать тень по контуру оранжевой рамки, а углы у Вас - это отдельные картинки. Так не получится, так сам блок - это обычный прямоугольник.

    Можно сделать так:
    Код:
    .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 нравится это.
  3. repacksman

    repacksman

    Регистр.:
    12 июн 2012
    Сообщения:
    154
    Симпатии:
    2
    Ну да, такой вариант не подходит http://prntscr.com/6f70k8
     
  4. Q_BASIC

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    352
    Симпатии:
    223
    Можно нарисовать тень как надо (изображение) и ставить фоном, тогда всё будет ровно
     
    AlgoriVismut и repacksman нравится это.
  5. repacksman

    repacksman

    Регистр.:
    12 июн 2012
    Сообщения:
    154
    Симпатии:
    2
    Спасибо. Буду делать так. А есть еще другие варианти? Чтоб без изображения?
     
  6. Solus_Rex

    Solus_Rex

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

    repacksman

    Регистр.:
    12 июн 2012
    Сообщения:
    154
    Симпатии:
    2
    Спасибо. Все получилось как нужно. Темму можно закривать. Вот код:
    Код:
    .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
     
  8. Jekins

    Jekins Писатель

    Регистр.:
    4 мар 2015
    Сообщения:
    9
    Симпатии:
    0
    Если брать в расчет моб устройства, то лучше через css3 делать
     
  9. zlobinberg

    zlobinberg Писатель

    Регистр.:
    17 мар 2015
    Сообщения:
    4
    Симпатии:
    1
    Можешь взять у мення с разрабатываемого сайта вот тут: http://centr-lodka.ru/

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

    bebizkit Писатель

    Регистр.:
    23 фев 2015
    Сообщения:
    5
    Симпатии:
    0
    можно обойтись и без возни с картинками, просто:
    .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));
    }