Верстка \ 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, и я думал о том, что белый текст на черном фоне всегда труднее читать, чем черный текст на белом. Подумав немного об этом, я понял, что мы можем решить эту проблему, сделав текст в темном режиме тоньше, используя переменные шрифты!.

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

Верстка \ CSS 3

Создание масштабируемой архитектуры CSS с помощью BEM и служебных классов

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

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

Верстка \ HTML&CSS

Вы уже используете SVG-фавикон? Руководство для современных браузеров

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

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

Верстка \ CSS 3

Псевдослучайное добавление иллюстраций с помощью CSS

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

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

Верстка \ CSS 3

Создание адаптивных макетов без использования медиа-запросов

От автора: привет всем! Дискуссии на эту тему ведутся с тех пор, как появились grid и flexbox со всеми своими интересными аспектами, заставляющими контент быстро реагировать на область просмотра.

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