Search the Community

Вот иллюстрация. Тень должна исходить из выделенного блока(визуально, там видно откуда, и видно, что сейчас сделано криво). По-идее, это должен быть span, но в оригинальной задаче, span должен быть сам по себе, а тень должна исходить либо из самого пункта (класс every), либо из какого-либо нейтрального потомка, а какой потомок "нейтрален"? псевдоэлемент, его мы может подогнать под нужные размеры, поставить нужный z-index и сделать для него тень. Беда только в том, что для последнего элемента (крайнего справа), свободного псевдоэлемента не осталось. Что делать? Обязательно для всех меняющихся элементов, которые видны на иллюстрации, в том числе и для тени, нужен транзишн. Поэтому всевозможные изыски с градиентами проблематичны, поскольку напрямую градиент не транзитируется только через opacity. Но прозрачность меняется для всего элемента(псевдоэлемента) сразу, а значит скрывать полоски и показывать одновременно тень элемент не сможет. Были мысли также про какие-то изыски с границей, но опять-таки, двухцветную границу можно сделать только через border-image, а как плавно менять его прозрачность? (понятно, что если нам форма не важна, мы можем тупо сделать левую и правую границу и через opacity менять прозрачность элемента. Но нам же нужно чтоб этот элемент ещё показывал тень, поэтому нам важна как форма, так и прозрачность элемента и менять в угоду полосочкам ни то, ни другое, мы не можем. полосочки как-нибудь сами должны). В общем, нужно как-то поменять форму тени не трогая span, чтоб, при этом, её форма совпала со span и, для последнего элемента, оставить две пары, по две полосы, которые, независимо друг от друга, должны плавно уходить в прозрачность и выплывать из неё обратно. Благодраю за внимание, буду рад Вашим свежим идеям! ЗЫ: можно, ещё сделать две тени, но поскольку тень также нельзя увеличить только в одну какую-то сторону, то процесс подгонки тени (которая в разных браузерах, и рисуется всё-таки немного по разному), большая, отдельная, нудная тема, которую не хотелось бы открывать, лучше чтоб тень исходила из элемента совпадающего по форме с тем, из которого она исходит визуально. ЗЫЗЫ: чисто теоретически, для градиента можно сделать плавный переход, вот что сказано в спецификации: Но на практике у меня это не заработало. Может у кого-то заработает?

Здравствуйте. Необходимо реализовать svg-иконки соцсетей. На картинке снизу соответственно обычное состояние, hover и active. . В состоянии active у иконки должна появляться тень. Код иконок я вставляю в HTML, и стилизую с помощью CSS. Сначала я пытался реализовать тень с помощью box-shadow inset, применяя её к самому svg. Но в таком случае тень появляется как-бы за элементом http://codepen.io/Drew96/pen/WxPdvb Потом я пытался сделать тень с помощью svg-фильтров. Но так как иконка представляет собой круг с «дыркой» по форме значка социальной сети, то тень появлялась не только сверху круга, но еще и под значком. Тогда я сделал тень, добавив блочный псевдоэлемент к ссылкам. Уже к этому элементу я добавлял тень и абсолютно позиционировал его относительно родительского элемента иконки. http://codepen.io/Drew96/pen/xOrpkp Получилось нормально, но в firefox этот вариант работает плохо. Ссылка работает только при нажатии где-то внизу иконки или на самой границе. Поэтому и появился вопрос, как правильно реализовать такую тень, или как заставить firefox обрабатывать ссылки нормально? Заранее спасибо.

https://jsfiddle.net/Launder/Ly9mLfv4/1/ В 21 строчке CSS кода box-shadow: inset 0 1px 5px rgba(0,0,0,0.2);как только убираешь свойство inset (тень внутрь) тень (наружу) появляется. Как сделать тень внутрь?

http://jsfiddle.net/tr0zurq1/ Предполагается, что тень будет именно для каждого элемента: либо для <li>, либо для <a>, а не для <ul>. По-идее, между элементами тень не должна быть видна, поскольку, z-index псевдоэлемента, для которого сделана тень, меньше z-index'a элемента, для которого сделан псевдоэлемент. Но тень всё равно есть. Почему? Как расположить тень "дальше" пунктов меню? <ul> <li><a href="#">Борщ украинский с пампушками</a></li> <li><a href="#">Вареники с печенью в луке с салом</a></li> <li><a href="#">Курица, тушенная с галушками</a></li></ul>ul { position: absolute; list-style: none; margin: 0; padding: 0; word-wrap: break-word; /*перенос слов*/ z-index: 0; }ul a { display: block; position: relative; z-index: 1; background: #ffe5e5; color: #ca575b; padding: 5px 10px; text-decoration: none; }ul a:hover { background: #8bc6ee; color: #fffcfc; }ul a::after { content: ''; display: block; position: absolute; top: 0; bottom: 0; left:0; right:0; box-shadow: 0 0 4px #dd9a9a; z-index: -1; }

