- 0
-
Similar Content
-
By Launder
Вот иллюстрация. Тень должна исходить из выделенного блока(визуально, там видно откуда, и видно, что сейчас сделано криво). По-идее, это должен быть span, но в оригинальной задаче, span должен быть сам по себе, а тень должна исходить либо из самого пункта (класс every), либо из какого-либо нейтрального потомка, а какой потомок "нейтрален"? псевдоэлемент, его мы может подогнать под нужные размеры, поставить нужный z-index и сделать для него тень.
Беда только в том, что для последнего элемента (крайнего справа), свободного псевдоэлемента не осталось. Что делать? Обязательно для всех меняющихся элементов, которые видны на иллюстрации, в том числе и для тени, нужен транзишн.
Поэтому всевозможные изыски с градиентами проблематичны, поскольку напрямую градиент не транзитируется только через opacity. Но прозрачность меняется для всего элемента(псевдоэлемента) сразу, а значит скрывать полоски и показывать одновременно тень элемент не сможет.
Были мысли также про какие-то изыски с границей, но опять-таки, двухцветную границу можно сделать только через border-image, а как плавно менять его прозрачность? (понятно, что если нам форма не важна, мы можем тупо сделать левую и правую границу и через opacity менять прозрачность элемента. Но нам же нужно чтоб этот элемент ещё показывал тень, поэтому нам важна как форма, так и прозрачность элемента и менять в угоду полосочкам ни то, ни другое, мы не можем. полосочки как-нибудь сами должны).
В общем, нужно как-то поменять форму тени не трогая span, чтоб, при этом, её форма совпала со span и, для последнего элемента, оставить две пары, по две полосы, которые, независимо друг от друга, должны плавно уходить в прозрачность и выплывать из неё обратно.
Благодраю за внимание, буду рад Вашим свежим идеям!
ЗЫ: можно, ещё сделать две тени, но поскольку тень также нельзя увеличить только в одну какую-то сторону, то процесс подгонки тени (которая в разных браузерах, и рисуется всё-таки немного по разному), большая, отдельная, нудная тема, которую не хотелось бы открывать, лучше чтоб тень исходила из элемента совпадающего по форме с тем, из которого она исходит визуально.
ЗЫЗЫ: чисто теоретически, для градиента можно сделать плавный переход, вот что сказано в спецификации:
Но на практике у меня это не заработало. Может у кого-то заработает?
-
By Drew96
Здравствуйте. Необходимо реализовать 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 обрабатывать ссылки нормально? Заранее спасибо.
-
By Launder
https://jsfiddle.net/Launder/Ly9mLfv4/1/
В 21 строчке CSS кода
box-shadow: inset 0 1px 5px rgba(0,0,0,0.2);как только убираешь свойство inset (тень внутрь) тень (наружу) появляется. Как сделать тень внутрь?
-
By Launder
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; } -
By Launder
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-и, как и должны, выстроились по базовой линии самой нижней строчки текста в них. Значит, всё же, они "чувствуют" вложенный список.
Как объяснить такое двойное поведение?
-
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-
Question
Arthur
Всем доброго времени суток.
Мой вопрос о тени элемента(как не странно). Тень бывает разной, ну например как у этой кнопки:
Может не очень видно здесь, но у нее несколько теней разной степени прозрачности и это не размытие(а даже если и оно, не суть важно), ведь тени могут быть разнообразные, да и эмпирическим путем подбирать пол часа тень на кнопку даже если тень простая, не очень верно мне кажется.
Есть ли инструмент который позволяет быстро из картинки например строить тень в css, или если нету, то как этот процесс ускорить? Или может быть проще просто кнопку сделать картинкой?
Edited by ArthurLink to comment
Share on other sites
5 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.