Launder

Когда не хватает псевдоэлементов или как спозиционировать тень

Recommended Posts

Вот иллюстрация. Тень должна исходить из выделенного блока(визуально, там видно откуда, и видно, что сейчас сделано криво). По-идее, это должен быть span, но в оригинальной задаче, span должен быть сам по себе, а тень должна исходить либо из самого пункта (класс every), либо из какого-либо нейтрального потомка, а какой потомок "нейтрален"? псевдоэлемент, его мы может подогнать под нужные размеры, поставить нужный z-index и сделать для него тень.

Беда только в том, что для последнего элемента (крайнего справа), свободного псевдоэлемента не осталось. Что делать? Обязательно для всех меняющихся элементов, которые видны на иллюстрации, в том числе и для тени, нужен транзишн.

Поэтому всевозможные изыски с градиентами проблематичны, поскольку напрямую градиент не транзитируется :) только через opacity. Но прозрачность меняется для всего элемента(псевдоэлемента) сразу, а значит скрывать полоски и показывать одновременно тень элемент не сможет.

Были мысли также про какие-то изыски с границей, но опять-таки, двухцветную границу можно сделать только через border-image, а как плавно менять его прозрачность? (понятно, что если нам форма не важна, мы можем тупо сделать левую и правую границу и через opacity менять прозрачность элемента. Но нам же нужно чтоб этот элемент ещё показывал тень, поэтому нам важна как форма, так и прозрачность элемента и менять в угоду полосочкам ни то, ни другое, мы не можем. полосочки как-нибудь сами должны).

В общем, нужно как-то поменять форму тени не трогая span, чтоб, при этом, её форма совпала со span и, для последнего элемента, оставить две пары, по две полосы, которые,  независимо друг от друга, должны плавно уходить в прозрачность и выплывать из неё обратно.

Благодраю за внимание, буду рад Вашим свежим идеям! :rolleyes:

ЗЫ: можно, ещё сделать две тени, но поскольку тень также нельзя увеличить только в одну какую-то сторону, то процесс подгонки тени (которая в разных браузерах, и рисуется всё-таки немного по разному), большая, отдельная, нудная тема, которую не хотелось бы открывать, лучше чтоб тень исходила из элемента совпадающего по форме с тем, из которого она исходит визуально.

ЗЫЗЫ: чисто теоретически, для градиента можно сделать плавный переход, вот что сказано в спецификации:

Цитата

The following describes how each property type undergoes transition or animation.

gradient: interpolated via the positions and colors of each stop. They must have the same type (radial or linear) and same number of stops in order to be animated. Note: [CSS3-IMAGES] may extend this definition.

Но на практике у меня это не заработало. Может у кого-то заработает? ;) 

Edited by Launder

Share this post


Link to post
Share on other sites

Спасибо большое! Очень интересная идея. Сейчас подумаю, как её перелопатить для моего случая.

Share this post


Link to post
Share on other sites

Ну вот, в общем, получилось.

С тенями, сложности, в основном, такие:

При переходах, они исходят из, а не просто появляются, что, с одной стороны и логично и красиво, но поскольку тени мы применяем несколько не по назначению, нам это лишнее. Второе - когда мы используем тень внутрь (inset) они появляются/исчезают мгновенно. А поскольку этим свойством пользоваться, в некоторых случаях удобно, то обходиться без него - неудобно.:(

В принципе, в моём примере, я мог все тени убрать с помощью прозрачности, кроме предпоследних полос, поскольку вместе с ними уберутся и последние полосы.

Третье, тень повторяет форму элемента, из которого она исходит, поэтому приходится делить строго: один псевдоэлемент - прямоугольный, для формирования прямых полос, а второй псевдоэлемент - для формирования нужного контура самой тени, которая будет размерами, расположением и скруглением, такой как нам нужно.

Share this post


Link to post
Share on other sites

Какое-то необычное у вас задание )

Интересно было-бы увидеть его в конечном виде, а то не понятно для чего оно применяется.

Share this post


Link to post
Share on other sites

Для меню.

http://htmlbook.ru/practical/nispadayushchee-menyu

https://webref.ru/layout/html5-css3/list/use

Вдохновившись, в своё время этим, ваяю многоуровневое адаптивное меню :) Спан (в оригинале блочная ссылка) и тень участвуют в наложении по z-плоскости и должны находиться на разных уровнях. Надеюсь, я это когда-нибудь доваяю:angry:, наберусь смелости:lol:, и выложу на суд общественности...

Edited by Launder

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • 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; }
  • Member Statistics

    46,330
    Total Members
    3,128
    Most Online
    god
    Newest Member
    god
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.



  • Спрашивают сейчас

  • Пишут сейчас

    • Здравствуйте. Попробуйте вот так
    • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="header"> <div class="product"> <h1>Product Name</h1> <ul class="sps"> <li>Put on this page information about your product</li> <li>A detailed description of your product</li> <li>Tell us about the advantages and merits</li> <li>Associate the page with the payment system </li> </ul> </div> <div class="banner"> </div> </div> </div> </body> </html> body{ margin: 0; font-family: Arial; font-style: normal; } .container{ margin: 0; width: 90%; margin: 0 auto; } .header{ min-height: 223px; background-color: #445162; color: white; padding: 50px 50px; } .product{ width: 47%; display: inline-block; } .product > h1{ font-size: 60px; margin: 0; } .product:after{ content: ""; display: block; clear: both; } .banner{ background-color: white; width: 35%; min-height: 243px;; display: inline-block; float: right; } .sps > li{ font-size: 20px; line-height: 36px; list-style-image: url(images/check_icon.png) } почему div banner наезжает на надпись и как это исправить? И скажите в общем, что я делаю не так, как по правильному это сверстать?
    • Здравствуйте, Всем!
      Что-то не ищется.. Хочу найти шаблон для Landing page с минимальными наворотами.
      Скачивал всякие Free шаблоны, весят они под 2MB со всякой трепухой внутри, которая может подтягивать из вне что-то ещё и по цепочке. Туда может быть встроено всё что угодно: майнинг, редирект, сбор статистики и т. д. Проверять все эти минифицированные тонны кода нет желания.. Я люблю когда ясный чистый код, без всякой хиромантии..
      Такой шаблон и редактировать проще.. Быстрее работает, меньше глюков.. Ну что может быть нужно для Лендинга из библиотек реально? Разве что jQuery и пара плагинов к нему для ненавязчивой анимании (хотя, опять-таки луче уже если анимация будет на CSS, хотя, могу тут ошибаться в плане совместимости со старыми браузерами).
      Конечно адаптивность важна, но это не требует огромного Bootstrap, а достаточно нескольких media query. Может кто посоветует где посмотреть подобные шаблоны..  
  • Popular Contributors