🤹 25 CSS-трюков, которые должен знать каждый разработчик

Современный веб-дизайн требует глубокого понимания возможностей CSS. Мы расскажем о 25 передовых CSS-техниках, которые помогут вам создавать стильные, функциональные и производительные веб-сайты, соответствующие последним трендам.

Этот материал взят из нашей еженедельной email-рассылки, посвященной фронтенду. Подпишитесь, чтобы быть в числе первых, кто получит дайджест.

📧 Подписаться

(function () { let link = document .getElementById ("801e3965-f17f-4474-b191-6f200c8d43e9-https://proglib.io/w/9ac1c881-2"); if (! link) return; let href = link .getAttribute ("href"); if (! href) return; let prefix = link .dataset .prefix; let action = link .dataset .action; link .addEventListener ("click", function (e) { let data = new FormData (); data .append ("url", href); apiFetch (action, { method: "POST", body: data }) .then (function (res) {}) .catch (function (err) { console .error (err); }); }) })();

scroll-behavior: smooth – делает прокрутку страницы плавной:

a[href^="https"] – позволяет стилизовать внешние ссылки отдельно от внутренних:

👨‍💻🎨 Библиотека фронтендера

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»

~ – выбирает и стилизует последующие элементы с использованием комбинатора общего родства. Например, так можно применить стиль к абзацам, идущим после заголовков второго уровня:

:not(.special) – выбирает и стилизует элементы, не имеющие указанного класса:

Адаптивный размер шрифта в зависимости от размера экрана:

Центрирование элементов как по вертикали, так и по горизонтали:

***

С 28 августа по 4 сентября получите 35% скидку на курсы от Proglib Academy и изучите актуальные темы, которые помогут вам стать более продуктивными и востребованными специалистами.

• Онлайн-курс по математике для Data Science: овладейте математическими инструментами, которые лежат в основе анализа данных.
• Базовые модели ML и приложения: изучите основы машинного обучения и их практическое применение.
• Алгоритмы и структуры данных: разберитесь в алгоритмах, которые помогут решать сложные задачи.
• Основы программирования на Python: начните программировать на одном из самых популярных языков.
• Основы IT для непрограммистов: получите базовые знания о ключевых технологиях.
• Frontend Basic: принцип работы современного веба с нуля до первого интернет-магазина: создайте свой первый веб-проект.

***

Увеличение размера элемента при наведении курсора:

Кастомный курсор:

Точная настройка параметров насыщенности, ширины и наклона шрифта:

Ограничение текста определенным количеством строк:

Настройка внешнего вида полосы прокрутки под дизайн сайта:

Статья по теме

20 советов для написания современного CSS

Автоматическое выравнивание колонок по высоте:

Закрепление фонового изображения при прокрутке:

Создание сложных макетов с минимальным количеством кода:

Определение предпочтения пользователя по цветовой схеме (светлая/темная) на основе системных настроек:

Создание контура вокруг текста:

Закрепление элемента при прокрутке:

Градиентные границы:

Создание элемента сложной формы:

Масштабирование изображений в контейнерах разного размера:

text-underline-offset – задает расстояние между текстом и линией подчеркивания (пригодится, когда некоторые буквы выходят за нижнюю границу строки):

inset – сокращенное свойство для задания положения элемента сразу с четырех сторон:

object-position – используется вместе с object-fit: cover для контроля того, какая часть изображения будет отображаться при обрезке:

Добавление отступа сверху при прокрутке к определенному элементу страницы (полезно, когда у вас есть фиксированное меню сверху и вы не хотите, чтобы оно перекрывало содержимое при переходе по якорным ссылкам):

***

Есть ли у вас свои любимые CSS-приемы, которые не вошли в наш список?