​​Стили по умолчанию


Что такое дефолтные стили браузеров и как с ними работать - еще один туториал в комиксах от Julia Evans (@b0rk)

#css

​​Candy Color Button Animation

Исходный код (codepen)

Анимация кнопок на чистом CSS

#css

​​Day & Night

Исходный код (codepen)

Объяснение принципов CSS Transition и CSS Animation от Stéphanie Walter на примере смены дня и ночи

#css

​​CSS Inspector


Инструменты браузера для работы с CSS - очередной туториал в комиксах от Julia Evans (@b0rk)

#css

​​filters.css

GitHub

Удобная CSS-библиотека для работы с фильтрами

#css

​​Горизонтальный скролл

немного полезной информации о горизонтальной прокрутке в CSS

#CSS

​​Динозавр (CSS)

Исходный код (codepen)

Динозавр на чистом CSS от Lynn Fisher

#css

:focus-visible

Скрываем стили фокуса для мыши:

:focus:not(:focus-visible) {
  outline: 0;
}

и оставляем стили фокуса для клавиатуры:

:focus-visible {
  outline: 3px solid blue;
}

Следует учитывать, что псевдокласс :focus-visible в настоящее время применим для актуальных версий Chrome, Firefox, Opera, Edge и не используется в Internet Explorer и Safari

#css

​​CSS: Bike

Исходный код (codepen)

Карточка товара на чистом CSS. Автор Adam Kuhn

#css

​​Hover (CSS

Исходный код (codepen)

Интересный hover-эффект на чистом CSS. Автор: Aaron Inker

#css

​​CSSometric

Исходный код (codepen)

Изометрическая анимация на CSS. Автор: Ryan Mulligan

#css

​​CSS анимация: Pac-Man

Исходный код (codepen)

Анимированные герои знаменитой видеоигры Pac-Man на чистом CSS

#css

Layoutit!

Интерактивный CSS grid генератор

#css

​​Добавляем CSS в console.log

Объявить CSS-правила для текста выводимого через console.log можно с помощью %c

#js #css

​​Адаптивные змеи и их значение для CSS

Читать (англ.)

Разбираем верстку на примере мема про адаптивную змею

#css

​​CSS: inset

Теперь для абсолютного позиционирования элементов есть свойство inset, которое заменяет top, right, bottom и left. Работает в Chrome, Firefox, Opera, Safari. Традиционно не работает в IE и Edge

И это очень удобно, когда нужно растянуть фиксированный элемент по всей площади родителя:

#frontend #css

Material Tailwind

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

#frontend #css

Beer CSS

Проект с открытым исходным кодом и множеством суперфункций, например, в основе Beer CSS лежит Material Design 3, готовый к использованию с любым JS-фреймворком

#frontend #js #css

CSS: Разделитель в стиле Pac-Man

Работа со стилями, на которую стоит обратить внимание: анимированный разделитель с героями 2D-игры Pac-Man.

#frontend #css