- PVSM.RU - https://www.pvsm.ru -
Принцип цикады [1] позволяет строить очень длинные неповторяющиеся фоны веб-страниц из нескольких простых изображений. Он был впервые описан Алексом Уокером в апреле 2011 года и быстро завоевал популярность. На сайте designfestival.com появилась целая галерея фонов [2], сделанных по этому принципу.
Во многих случаях можно сэкономить ещё больше, используя градиенты. Даже с учётом того, что пока практически все браузеры поддерживают свойство linear-gradient
только с префиксами, суммарный объем кода CSS, необходимый для создания фона, в несколько раз меньше размера нескольких PNG с фрагментами, и, что ещё важнее — вообще не требует лишних запросов к серверу. Так, Эрик Мейер недавно привёл пример реализации [3] первых двух фонов из оригинальной статьи Уокера на чистом CSS. Для простых цветных полосок (вверху) понадобилось 2.66 Кб кода CSS (с префиксами, без минификации и компрессии). В будущем, когда все популярные браузеры избавятся от префиксов, будет достаточно 0.59 Кб кода. В оригинальном примере изображения весили около 6 Кб + 3 запроса к серверу. Второй пример с занавесом (внизу) впечатляет ещё больше. Даже с префиксами получается примерно десятикратный выигрыш.
Код примеров вполне прямолинеен и прост. Я не стал приводить полный вариант со всеми префиксами, чтобы не загромождать статью. Вот верхний пример:
/* Простые вертикальные полоски */
background-image:
linear-gradient( /* первый слой */
0deg,
rgba(171,191,196,0.6),
rgba(171,191,196,8) 50%,
rgba(255,0,0,0) 50%,
rgba(255,0,0,0)
)
,
linear-gradient( /* второй слой */
0deg,
rgba(203,138,153,0.7),
rgba(203,138,153,0.7) 49%,
rgba(203,138,153,0.5) 50%,
rgba(255,0,0,0) 50%,
rgba(255,0,0,0)
)
,
linear-gradient( /* третий слой */
0deg,
rgba(220,209,185,0) 0%,
rgba(220,209,185,0) 20%,
rgba(220,209,185,0.4) 20%,
rgba(220,209,185,0.8) 80%,
rgba(255,0,0,0) 80%,
rgba(255,0,0,0)
)
;
background-size:
29px 100%,
37px 100%,
53px 100%
;
background-repeat: repeat-x;
height: 200px;
Вот нижний:
/* Занавес */
background-image:
linear-gradient( /* вертикальный градиент для всего фона */
90deg,
rgba(255,128,128,0.25),
rgba(255,128,128,0) 75%
)
,
linear-gradient( /* первый слой */
-1deg,
transparent,
transparent 30%,
#510A0E 35%,
#510A0E 40%,
#61100F 43%,
#B93F3A 50%,
#4B0408 55%,
#6A0F18 60%,
#651015 65%,
#510A0E 70%,
#510A0E 75%,
rgba(255,128,128,0) 80%,
transparent
)
,
linear-gradient( /* второй слой */
2deg,
#510A0E,
#510A0E 20%,
#61100F 25%,
#B93F3A 40%,
#4B0408 50%,
#6A0F18 70%,
#651015 80%,
#510A0E 90%,
#510A0E
)
; /* Мейер поленился делать третий слой :( */
background-size:
auto,
300px 100%,
109px 100%;
background-position:
background-repeat: repeat-x;
height: 400px;
Впервые совместить линейные градиенты и принцип цикады придумал Рэнди Меррил [4] в июне 2011 года. До этого была не очень удачная попытка [5] использовать радиальные градиенты для генерации псевдослучайного шума. Пока что повсеместному использованию такой техники мешает отсталость браузеров — чтобы заставить градиенты работать, придётся громоздить горы одинакового кода с разными префиксами, а для поддержки IE младше 10-й версии вообще использовать DXImageTransform.Microsoft.gradient()
[6]
Тем не менее, если вам хочется поэкспериментировать с «цикадиентами», вот несколько полезных ссылок:
Автор: ilya42
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/veb-dizajn/12244
Ссылки в тексте:
[1] Принцип цикады: http://habrahabr.ru/post/117160/
[2] галерея фонов: http://designfestival.com/cicada/
[3] пример реализации: http://meyerweb.com/eric/thoughts/
[4] придумал Рэнди Меррил: http://forthedeveloper.com/2011/cicada-principle-with-css3/
[5] не очень удачная попытка: http://css-tricks.com/forums/discussion/11886/css-noise/p1
[6] DXImageTransform.Microsoft.gradient()
: http://msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx
[7] Таблица поддержки градиентов: http://caniuse.com/#feat=css-gradients
[8] Коллекция узоров на CSS3: http://lea.verou.me/css3patterns/
[9] генератор градиентов: http://www.colorzilla.com/gradient-editor/
Нажмите здесь для печати.