full stack javascript developer
0,0
рейтинг
29 июля 2012 в 18:29

Разработка → Принцип цикады на чистом CSS tutorial

Принцип цикады позволяет строить очень длинные неповторяющиеся фоны веб-страниц из нескольких простых изображений. Он был впервые описан Алексом Уокером в апреле 2011 года и быстро завоевал популярность. На сайте designfestival.com появилась целая галерея фонов, сделанных по этому принципу.

Во многих случаях можно сэкономить ещё больше, используя градиенты. Даже с учётом того, что пока практически все браузеры поддерживают свойство linear-gradient только с префиксами, суммарный объем кода CSS, необходимый для создания фона, в несколько раз меньше размера нескольких PNG с фрагментами, и, что ещё важнее — вообще не требует лишних запросов к серверу. Так, Эрик Мейер недавно привёл пример реализации первых двух фонов из оригинальной статьи Уокера на чистом 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;

Впервые совместить линейные градиенты и принцип цикады придумал Рэнди Меррил в июне 2011 года. До этого была не очень удачная попытка использовать радиальные градиенты для генерации псевдослучайного шума. Пока что повсеместному использованию такой техники мешает отсталость браузеров — чтобы заставить градиенты работать, придётся громоздить горы одинакового кода с разными префиксами, а для поддержки IE младше 10-й версии вообще использовать DXImageTransform.Microsoft.gradient()

Тем не менее, если вам хочется поэкспериментировать с «цикадиентами», вот несколько полезных ссылок:



Илья Сименко @ilya42
карма
526,7
рейтинг 0,0
full stack javascript developer
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (26)

  • 0
    А не проще, тогда уж, закодировать изображения в base64 и вставить в сам CSS? Я почему-то уверен, что способ с картинками, а не градиентами, намного производительнее.
    • 0
      Смотря какие картинки. Если абсолютно примитивные и со строго вертикальным узором, так что можно буквально один пиксель повторять по вертикали сколько угодно, то может быть. А если посложнее, с наклонными линиями хотя бы, как в примере с занавесом, то это уже десятки килобайт.
      • +6
        Дело в том, что, опять же, для меня, намного интереснее и приятнее просматривать простой, но аккуратный сайт, чем сайт напичканный всем тем, что только возможно и при этом дико тормозит. И не особо важно то, что страница этих сайтов будет весить на десять килобайт больше.
        • +1
          Не спорю, сам люблю простые и быстрые сайты. Тем не менее повсеместно переходят от картинок к генерации всего на CSS. Надо же чем-то занять четырёхядерные смартфоны :) А если серьёзно — когда градиенты будут рендериться быстро — почему бы и нет. Плюсы ведь есть — можно, например, подбирать цвета и узор вживую, не открывая фотошопа.
          • 0
            Согласен. На небольших участках, в принципе, и сейчас можно использовать достаточно спокойно — кнопочки, закорючки и т.п., но не на бэкграунде всей страницы.

            С темой не очень связано, но, помню, когда-то давно страдал градиентоманией и вставлял градиенты куда только можно и куда только нельзя. Затем понял, что чем проще — тем лучше. Белый фон — лучший фон :).
          • 0
            Мелкие картинки, особенно относящиеся к функционалу, какие нить кнопочки круглые, стрелочки, лучше рисовать с помощью ксс, а не вставлять картинкой, ибо такие иконки на мобильных устройствах смотрятся абсолютно ужасно, а если увеличивать масштаб то вообще, страх. Это еще один пунктик в строну плюсов.

            в других случаях между png и base — всегда выбираю второе, но только если картинка относится к функционалу и не большая.
    • 0
      base64 сам по себе утяжеляет картинки, примерно на 20%.
      • 0
        По сравнению с чем?
        • 0
          с оригинальной png картинкой
      • +1
        и примерно на столько же сжимается gzip-ом
  • +14
    Это хороший способ создать сайт, который тормозит на обычной машине.
    • +1
      А обычный смартфон он будет завещивать, и за 10 минут сажать его батарею :)
  • +1
    Ага, а примеры используют старый синтаксис для градиентов?
  • +2
    а для поддержки IE младше 10-й версии вообще использовать DXImageTransform.Microsoft.gradient()

    MS-фильтр поддерживает только самые простые градиенты: линейные, строго вертикальные или горизонтальные, с двумя колор-стопами «от и до».
    Поэтому для цикады он, мягко говоря, малопригоден — даже если отбросить все прочие его недостатки. Так что закладывайтесь на то, что этот фон в старых IE будет априори «изящно деградирован». :) Ну разве что SVG привлечь для IE9…

    Теперь по теме в целом.
    Как эксперимент — безусловно интересно. На практике… решение нишевое и спорное.
    Простые геометрические полосочки реализуются несложно — но они и в картинках мало весят! Которые можно засунуть в base64, как правильно замечают выше.
    А что-то сложное — уже нет. Это отлично иллюстрирует пример с занавесом: изготовить/менять его очень муторно, а качество все равно оставляет желать лучшего. Он неживой, синтетический. А занавес из картинок намного вкуснее.
    • +3
      простите, конечно, но ваше «намного вкуснее» жутка артефачит на моём ноуте.
      я все же за вектор, пусть даже пока синтетический, SVG и CSS (где попроще).
      а если еще вспомнить про Retina…

      при увеличении мощностей, вектор всё сильнее будет вытеснять растр. может даже когда-нибудь сплайновые 3d движки увидем. хотелось бы до этого дожить :)
      • 0
        Автор, желая оптимизировать объем, немного перегнул палку с постеризацией. Ценой десятка-другого килобайт от этого можно избавиться.
        Но даже в нынешнем виде растровая картинка мне больше нравится. А шум отчасти даже в плюс — придает фактуру.
        • +1
          шум да, а вот квадратные артефакты — не очень :)
          видимо, у нас разные мониторы.
          • 0
            Да не, я понимаю о чем речь. Это постеризация. Если целенаправленно обращать внимание — я её тоже вижу.
            Автор немного переборщил с оптимизацией.
  • +6
    alizar писал Принцип цикады и почему он важен для веб-дизайнеров

    Было бы не плохо, если бы вы сделали статью как продолжение alizar'a.
    • +5
      Как всегда не хватает на хабре отредактировать свой комментарий :(
      • +1
        Ничего, вы не первый, мне уже в личку писали на ту же тему. Наверное, когда ссылка стоит в самом начале текста, она проскальзывает мимо сознания :)
        • 0
          Она явно указывает на хабр, но не каждый же смотрит href. Обычно такие ссылки даются на Википедию, например. Я тоже первым делом полез топик ализара искать что бы убедиться что это не дежавю. И только потом прочитал эту ветку комментариев.
  • 0
    да согласен :) будет дикий тормоз, на компах с встроенной видео картой.

    Но мне кажется человек выложил пост, как научно тематическую статью :) чем теоретически практическую :)))

    или я не прав? :)
  • НЛО прилетело и опубликовало эту надпись здесь
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Красотища! С моей привычкой искать повторяющийся узор фона на сайта, стопорнуло меня минут на пять.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.