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

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

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

html {
  scroll-behavior: smooth;
}

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

a[href^="https"] {
  color: dodgerblue;
}

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

h2 ~ p {
  color: blue;
}

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

li:not(.special) {
  font-style: italic;
}

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

h1 {
  font-size: 5vw;
}

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

.container {
  display: grid;
  place-items: center;
}

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

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

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

button:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease-in-out;
}

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

button {
  cursor: url('custom-cursor.png'), auto;
}

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

body {
  font-family: 'Inter', sans-serif;
  font-variation-settings: 'wght' 700, 'wdth' 75;
}

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

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

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

::-webkit-scrollbar {
  width: 10px;
}
 
::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  border-radius: 10px;
}
 
::-webkit-scrollbar-track {
  background-color: lightgrey;
}

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

.container {
  display: flex;
}
 
.column {
  flex: 1;
}

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

.hero {
  background-image: url('background.jpg');
  background-attachment: fixed;
  background-size: cover;
}

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

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

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

:root {
  --bg-color: white;
  --text-color: black;
}
 
@media (prefers-color-scheme: dark) {
  :root {
	--bg-color: black;
	--text-color: white;
  }
}
 
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

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

h1 {
  -webkit-text-stroke: 2px black;
  color: white;
}

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

header {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 1000;
}

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

button {
  border: 5px solid transparent;
  background-image: linear-gradient(to right, red, blue);
  background-clip: border-box;
  border-radius: 10px;
}

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

div {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: teal;
}

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

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.nav-link:hover {
  text-decoration: underline 2px solid green;
  text-underline-offset: 6px;
}

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

.positioned-element {
  inset: 5px 3px 1px 4px;
}

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

.image {
  height: 350px;
  width: 500px;
  object-fit: cover;
  object-position: center bottom;
}

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

#section-header {
  scroll-margin-top: 100px;
}

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