Заполните поля формы, нажмите отправить и ожидайте обратного звонка
и стать первым в своем деле!
Принципов веб-дизайна великое множество. Но есть один, который важен более остальных…
Кто бы мог подумать, что жизненный цикл одного рода насекомых может оказаться столь важным фактом познания, что повлечет другие открытия, и аж в веб-дизайне!
Речь о цикадах периодических, или, как их еще называют, «семнадцатилетние саранчи» (сами саранчи справедливо орали бы по поводу незаконного использования товарного знака «саранча»). Большую долю своего лайфа они живут прямо под землей и кормятся корнями. Сильно пострадать от них могут только растения молодого возраста, взрослые растения справляются с повреждениями легко. Но интересны они по другой причине.
Через промежутки в 7, 11, 13 или 17 лет данные насекомые показывают себя миру, вылезая из-под земли, летают, совокупляются и отправляются на тот свет. Но почему именно такие временные промежутки жизненного цикла? Может быть, числа волшебные?
Ну не прям волшебные, но имеющие нечто общее: это простые числа, и их можно разделить на 1 и на самих себя. К ним относятся 1, 2, 3, 5, 7, 11, 13, 17, 19, 23 и пр. Но причем тут вообще это?
С помощью исследований установлено, что численность популяции живых организмов, в чей рацион входят цикады (а это осы, змеи, птицы, рыбы, пауки), отличается: цикл между высшей точкой и падением численности короче — от 2 до 6 лет. То есть, если бы цикады высовывались из нор каждый 12 год, то их поедающие твари со своим циклом в 2, 3, 4, 6 лет запросто синхронизировали биоциклы возрастания своей популяции с периодическим выходом цикад. И это был бы внутривидовой праздничный период пожирания цикад.
Но для самих цикад это же вообще не айс. И если они появились во время трехлетнего пика, скажем, птиц, то потом это повторится через 51 год. А в промежутки другие поколения цикад запросто смогут восстановить свою популяцию, и даже стать больше, чем их пожирающих.
Алё, причем тут веб-дизайн?
Можно применить для бесшовной заливки. Непросто держаться идеального баланса при тайлинге. Можно применять небольшого размера файлы, но если на пикче есть какая-то прореха — малозаметная, но заметная точечка, которая будет через равные интервалы повторяться, то целостная картинка будет уже казаться не натуральной. Знание жизни цикад здесь как раз поможет.
Первым принцип цикад описал в 2011 году Алекс Уокер. Этот принцип позволяет создавать из нескольких простых изображений длинные уникальные фоны страниц.
Используя градиенты можно сэкономить еще больше пространства. Объем кода в CSS суммарно в несколько раз меньше веса PNG или JPG с фрагментами и не требует лишних серверных запросов. Код примеров выглядит так
В июне того же 2011 года Рэнди Меррил совместил линейные градиенты и принцип цикады. Тогда верному отображению градиентов мешала техническая отсталость браузеров – приходилось создавать массу одинакового кода с разными префиксами.
Переходим к делу (давно пора). Создаем 3 квадратных пикчи в 29, 37 и 53 pixels, заливка в половину квадрата и полупрозрачна. Ну и ставим их в качестве фона в тестовой HTML-странице.
В результате получаем это.
Что мы видим на этих жалюзи? Квадраты ложатся друг на друга, появляются новые цветовые сочетания и оттенки! Здесь будет работать волшебство простых чисел, поэтому повторение паттерна не будет долгим: перемножим числа размеров квадратов (29 × 37 × 53) и получим… 56 869 pixels! Вы осознаете гениальность этого метода? Получается, что маленького размера файлы, общим объемом не более 7 кб, создают графическую архитектуру шириной в 57 000 pixels.
Как еще можно это применить?
Вот более натуралистичный пример, такую картину мы все видели – изображение завесы из театра. Есть вот такая пикча с хорошей графикой. Ее весьма удобно разделить на вертикальные блоки. Разделим изображение на эти «блоки сборки» (ruffle unit), они обладают большим значением, нежели размеры квадратов в пикселях.
Итак, вырезаем один из блоков размером 8 кб для генерации бесшовного фона. Получили вот такое изображение.
Блестящий пример бесшовного фона, с которого хейтим. Заметные границы блоков, механический характер и фальшивость театральной завесы заметит каждый. Неубедительно, в общем, выглядит.
На втором уровне применяем простое число 3. Вырезаем новый вертикальный блок и помещаем его внутри прозрачного PNG-блока, ширина которого будет 3 «блока сборки». Еще у этой картинки размываем правый и левый края, чтобы получилось плавное слияние с фоном. Размер этого блока – всего 15 кб.
Вот что получаем при слиянии фона с этим блоком. Результат уже более похож на реальность, изначальная неестественность разбавляется, но мозг все равно замечает механические повторяющиеся паттерны.
Переходим к третьему слою, где опять используем волшебное простое число, на этот раз – 7. Создаем прозрачный PNG-файл с шириной в 7 блоков, где на позициях «3» и «6» размещаем новые картинки. Также облегчаем интеграцию с общим фоном путем размывки границ – правых и левых сторон. Данный файл уже будет чуточку массивнее – размером в 32 кб, но это приемлемо.
По итогу наложения этого файла на 2 предыдущих слоя получаем это. Неплохо, неправда ли? Почти идеально, хотя мозг может кривить бровь и пытаться скрупулезно отыскивать паттерны. Случайность в нижних слоях уже видна, поэтому глаз не натыкается на механические шаблоны.
Посмотрим на данный фон со стороны чисел, где каждый блок равен своему числу, и получим это: 1, 2, 3, 1, 2, 6, 1, 2, 1, 3, 2, 1, 6, 2, 1, 1, 3, 1, 1, 6, 1, 1, 2, 3 … Закономерности здесь существуют, но их весьма сложно определить. А какой размер конечного файла имеем в результате? ВСЕГО 53 КБ. И можем еще более разнообразить данную комбинацию слоем в 11 блоков, но это уже на любителя.
Мы применяли простые числа на минимальных позициях – 1, 3 и 7. а могли взять и больше – 11, 13 и 17, и изображение бы вышло более визуально сложным. Но это все зависит от возможностей масштаба в зависимости от экранной ширины.
Цинь Шихуанди 2200 лет создал терракотовую армию в 8000 единиц для охраны своей могилы. Эти изделия – настоящее произведение искусства.
С помощью CSS и картинок можно собрать свою армию.
Так может выглядеть армия лего солдатов
В ней размещены следующие картинки: 2 изображения ног, 2 – рук, 2 – торса, 2- головы и фото для бэкграунда.
Проводя эксперименты было выявлено несколько принципов , которые работают.
Поддержка браузеров
Применялась простая разметка, с множествами бэкграундов. Поддерживается большинством браузеров – Firefox 4, Chrome 10, IE9, Opera 11, Safari 5
В случае, если поставлена обратная совместимость – подходящим вариантом станет контейнер div и тайтлинг в html, body. Контейнер может не отражать семантику, что может весомо отразиться на сайте в целом. Примеры использования:
Надеемся, вы сразу опробуете этот лайфхак. Ждите новых полезных поступлений в блоге!
Сколько стоит заказать одностраничник в Екатеринбурге
Сколько стоит заказать одностраничник в Екатеринбурге
Зачем нужен аутсорсинг маркетинга
Зачем нужен аутсорсинг маркетинга
Почему важно проводить анализ рынка
Почему важно проводить анализ рынка