Две тени CSS3 (левая/правая и левая/правая/нижняя)

У меня есть сайт WordPress, над которым я работаю, и мне нужно добавить тени CSS3 к четырем элементам. Content-menu-wrapper не зависит от других div (не связанных графически) и является функциональным.

Следующие div — это обертка содержимого, нижний колонтитул, нижний колонтитул. Каждый div графически «связан» один поверх другого. Content-wrapper нужна тень сверху, слева и справа. Нижний колонтитул нуждается в тени слева и справа. Нижний колонтитул нуждается в тени слева, справа и снизу.

Когда я пытаюсь отредактировать тень для «теста», тень просто исчезает. Скорее всего я неправильно использую код. Ниже приведен функциональный код для content-menu-wrapper.

CSS:

#content-menu-wrapper
{
    background-color: white;
    margin:0px auto 15px auto;
    height: 32px;
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}

Пожалуйста, помогите мне с кодом для остальных трех разделов. Спасибо.


wordpress html css dropshadow
person Joshua C. Muzyka    schedule 12.02.2013    source источник
comment
Вам больше не нужны префиксы поставщиков для box-shadow. Просто к сведению.   -  person James Coyle    schedule 12.02.2013
comment
Хорошо, так что не беспокойтесь о -webkit и -moz?   -  person Joshua C. Muzyka    schedule 12.02.2013
comment
Понятно. Я удалил webkit и moz, и, похоже, он работает в последних браузерах.   -  person Joshua C. Muzyka    schedule 12.02.2013
comment
caniuse.com сообщит вам, поддерживается ли свойство и какие префиксы поставщиков необходимы. Box-shadow теперь полностью реализован и поэтому не требует префиксов.   -  person James Coyle    schedule 12.02.2013

Ответы (3)


arrow_upward
3
arrow_downward

Влево и вправо легко:

box-shadow: -15px 0 15px -15px rgba(0, 0, 0, 0.6),
             15px 0 15px -15px rgba(0, 0, 0, 0.6);

Однако сделать так, чтобы три стороны выглядели хорошо, очень сложно, так как при использовании описанной выше техники в углах остаются зазоры.

Я бы предложил заключить все элементы в обертку div и применить к ней box-shadow. Сохраняет CSS намного чище и его легче снять.

person James Coyle    schedule 12.02.2013
comment
Спасибо за помощь. Я попробую и вернусь к вам. - person Joshua C. Muzyka; 12.02.2013
comment
Спасибо, я смог поместить свой контент и нижний колонтитул в новый созданный мной div. Теперь все работает отлично. :) - person Joshua C. Muzyka; 12.02.2013

arrow_upward
0
arrow_downward

Используйте этот онлайн-инструмент, чтобы получить CSS для тени для ваших элементов div.

person Siddharth Pandey    schedule 12.02.2013
comment
эй, почему -1? Я просто пытался помочь вам, дав ссылку на онлайн-инструмент!! - person Siddharth Pandey; 12.02.2013
comment
Я не -1 вам. Спасибо вам за помощь. :) - person Joshua C. Muzyka; 12.02.2013

arrow_upward
0
arrow_downward

Я смог решить эту проблему, заключив элементы div содержимого и нижнего колонтитула в более крупный div в соответствии с ответом Jimjimmy выше. Вот подробности: сначала я создал новый идентификатор div в common.css, «content-shadow».

Затем я добавил атрибут box-shadow плюс атрибуты копирования/вставки из моего div-обертки содержимого, чтобы сайт отформатировался правильно. В моем случае это выглядело так:

#content-shadow {

    border-left:0px solid #E7E7E7;
    border-right:0px solid #E7E7E7; 
    border-bottom:0px solid #E7E7E7;
    border-top:0px solid #E7E7E7;
    background-color:#FFFFFF;
    margin:0px auto 0px auto;
    margin-bottom:0px;
    margin-top:0px;
    width: 1000px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}

Затем я поместил div в файл header.php моей темы перед div «content-wrapper». Сохранив этот файл, я перешел к файлу footer.php и поместил тег в конец файла в нужном месте. Для меня это было выше div «content-bottom-empty-space», чтобы у меня было немного места внизу моего сайта.

Сохраните файл, и теперь он будет/должен распространяться по WordPress. Я надеюсь, что это поможет кому-то в некотором роде.

person Joshua C. Muzyka    schedule 12.02.2013