Гигантская библиотека 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

Возможно, что эти HTML- и CSS-ошибки есть в вашем коде

Казалось бы, основные грабли веб-верстки давно известны, но ловушки ждут в деталях — от неожиданных эффектов font-size в rem и px до проблем с outline и адаптацией стилей к accessibility.

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

https://habr.com/ru/companies/ruvds/articles/928018/

Я вот не задумывался о некоторых нюансах, описанных в статье. А вы?

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

Что такое @scope в CSS #простымисловами

@scope в CSS — это возможность ограничивать действие стилей определённой областью на странице. То есть вы можете задать стили, которые будут применяться только внутри конкретного блока, а не по всей странице.

Простой пример

Допустим, у вас есть два блока с одинаковыми заголовками:

<section class="blog">
  <h2>Заголовок блога</h2>
</section>

<section class="sidebar">
  <h2>Заголовок сайдбара</h2>
</section>

Раньше вам приходилось писать селекторы вроде .blog h2 { ... }, чтобы не затронуть другие заголовки. С @scope можно сделать это аккуратнее:

@scope (.blog) {
  h2 {
    color: darkblue;
  }
}

Теперь стиль применяется только к заголовкам внутри .blog, и не влияет на другие h2 на странице.

Зачем это нужно?

— Уменьшает конфликт между стилями разных компонентов.
— Упрощает переиспользование компонентов — один блок не «ломает» другой.
— Делает CSS более предсказуемым и читаемым.

### Что важно знать

— @scope сейчас поддерживается не во всех браузерах, но его уже можно попробовать в Chrome (начиная с версии 117) и некоторых других.
— Это не замена классическим селекторам, а дополнительный инструмент для ограничения области действия стилей.

#css #фронтенд

Скелетон: как сделать загрузку визуально приятной

Для загрузки контента на сайте или в приложении требуется время — иногда долисекунд, а иногда гораздо больше. Во втором случае нужно дать пользователю понять, что всё идет по плану, сайт не сломался и контент вот-вот будет. Для этого используются скелетоны — анимированные заглушки вместо контента до момента его загрузки. Они показывают не только, что идет загрузка, но и то где и даже какой контент будет загружен — картинка или текст. Это воспринимается лучше, чем обычный спиннер и делает интерфейс чище.

Я нашёл для вас гайд, как сверстать такой скелетон для карточки статьи за несколько минут. Демонстрируется HTML-код и CSS-стили с переменными, чтобы сразу получать плавную анимацию и адаптивную структуру без кучи лишнего кода.

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

Продолжаем делать 3D-текст без использования JS

В прошлой статье мы научились создавать статичный текст с эффектом 3D, используя современные возможности CSS. На этот раз пойдем дальше и добавим ему анимацию.

Первая часть тут.
А вторая тут.

#фронтенд #css

— Насколько хорошо вы умеете работать с CSS?
— Настолько, что рисую на CSS картины.
— Что?
— Что?

Целый аккаунт с похожими работами: https://twitter.com/asyrafhussin4

#css @tproger_web

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

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

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

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

#css #веб

Полезная функция в Chrome Dev Tools

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

Инструкция по входу в раздел на видео.

#css #chrome