[Перевод] 3D-слайдер на CSS

[Перевод] 3D-слайдер на CSS

Напишем слайдеры изображений на чистых HTML и СSS. Меняем только CSS, разметка в HTML остается неизменной. Внешний вид из-за разного CSS при этом разительно различается, а в слайдеры можно вставить неограниченное число картинок. Сначала мы создали круговой слайдер с бесконечным вращением, похожий на виджет-спиннер с изображениями. Затем мы сделали слайдер, пролистывающий стопку фотографий. Продолжение — к старту курса по Fullstack-разработке на Python. Читать дальше →

Подробнее
[Перевод] Полароидный CSS и совсем немного HTML

[Перевод] Полароидный CSS и совсем немного HTML

В предыдущей статье у нас получился красивый слайдер («карусель») с круговым вращением. А сегодня я создам слайдер, пролистывающий стопку «полароидных» снимков. Пока не смотрите код, сначала я должен вам многое про него рассказать. Поехали! К старту нашего курса по Fullstack-разработке на Python. Читать дальше →

Подробнее
[Перевод] Шейдеры, голограммы и утечка света на чистом CSS

[Перевод] Шейдеры, голограммы и утечка света на чистом CSS

К старту курса по Fullstack-разработке на Python рассказываем, как на чистом современном CSS имитировать шейдеры аккуратным наложением слоёв и эффектов. За подробностями и демонстрациями приглашаем под кат. Читать далее

Подробнее
[Перевод] Анимация при прокрутке с помощью WAAPI и ScrollTimeline

[Перевод] Анимация при прокрутке с помощью WAAPI и ScrollTimeline

Спецификация W3C Scroll-linked Animations — это экспериментальное дополнение, которое позволяет связать развитие эффекта анимации с прокруткой. Подробностями делимся под катом, пока у нас начинается курс по Frontend-разработке. Читать далее

Подробнее
[Перевод] Как написать собственное свойство CSS

[Перевод] Как написать собственное свойство CSS

Благодаря Paint API из состава Houdini можно не ждать выхода новых возможностей CSS. Шаг за шагом автор этого материала показывает, как написать новое свойство CSS для анимации с фрагментацией. Делимся материалом, пока у нас начинается курс по Frontend-разработке. Читать далее

Подробнее