Если пол книги ненужной информации накатаете он больше с Вами работать не будет.
Я пробывал, так не получалось. Спасибо, что обращаете внимание во второй раз.
Но решение всё же нашёл.
- для .effect-1 установил z-index: 1
- далее, проблема была в том, что в шаблоне для меню применялся .effect-1 и в тоже время я пытался для него установить z-index, поэтому ничего не выходило - было так:
- пришлось установить для меню z-index: 2 и обернуть его (меню) ещё одним <div> для которого применил .effect-1
Всё гораздо проще, чем думал. Проще, когда знаешь)
Надеюсь такой вариант решения приемлемый. Вот результат - http://mastersloga.ru
Вроде во всех браузерах (IE не в счёт) работает нормально. В Мозиле смотриться похуже, из-за какой-то "левой" линии, но похоже её убрать нельзя.
Жаль, но нет. Рано я обрадовался. Из-за z-index: -501 в #header не работают ссылки в шапке (ссылка-картинка и поиск по сайту). Возвращаю всё обратно, - ломаю голову дальше.
Все советы пригодились. Большое спасибо.
Сначала пытался менять z-index для .effect-1. Если делал z-index меньше нуля - ничего не менялось, если больше нуля - получалось так:
Никак не мог добиться чтобы тени не было на самом меню. В итоге .effect-1 оставил без изменений z-index: -500;, а в #header добавил z-index: -501;.
Вроде всё работает правильно, вот мой сайт о копирайтинге, где и нужно было всё это проделать.
Единственное, мне не нравится как тень отображается в Мозиле:
На тени есть ещё какая-то полоска
Полагаю за это отвечает данный код:
.effect-1:before, .effect-1:after {content: ""; position: absolute; z-index: -500; bottom: 20px; left: 10px; width: 50%; height: 20%; max-width: 300px; -webkit-box-shadow: 0 20px 10px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0 20px 10px rgba(0, 0, 0, 0.75); box-shadow: 0 20px 10px rgba(0, 0, 0, 0.75); -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -o-transform: rotate(-4deg); -ms-transform: rotate(-4deg); transform: rotate(-4deg);}.effect-1:after {right: 10px; left: auto; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -o-transform: rotate(4deg); -ms-transform: rotate(4deg); transform: rotate(4deg);}
Но что в нём поменять не знаю. И возможно ли вообще убрать эту полосу?
Пока безуспешно.
Друзья, а подскажите новичку, как вообще формируется подобная тень, это картинка или css, или что-то ещё.
Да, речь именно про тень. Сейчас попробую использовать Ваш совет. Спасибо.
Почему так?
Вопрос наверное больше к создателям программы, но может кроме них кто знает?
