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

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

Сonic-gradient

Функцию конического градиента можно использовать для создания интересного диапазона шаблонов изображений, таких как конические формы, круговые диаграммы, цветовые круги и глянцевые поверхности. Конические градиенты вращают точки цвета вокруг центральной точки (а не исходят из центральной точки, как радиальный градиент). Цветовые ограничители конического градиента размещены по окружности круга. Чтобы создать круговую диаграмму, мы используем перекрывающиеся точки цвета (с резкими переходами).

.pie-chart{
    background: conic-gradient(red 120deg, green 120deg 240deg, blue 240deg);
}

#css

calc()

Практическое назначение calc(): выполнение основных математических операций с возможностью интерполяции между типами единиц.

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

Пример:
.content {
  height: calc(100vh - 60px);
}

#css

inset()

Значение inset() вставляет обрезанную область от края элемента, и могут быть переданы значения для верхней, правой, нижней и левой кромок. Также можно добавить border-radius, чтобы изогнуть углы вырезанной области с помощью ключевого слова round.
В примере есть два блока с классом .box. Первый прямоугольник не имеет отсечения, второй отсекается с использованием значений inset().

#css

Orientation — это полезная медиа-функция, которая позволяет вносить изменения в зависимости от ориентации экрана. Может иметь два значения: portrait и landscape.

Но что браузер считает portrait и что landscape? Значение portrait будет вызывать изменения каждый раз, когда высота области просмотра больше ширины. Аналогично, если ширина больше, чем высота, область просмотра будет landscape.

#css #адаптив

Анимация обрезанной области

CSS-переходы и анимация могут быть применены к объекту clip-path для создания интересных эффектов. В следующем примере я анимирую круг при наведении курсора, переходя между двумя кругами с другим значением радиуса.

#css

Функция inverted-colors полезна, если вам нужно применить некоторые стили, когда системные цвета инвертированы.
Для чего мне инвертировать системные цвета? Обычно это очень полезно, если вам нужно улучшить читаемость.

Также имейте в виду, что при инвертировании цветов рекомендуется увеличивать размер шрифта и уменьшать толщину шрифта. Это отличная вещь, которую вы можете сделать с помощью этой медиа-функции!

@media screen and (inverted-colors: inverted) {
/* Ваш код */
}

#css

Tailwind CSS, новый перспективный фреймворк, который делает себе имя с 2017 года. Tailwind предоставляет набор предварительно созданных служебных классов, позволяя разработчикам напрямую стилизовать элементы HTML без необходимости создавать классы CSS или вообще писать какой-либо CSS.

#css #полезно

circle()

Как вы видели, значение circle()создает круглую обрезанную область. Первое значение — это длина или процент и радиус круга. Второе необязательное значение позволяет вам установить центр круга. В приведенном ниже примере я использую значения ключевых слов, чтобы установить обрезанный кружок вверху справа. Вы также можете использовать длину или проценты.

#css

Атрибут cite

И <q>, и blockquotes могут использовать атрибут цитирования (cite). Этот атрибут содержит URL, который предоставляет контекст и / или ссылку на цитируемый материал. Спецификация подразумевает, что URL может быть окружен пробелами.

Атрибут cite не виден пользователю по умолчанию. Вы можете добавить его с помощью магии CSS, как показано в следующей демонстрации.👇

#html #css

CSS Grid функция auto-fill()

auto-fill() – ключ ко всему. Необходимо чтобы каждая строка заполнялась максимальным числом колонок. Детально прочитать про auto-fill можете в замечательной статье Sara Soueidan «the difference between auto-fill and auto-fit». В этой статье есть видео, показывающее принцип работы.

#css

Эффект замены текста при наведении мыши на ссылку

С этим эффектом есть небольшая хитрость. Магия заключается в использовании data-атрибута. С его помощью задается текст, который будет въезжать в область видимости. Также он вызывается со свойством content у псевдо-элемента ::after на ссылке. 

#css

Reseter.css объединяет все стили вашего браузера по умолчанию, переопределяя готовые стили. Это большая разница, когда normalize пытается сохранить, а Reseter.css переопределяет для большей поддержки. Нормализация работает с учетом браузеров при ее создании. Reseter.css поддерживает все браузеры и он улучшает кросс-браузерность.

• Исправленные ошибки и несоответствия браузера.
• Перезагружает различные стили элементов.
• Доступны в Sass, Scss, Less, Stylus, стилизованные компоненты (js, mjs, ts).
• Размер файла — 2,59 КБ.
• Включает нормализацию всех элементов.
• box-sizing: border-box; set;
• Проверено во всех браузерах с помощью BrowserStack.

#css

Работа с aspect-ratio гораздо проще: указываете ширину и высоту соотношения сторон через слэш или укажите число с плавающей точкой. 2 примера соотношения сторон ниже работают одинаково:

.aspect-box {
  aspect-ratio: 3 / 2;
}
.aspect-box {
  aspect-ratio: 1.5;
}

Ширину и высоту можно явно указать для элемента, и aspect-ratio будет работать ровно так, как вы ожидаете: если какое-то разрешение не указано, оно автоматически определится по соотношению сторон. Если указать для ширины и высоты не auto, то соотношение сторон больше не применяется. Это не баг. Так и задумано, это удобно. 👇

#css