CSS:

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

Ниже будет вариант оформления рамок блоков / изображений с использованием шума через svg filter.

Уже есть небольшая памятка о том как стилизовать checkbox спрайтами, но я решил продемонстрировать вариант, когда поле ввода находиться внутри "этикетки" (тега label).

Небольшая памятка о том как стилизовать checkbox, если никаких особых анимаций и элементов оформления не требуется.

Красивая анимация зачеркивая пунктов чеклиста на css и javascript

и темная тема:

Подборка визуальных эффектов с минимум CSS кода. Реакции на наведение / клик, ввод текста.

Красивое оформление - обрезание картинки на CSS

При наведении круг немного увеличивается, а картинка всплывает (приближается к нам), сделано на чистом CSS.

Сразу смотрим демо.

Довольно красиво на сайте может смотреться эффект, когда текст отображается по одной букве, так, словно его набирают на печатной машинке, или клавиатуре.

Javascript вариаций я встречал много, но ниже приведу вараинт, сделанный на чистом CSS

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

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

Пример создания сетки (набора плиток) на CSS grid. Мозаика выглядит интересно, с учетом использования grid-row: span 2; и grid-column: span 2; для объединения ячеек.

Один из тех случаев, в которых лучше один раз увидеть, чем много раз услышать.

По сути это неоновая ободка текста (text-shadow) и эффект мерцания через @keyframes