Верстка \ CSS 3

Использование CSS-форм для элементов  управления и навигации

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

Читать далее

Верстка \ CSS 3

Дилемма наименования переменных размера шрифта

От автора: как правило, проект имеет набор заранее определенных размеров шрифта, обычно в виде переменных, названных таким образом, чтобы добиться некоторого подобия порядка и согласованности. Любой проект значительного размера может использовать что-то подобное. Всегда есть заголовки, абзацы, списки и т. д. Вы можете явно устанавливать размеры шрифта (например font-size: 18px). Сырой CSS как бы. Я действительно встречаю это время от времени — смешивание не только размеров, но и единиц px, rem и em в бессмысленном хаосе.

Читать далее

Верстка \ CSS 3

Позиционирование перекрывающего содержимого с помощью CSS-сетки

От автора: недавно я экспериментировал с CSS-сеткой и свойствами выравнивания для создания макетов компонентов, содержащих несколько перекрывающихся элементов. Эти макеты могут быть оформлены с использованием абсолютного позиционирования и сочетания значений смещения (top, right, bottom, left), отрицательными полями и преобразованиями.

Читать далее

Верстка \ CSS 3

Определение устройств с возможностью наведения указателя мыши

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

Читать далее

Верстка \ CSS 3

Псевдокласс target для модального окна

От автора: в одном из предыдущих уроков вы могли увидеть реализацию модального окна с помощью HTML тега details. В данном уроке вы познакомитесь с еще одним вариантом реализации компонента модального окна и для этого будет использован псевдокласс target.

Читать далее

Верстка \ CSS 3

Простой CSS-хак для сокращения времени загрузки страницы

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

Читать далее

Верстка \ CSS 3

22 CSS-секрета, которые сделают вас макетным ниндзя

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

Читать далее

Верстка \ CSS 3

Использование эффективных изображений в CSS с помощью image-set()

От автора: функция CSS image-set() поддерживается в браузерах на основе Chromium с 2012 года и в Safari с версии 6. Недавно поддержка появилась в Firefox 88. Давайте погрузимся в суть вопроса и посмотрим, что можно и чего нельзя делать с image-set().

Читать далее

Верстка \ CSS 3

Пользовательские полосы прокрутки в CSS

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

Читать далее