Саморисующиеся фигуры на CSS

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

Всё, что вам требуется, добавить в код SVG к строку pathLength="1", а затем прописать следующие стили в CSS:

path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Этого достаточно для того, чтобы оживить ваше изображение. Конечно, лучше всего это работает с простыми картинками, как в примере из видео. Но вы можете поэкспериментировать и с более сложными вариантами.

Подробнее о способе можно почитать здесь.

#css #лайфхак

Гигантская библиотека CSS-анимаций

Если хотите добавить анимацию, но не до конца понимаете, как она будет выглядеть, то вам поможет Animista.

Просто откройте каталог, выберите нужную анимацию и посмотрите, как она выглядит. Такой подход помогает быстрее подобрать необходимый тип и настройки анимации.

Пробуем по ссылке.

#css #веб

Switch Day and Night - Cat

Проект, который реализован на чистом CSS, покажет вам, как можно создать переключатель стилей по псевдоклассу :checked

#codepen #css

Интерактивное руководство по CSS Transitions

Подробный гайд по переходам в CSS от Josh W. Comeau. Тут он собрал всю информацию с интерактивными примерами, которые помогут вам разобраться во всех нюансах.

https://www.joshwcomeau.com/animation/css-transitions/

#css #веб #фронтенд

Матовое стекло следующего уровня с backdrop-filter в CSS

Для создания эффекта матового стекла на веб-сайте самый просто способ — использования filter: blur(). Но Джош Комо предлагает вариант с помощью backdrop-filter: blur(), ещё одного CSS-свойства, которое делает эффект круче.

В этой статье вы узнаете, чем оно отличается от классического свойства filter, как браузер вычисляет «то, что под элементом», какие эффекты (blur, brightness, contrast…) сочетаются между собой и где сегодня есть поддержка. В конце — интерактивная песочница: меняйте параметры и сразу видите результат.

#фронтенд #css

Первый сайт «своими руками»: пошаговая инструкция без фреймворков

Начало не всегда должно быть сложным. В этом гайде поэтапно разбирается создание сайта на чистом HTML и CSS — от структуры папок до стилей, адаптивного меню и внедрения Google Fonts. Полезно как новичкам, так и тем, кто хочет освежить фундамент перед переходом на современные фреймворки.

А вы когда последний раз вручную писали сайт без сборщиков?

#фронтенд #html #css