http://jsfiddle.net/Launder/d70c2kg1/4/ <ul class="menu"> <li><a href="#">Разные вкусности</a> <ul> <li><a href="#">Суп с клёцками</a></li> <li><a href="#">Пироги с капустой и яйцом</a></li> <li><a href="#">Торт Медовый</a></li> </ul> </li> <li><a href="#">Узбекская кухня</a> <ul> <li><a href="#">Плов по-бухарски с изюмом</a></li> <li><a href="#">Плов с бараниной и нутом</a></li> <li><a href="#">Халва из ядрышек урюка</a></li> <li><a href="#">Лагман по-хорезмски</a></li> </ul> </li> <li><a href="#">Итальянская кухня</a> <ul> <li><a href="#">Феттучини с ветчиной и грибами в сливочном соусе</a></li> <li><a href="#">Пицца по-тоскански с индейкой и грейпфрутом</a></li> <li><a href="#">Кролик по-лигурийски с красным вином</a></li> <li><a href="#">Миндальные бискотти с медом</a></li> </ul> </li></ul>.menu { background: -moz-linear-gradient(to top, #ecc, #fff8f8); background: -webkit-linear-gradient(to top, #ecc, #fff8f8); background: -o-linear-gradient(to top, #ecc, #fff8f8); background: -ms-linear-gradient(to top, #ecc, #fff8f8); background: linear-gradient(to top, #ecc, #fff8f8); border: 1px solid #888; border-top: 0; padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 0; }.menu > li { display: inline-block; width: 200px; height: 75px; border: 1px solid #fff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 14px; position: relative; }.menu a { text-decoration: none; display: block; }.menu ul { list-style: none; }.menu > li:hover::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-box-shadow: inset 0 0 10px #777; -moz-box-shadow: inset 0 0 10px #777; box-shadow: inset 0 0 10px #777; }Почему элемент ul, который является составной частью inline-block элемента li, выходит за его границы, а не растягивает его? Я это говорю, потому что вижу, что выделяет тень (при наведении на блок). С другой стороны, inline-block-и, как и должны, выстроились по базовой линии самой нижней строчки текста в них. Значит, всё же, они "чувствуют" вложенный список. Как объяснить такое двойное поведение?

Хочу получить такую таблицу. Здесь на сером фоне внутренние белые линии (слева и сверху) Cделать через тень, короткое изящное решение http://jsfiddle.net/aykkwbss/ Работает везде, но как обычно IE в своем репертуаре (думал в 10-й версии глюков с тенью не будет). Здесь белые линии смещены на 1px вправо или вниз Вложил DIV в ячейку. У Мозиллы едет верстка, а IE не растягивает DIV http://jsfiddle.net/aykkwbss/5/ Можно решить без JavaScript?

Всем доброго времени суток. Мой вопрос о тени элемента(как не странно). Тень бывает разной, ну например как у этой кнопки: Может не очень видно здесь, но у нее несколько теней разной степени прозрачности и это не размытие(а даже если и оно, не суть важно), ведь тени могут быть разнообразные, да и эмпирическим путем подбирать пол часа тень на кнопку даже если тень простая, не очень верно мне кажется. Есть ли инструмент который позволяет быстро из картинки например строить тень в css, или если нету, то как этот процесс ускорить? Или может быть проще просто кнопку сделать картинкой?

У меня есть форма, к полям которой применяется box-shadow. Так вот во всех браузерах, кроме Chrome, это св-во работает. Версия Chrome: 35.0.1916.153 form-1 input[type="text"] { width: 240px; height: 46px; background: #dcebff; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.7); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.7); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.7); border: none; color: #6dabff; font-family: 'pf_din_text_comp_promedium', sans-serif; font-size: 1.176em; outline: medium none; padding-left: 2px; } слева - Chrome, справа - Firefox.

Всем привет, у меня такой трабл возник. Задумал сделать анимацию css свойства box-shadow. Задуманно так. Сначала свойство blur должно уменьшаться, потом обратно увеличиваться и так в цикле. Но к сожалению ничего не работает. Вот код http://jsbin.com/ApUbIRE/5/edit Помогите разобраться почему нее работает

Синтаксис свойства: box-shadow: h-тень v-тень размытие протяженность цвет inset; На своей подопытной страничке http://prodpak.ru перебрав множество примеров из интернета, изменив немного значения методом тыка, мне удалось сделать внутреннюю тень как хотел, но знаний я так и не получил. То есть нет структурного понимания поведения своей же записи на сайте box-shadow: -4px 0 10px -2px #F0F0F0 inset; Например, не пойму почему, когда я сменю -4px на 4px, то тень у блока будет слева. Как же ориентироваться? Вообще поначалу я полагал, что нужно руководствоваться top right bottom left где относительно элемента тень будет смещаться в ту или другую сторону.

Добрый день, мне необходимо сделать вот такую вещь http://min.us/lvw5hPeUbX2CD Пол дня отмучался с box-shadow, не получилось, сделал так: внизу страницы разместил небольшой блок, условно футер, сделал из него параллелограмм (при помощи transform: skew(20deg) и добавил по всему общему блоку border-right, почти то, но!!! уголок в бордере не срезан верхний,и этого не хватает для завершения образа. Следовательно вопрос: как срезать правильно уголок у бордера, либо, может кто подскажет как сделать такой мнимый объем? Буду очень признателен за любые подсказки и за любую информацию.

Решил сверстать сайт, прописал блок, к нему тени через box-shadow, но тут забыл что не прописал доктайп. После записи <!DOCTYPE html> тени у блока пропали, а если его убрать, то работают. В чём загвоздка? Я в растерянности.