Вы здесь: Главная » CSS » Повторяющиеся градиенты

Повторяющиеся градиенты

Повторяющиеся градиенты - это замечательная возможность сделать, например, полосатую текстуру, которую можно задать в качестве фона вместо фоновой картинки. Для этого есть несколько способов.

Способ 1. Использование свойства background-size для уменьшения области действия градиента

Обычно градиент распространяется по всей площади элемента. Но вы можете изменить эту ситуацию, задав свойство background-size (размер фона, если перевести на русский) менее 100%:

Также можно указать размер фона в px или em, например, причем с помощью 2-х цифр - по горизонтали (с помощью первой цифры) и по вертикали (с помощью второй). Еще интересней будет, если градиент расположить под углом 45 градусов:

Способ 2. Использование repeating-linear-gradient и repeating-radial-gradient для создания градиентных текстур

Есть специальные виды градиентов, которые уже в названии содержат слово repeating, т.е. являются повторяющимися уже исходя из названия:

При использовании этих свойств важно указывать небольшие значения для позиций цветов градиента, например, 10px,  20px или 5%,15%, иначе никакого повторения градиента вы не увидите. Плюс стоит вспомнить о поддержке более старых версий браузеров и о вендорных префиксах:

  • -moz-repeating-radial-gradient
  • -webkit-repeating-radial-gradient

Как ни жаль, но IE отображает градиенты только с 10-й версии. Для младших версий нужно использовать свойство filter или изображение.

Рассмотренные выше примеры на практике:

Посмотреть код Repeating Gradient.18892

CSS3 Patterns Gallery

Есть люди, которые этим вопросом озадачились всерьез. Благодаря им мы можем использовать  CSS3 Patterns Gallery, т.е.  галерею CSS3 паттернов, посвященную текстурам на основе градиента.

CSS3 Patterns GalleryВам достаточно щелкнуть на соответствующем рисунке-текстуре, чтобы посмотреть и скопировать его код.

текстура css3 gradient

В примере ниже можно посмотреть примеры градиентных текстур и код для них.

See the Pen CSS3 Gradient Patterns by Elen (@ambassador) on CodePen.18892

В статье использованы примеры с сайта 24ways.org.

Особенности прозрачных градиентов в браузере Safari

Ели вы используете прозрачные градиенты в Safari, будьте готовы к тому, что вместо перехода от цвета к прозрачности вы получите серо-черную полосу. Так уж вышло, что разработчики этого популярного в iOS-системах браузера так и не вылечили этот баг. Его вызывает, например, такая строка:

Для того чтобы избавится от полосы в Safari, нужно заменить transparent на rgba(255, 255, 255, 0) - это тоже прозрачный белый цвет, но в системе rgba(). Второй способ - указать после цвета в шестнадцатеричном формате нуль:

Например, такой код

приведет к такому результату:

Полупрозрачный градиент

 

3 комментария

  1. В сочетании с базовыми возможностями управления фоновыми картинками градиенты дают широчайшие возможности для создания фонов разной степени сложности совершенно без использования изображений. Градиентами можно делать сложные и интересные паттерны, но это уже совсем другая тема.

    • Да, все так. Именно об этом и идет речь в статье.

  2. Прикольно! Никогда не думал, что можно такие вещи с помощью градиентов сделать!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *