CSS Grid Layout: новый модуль раскладки для веба

CSS Grid Layout: новый модуль раскладки для веба

Люди использовали сетчатый дизайн в журналах, газетах, постерах и другой печатной продукции задолго до появления интернета. Неудивительно, что макеты первых веб-страниц также были основаны на компоновке сетки. Для её создания применялись средства различной степени эффективности: таблицы, флоаты, инлайн блоки, флексы. Однако все они оказывались далеко не идеальными при построении сложного сетчатого макета. Для решения этих…

Grid против Flexbox: сравнение на практике

Grid против Flexbox: сравнение на практике

Не так давно HTML сетка версталась с помощью флоатов, таблиц и других CSS свойств мало пригодных для этого занятия. Потом появился flexbox, созданный специально для создания адаптивных сеток. Он значительно упростил выравнивание элементов и их содержимого, став незаменимой практикой для большинства современных фронтендеров. Сейчас мы имеем нового претендента на «самая-лучшая-система-построения-HTML-сеток» трофей (название трофея в процессе…

Как работает calc()

Функция calc(), которая стала доступна в CSS3, позволяет выполнять математические действия над значениями свойств. Например, вместо указания статического значения ширины элемента, мы можем использовать calc(), объявив, что эта величина является результатом сложения двух других ширин.

ПОЧЕМУ CALC()? Если вы часто используете CSS-препроцессоры (например, SASS), то вы наверняка могли встретить что-то похожее на вышеприведенный пример….

Свойство box-decoration-break для оформления многострочного текста

Свойство box-decoration-break для оформления многострочного текста

В этой статье мы познакомимся со свойством box-decoration-break и увидим, как оно может воздействовать на строчные элементы, например, помогая аккуратно оформить многострочный текст. ОТКРЫВАТЬ ЧТО-ТО НОВОЕ В CSS – ЭТО КРУТО Обожаю узнавать новые CSS свойства, особенно, когда именно они-то мне сейчас и нужны. Недавно я работал над одним проектом, который среди прочего содержал в…

8 свойств Background

8 свойств Background

Как я уже писал ранее, все элементы DOM-дерева являются всего-навсего прямоугольными областями. Каждая такая область имеет фоновый слой, который может быть либо цветным, либо изображением, либо полностью прозрачным. Этот слой регулируется с помощью 8 свойств. BACKGROUND-COLOR Свойство background-color устанавливает цвет фона элемента. Оно может принимать цветовые значения либо значение transparent (прозрачный).

Цвет фона закрашивает…