Затухающие полоски на CSS3 без изображений

Хочу поделиться с вами моим способом создания затухающих полосок без использования изображений. Дальше под катом описан метод создания таких элементов с комментариями и примером.



В первую очередь надо подготовить html-вёрстку. Я буду работать со следующим кодом:

<html>
<body>
    <ul class="container">
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item, etc.</li>
    </ul>
</body>
</html>


Для создания полосок мы будем использовать css3-свойство: linear-gradient. Оно поддерживается во всех последних стабильных версиях браузеров, кроме IE. В IE10 есть поддержка градиентов, но IE10, к сожалению, работает только под Windows 8, поэтому в данной статье о поддержке IE говорить не будем.
Простой тёмный градиент с затуханием выглядит так: background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0));

Для построения одной полоски мы «сплющим» этот градиент до 1 пикселя по высоте, а поможет нам в этом свойство background-size. Зададим в нём параметры background-size: 100% 1px; и получим градиент во всю ширину блока и в 1 пиксель по высоте. В итоге получится такой код:

.container li
{
    background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)); /* указываем угол  0deg для того чтобы градиент начинался от левого края, иначе градиент пойдёт сверху */
    background-repeat: no-repeat; /* убираем повторение градиента, необходимо для работы background-size */
    background-position: 50% 100%;
    background-size: 100% 1px;
}


Но мы пойдём дальше и добавим ещё одну полоску для создания эффекта объёма. Она у нас будет, соответственно, белого цвета.
Но вот незадача, мы не можем разместить её там же где и светлый градиент, иначе они наложатся друг на друга. Использование 2px полоски тоже не пройдёт, так как на разном фоне они будут негармонично выглядеть.
В таком случае нам пригодится ещё одно css3 свойство: background-origin. Оно может принимать три значения: content-box, padding-box, border-box. Это свойство позволяет позиционировать фон относительно разметки блока.
Чтобы добавить нашу светлую полосу под тёмной мы сначала добавим прозрачную рамку снизу (border: 1px solid transparent;), а затем выставим для градиента background-origin: border-box;
И в итоге после комбинации градиентов наш код будет выглядеть вот так:

.container li
{
    background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)),  linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.25));
    background-repeat: no-repeat, no-repeat;
    background-position: 50% 100%, 50% 100%;
    background-size: 100% 1px, 100% 1px;
    background-origin: padding-box, border-box;
    border-bottom: 1px solid transparent;
}


И напоследок можно добавить радиальный градиент такого вида:
radial-gradient(50% 100%, ellipse cover, rgba(0,0,0, 0.05), rgba(0,0,0,0) 50%);

Окончательный вариант можно посмотреть на jsfiddle демке.
Share post

Comments 21

    +1
    В тексте сей заметки следовало бы указать градиент без вендорного префикса -webkit- и по текущему стандарту (С ключевым словом to).
      0
      Спасибо, убрал префикс. Не стал добавлять приставку 'to' потому что черновик может измениться в любой момент и ни один браузер не поддерживает такое написание направления градиента. В первую очередь я руководствовался этой спецификацией: www.w3.org/TR/2011/WD-css3-images-20110217/
        0
        Приставку to поддерживает Firefox 10+ и Opera 11.60+ и указывать, думаю, надо именно то, что прописано в текущем стандарте, в противном случае мы делаем медвежью услугу тем людям, кто не думая «накопипастят» код. Не думаю, что стандарт ещё раз поменяют, хотя я бы добавил ещё ключевое слово «from», чтобы избавиться от недоразумений :)
          0
          В этом есть доля истины, но юзер может это скопировать и сам вставить префиксы, а в вебкитах такие градиенты просто отвалятся. Есть компромиссное решение: градус. Обновил инструкцию.
      +1
      Иногда ох проще картинками это делать. Столько возьни с этой универсальностью. Там чтобы набить эти цифры, подогнать все к тому же дизайну, немерено времени уйдет. Но как вариант да, имеет право на существование.
      Мне css3 напомниет рисование во флеше через код. Когда уже css3 вектоный редактор будет?
        +1
        Даешь SVG-интернет! Нарисовал макет в Inkscape и передал кодерам, а верстальщики остались без хлеба.
          +3
          Векторный …фидонет?)
        0
        А смысл примера, который могут оценит только обладатели IE10? Может все же вернуть префиксы?
          +1
          Упс, обознался. Прошу прощения.
          +1
          В конец по-моему стоит добавить ещё:

          .container li:last-child
          {
              background-size: 0 0, 0 0, auto;
              background-image: none;
          }​
          
            0
            Можно просто background-image: none;
              0
              Разве достаточно?
                0
                Проверил, действительно, вы правы.
            +2
            Чудеса :)
              +1
              5 минут водил курсором по демке, пока понял, что никакого transition-а там нет )
                0
                Правильно ли я понимаю, что метод работает только на однородном фоне?
                  0
                  На любом фоне, там же rgba. Метод использован на моём сайте cyberap.net где на фоне стоят фотографии (не в рекламу будет сказано)
                  0
                  А вертикальные такие как делать?
                    0
                    Всё то же самое только надо поменять угол наклона (90deg) и background-size на 1px 100%
                  • UFO just landed and posted this here
                      0
                      jsFiddle кроссбраузерный, а Dabblet не работает в опере.

                    Only users with full accounts can post comments. Log in, please.