Как сделать гексагональную сетку на чистом CSS

  В новом сайте АБИТУРИЕНТ-2018 Высшей школы экономики и управления захотелось подчеркнуть единство, комплексность, взаимосвязанность образовательных направлений, расположив ассоциирующие миниатюры в виде сот пчелиного улья. Задачка оказалась совсем не тривиальной, однако, применённая метода может служить решением довольно широкого круга задач визуализации. Здесь результаты моих упражнений при создании адаптивной гексагональной сетки. Кроме того, подробно объяснены несколько CSS-селекторов и методов сокращения кода, а так же некоторые трюки для вычисления плавающего значения свойства height элементов CSS.

Создадим неупорядоченный список с ID #grid, который определяет размеры шестигранной сетки. Я использовал ширину в 60% от базового элемента. Сетка будет расположены в центре страницы, для чего используется margin: 0 auto; при вычислении левого и правого отступов. Можно изменять эти значения по своему усмотрению, что бы гексагональная сетка расположилась соответствующим образом относительно базового элемента.
Читать далее «Как сделать гексагональную сетку на чистом CSS»

Минимум для понимания эффектов CSS‑фильтрации

Вольный перевод статьи: UNDERSTANDING CSS FILTER EFFECTS

CSS Filters были созданы для получения различных визуальных эффектов при применении их к элементам DOM — Document Object Model. Здесь мы обсудим историю создания фильтров, то, что они делают и как их применять. Так же рассмотрим влияние фильтров на производительность как на десктопах, так и на мобильных устройствах.
Читать далее «Минимум для понимания эффектов CSS‑фильтрации»

Как отключить загрузку видео с сервера на мобильных устройствах?

Использование видео в качестве бэкграунда уже давно стало одной из фишек коммерческих сайтов. Говорят, что помогает в привлечении читателей и повышает конверсию. Неуверен, но явление имеет место быть, однако, на десктопе — эффектно, ДА, но на мобильных устройствах — категорически НЕТ!

Возникает небольшая задачка: видео должно работать на десктопе, но при заданном разрешении, например, 1024 пиксела, его быть не должно.
Читать далее «Как отключить загрузку видео с сервера на мобильных устройствах?»

Рецепты CSS: геометрические фигуры

Отличная подборка кода CSS для рисования различных геометрических фигур, используя только HTML.
Читать далее «Рецепты CSS: геометрические фигуры»