grid + place-items

Этот метод позволяет выравнивать элементы по горизонтали и вертикали всего двумя строками кода.

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

#css

Анимация сделанная с помощью псевдоэлементов ::before и ::after

#css #codepen

Гуляющий хамелеон на чистом CSS

#css #codepen

Добавление эффекта свечения к тексту

text-shadow требует четырех значений, первые два из которых представляют горизонтальное и вертикальное положение тени соответственно. Третье значение представляет размер радиуса размытия, а последнее значение представляет цвет тени. Чтобы увеличить размер эффекта свечения, мы бы увеличили третье значение, которое представляет радиус размытия. Или, выражаясь по-другому:
text-shadow: [x-offset] [y-offset] [blur-radius] [color];

#css

columns

Этот метод позволяет разбивать текст на столбцы. Сolumn-count определяет количество столбцов, column-gap устанавливает размер зазора между колоннами, и column-rule задает стиль вертикальной линии между столбцами.
Columns является сокращенным свойством для column-count и column-width.

#css

text-overflow

Cвойство text-overflow равное ellipsis позволяет добавлять «…» в конец текста, когда он выходит за пределы контейнера.

p {
  text-overflow: ellipsis;
}

#css

scroll-behavior

Установив значение scroll-behavior равным smooth, мы имеем возможность легко осуществить плавный скроллинг между разделами страницы.

#css

Свойство flex-grow

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

.wrapper {
    display: flex;
    flex-wrap: wrap;
}
.item {
    flex-grow: 1;
}

#css

Текст с металлической рамкой на CSS

#codepen #css

CSS свойство backdrop-filter позволяет вам использовать визуальные эффекты - такие как размытие или смещение цвета фона - за элементом. Так как это применяется ко всему за элементом, чтобы увидеть эффект, вы должны сделать элемент или его фон по крайней мере частично прозрачными.

#css