Верстка \ CSS 3

Работа с несколькими столбцами - CSS Multi-column Layout

От автора: несмотря на то, что он предшествовал Grid and Flexbox, Multi-column Layout в CSS представляет собой — по крайней мере, для меня — еще более радикальный отход от того, что мы обычно делаем, и как думаем о макете CSS. Разделение только одного элемента на его многоколоночное представление содержимого кажется странным, даже еретическим.

Продолжить чтение

Верстка \ CSS 3

Естественно адаптивная сетка CSS с помощью minmax() и min()

От автора: CSS Grid в настоящее время широко поддерживается в современных браузерах, и многие люди отлично пользуются этим! Но, к сожалению, одна из самых полезных функций спецификации не работает так, как заявляется. В частности, невозможно создать «естественно адаптивную сетку» CSS, то есть сетку, которая реагирует на размер своего контейнера без использования медиазапросов. Но благодаря определенным стандартам, которые теперь доступны в некоторых браузерах, мы можем это исправить!

Продолжить чтение

Верстка \ CSS 3

От автора: за последние несколько итераций CSS границы между CSS и JavaScript начали стираться. CSS был статическим языком, предназначенным для определения цветов, внешнего вида, но не интерактивности. Вы можете использовать проценты в измерениях как своего рода интерактивность для окружающей среды, но реакция на изменения была прерогативой JavaScript.

Продолжить чтение

Верстка \ CSS 3

От автора: одной из наиболее эффективных вещей, которые мы можем сделать для повышения производительности и устойчивости страниц, является загрузка CSS способом, который не задерживает рендеринг страниц.

Продолжить чтение

Верстка \ CSS 3

Flexbox и отступы: примеры работы

От автора: это очень короткий вопрос об использовании отступов в контексте Flexbox форматирования, который мы обсудили с моим другом Вей. Но я думаю, что это довольно распространенная проблема, с которой люди могут столкнуться, так что вот общий обзор.

Продолжить чтение

Верстка \ CSS 3

Не упустите из виду переменные CSS

От автора: сначала, когда я услышал о переменных CSS, я был настроен немного скептически. Зачем кому-то использовать их, если есть такие языки расширения, как scss, sass, less и stylus. Через несколько лет я начал замечать, что все больше и больше людей используют их, пишут об этом и говорят об этом. Я что-то упустил из виду… Это заняло какое-то время, но после того, как я использовал их здесь и там, меня зацепило. В этом посте я расскажу о том, что убедило меня продолжить изучение переменных css и начать их использование в проектах.

Продолжить чтение

Верстка \ CSS 3

Как изменять цвета с помощью элемента ввода color и переменных CSS

От автора: с помощью переменных CSS и элемента ввода color мы можем легко изменять цвета — а значит, переключать темы пользовательского интерфейса в веб-приложении или на сайте. Ну, веб развивается быстро, поэтому мы можем использовать переменные CSS, которые поддерживают многие современные браузеры.

Продолжить чтение

Верстка \ CSS 3

Flexbox justify-content: полное руководство по центрированию

От автора: Flexbox — это популярный модуль макета CSS, который помогает позиционировать элементы HTML на экране. Есть много сценариев использования, когда он может оказаться настоящей находкой; горизонтальное и вертикальное центрирование из их числа. Центрирование Flexbox justify-content решает стандартные проблемы выравнивания, с которыми вы можете столкнуться при работе с традиционной блочной моделью CSS. Это позволяет центрировать элементы внутри их контейнера как по горизонтали, так и по вертикали с помощью всего лишь нескольких строк кода CSS.

Продолжить чтение

Верстка \ CSS 3

Добавление крутых эффектов с помощью режимов наложения CSS

От автора: в последние годы веб-дизайн, особенно CSS, приобрели предсказуемый характер. Во-первых, мы создаем специальные эффекты, которые интенсивно используют изображения, внешние библиотеки или и то, и другое. Затем приходит CSS и добавляет эти возможности — значительно сокращая потребность во внешних ресурсах. Это означает, что большая часть скрытой мощности, которая нам нужна, просто встроена в браузер.

Продолжить чтение