Загрузка...
Запечатлеть все тонкости реальной тени с помощью box-shadow не просто, но кое-то можно улучшить, применяя к блокам несколько слоев теней.
Смягчение теней с помощью слоёв в CSS-свойстве box-shadow
Метка: css3
Уменьшающаяся при прокрутке «шапка» страницы без JavaScript
Обычно, чтобы добавить такой эффект уменьшения шапки при скролле страницы, используется немного JavaScript и CSS, но с появлением position: sticky то же самое можно сделать, используя только CSS.
Передача данных между CSS и JavaScript с помощью CSS-переменных
Практические примеры обмена данных между CSS и JavaScript с помощью CSS-переменных. Передача значений настраиваемым CSS-свойствам из Javascript.
CSS Scroll Snap
Ключевые свойства спецификации Scroll Snap. CSS-cвойство scroll-snap-type используется в контейнере со скроллом для определения его типа и направления.
Три логические CSS-функции: min (), max () и clamp ()
Узнайте, как управлять размерами элементов, поддерживать правильный интервал и реализовывать гибкую типографику с помощью этих хорошо поддерживаемых CSS-функций.
CSS свойство clip-path
clip-path создает ограниченную область, которая определяет какая часть элемента останется видимой.
CSS border-radius
border-radius — это CSS-свойство, которое определяет, как скругляются границы блока.
CSS: max-width с разными единицами измерения
Примеры применения различных CSS единиц измерения длины для обозначения максимальной ширины контейнера.
CSS: современный способ оформления скроллбаров
Настройка полосы прокрутки, цвет scrollbar и стилизация скроллбара, как изменить стиль полосы прокрутки
Фиксирующаяся при скролле панель навигации, только CSS
Как при прокрутке закрепить панель навигации только с помощью CSS и не скроллить (sticky navbar) ее вместе с контентом: position: sticky и scroll-margin-top
Когда в CSS использовать rem, em, px, или что-то другое
Использование только пикселей для CSS-размеров шрифта, контейнеров, отступов, позиционирования и пр. — путь простой, но тупиковый. Когда и какие единицы измерения лучше использовать
CSS многоточие после нескольких строк
CSS-свойство line-clamp помогает подрезать текст на определенное количество строк.
Набор переключателей на чистом CSS
MoreToggles.css — это библиотека на чистом CSS, которая предоставляет большое количество привлекательных переключателей. Вам нужно только добавить название CSS-класса для div.
Маскированный и слоёный CSS градиенты
Небольшой трюк с маской и слоёным градиентом (CSS linear-gradient) для четырёх углов контейнера.
Пользовательские предпочтения: prefers-color-scheme
CSS prefers-color-scheme это медиа-запрос, который определяет текущую настройку темы операционной системы пользователя.
Делаем CSS треугольники
Примеры реализации треугольников с помощью CSS
Список CSS-селекторов
Большой современный (2020) список css-селекторов с краткими пояснениями по применению и использованию.
Создание динамической фото-сетки с режимами смешивания CSS
Сперва фото были размещены вручную, чтобы избежать совпадения цветов. Теперь, применяя только CSS с помощью псевдоэлементов и фильтров SVG изменяем любую фотографию в сетке в любое время.
Flexbox Froggy
Flexbox Froggy — игра, которая представляет концепции и свойства CSS flexbox в веселой и непринужденной форме.