Верстка \ CSS 3

Первые шаги возможной реализации CSS-макета Masonry

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

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

Верстка \ CSS 3

Преобразование объекта с фиксированными размерами в адаптивный элемент

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

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

Верстка \ CSS 3

Использование масок CSS для создания зубчатых краев

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

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

Верстка \ CSS 3

Как настроить высоту строки в CSS

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

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

Верстка \ CSS 3

Все, что я узнал о min(), max(), clamp()

От автора: функции сравнения CSS (min(), max(), clamp()) стали поддерживаться в Firefox с 8 апреля 2020, что означает, что они теперь поддерживаются во всех основных браузерах. Эти функции CSS предоставляют способы получить динамические макеты и более гибкие компоненты дизайна. Их можно использовать для размеров контейнера, размера шрифта, отступов и многого другого. Более того, веб-дизайнерам теперь, возможно, придется мыслить иначе при разработке макетов из-за этих захватывающих функций CSS.

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

Верстка \ CSS 3

CSS исправление для 100vh в мобильных WebKit браузерах

От автора: недавно наблюдался ажиотаж вокруг того, как WebKit обрабатывает CSS 100vh, по существу игнорируя нижний край окна просмотра браузера. Некоторые предложили избегать использования 100vh, другие придумали разные альтернативы для решения проблемы. Фактически, эта проблема уходит еще в давние времена, когда Николас Хойзи подал уведомление об ошибке в WebKit по этому вопросу (кратко: WebKit говорит, что это «намеренно»).

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

Верстка \ CSS 3

3 безумно простых способа переключить сайт в темный режим

От автора: как однажды сказал печально известный Дарт Вейдер: «Ты не знаешь силы Темной стороны». 2019 год вдохнул жизнь в слова Вейдера, когда темный режим захватил наши приложения, и им все стали повально увлекаться. От Instagram до Youtube, наши любимые приложения запрыгнули на подножку, и уже не далек день триумфа Ситхов.

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

Верстка \ CSS 3

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

От автора: в данном уроке будет показано создание карусели на чистом CSS. Здесь нет JavaScript здесь вообще! Нет плагинов jQuery. Нет хаков. Просто пара новых CSS-свойств, с которыми я экспериментировал, а также немного базового HTML.

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

Верстка \ CSS 3

Темный режим и переменные шрифты

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

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