Вы здесь: Главная » 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.

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

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

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

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

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

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