CSS:

Интересный эффект наклона картинки, например, аватара, при наведении мышкой (на CSS).

Задача - сделать разрыв бордюра на CSS.

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

Схематично должно отображаться так:

Очередной красивый эффект при наведении на картинку, сделанный на чистом CSS

Нужно сделать блок со скошенными / наклонными краями, при этом текст или другие блоки в нем должны отображаться ровно.

Для такой задачи подойдет CSS свойство transform: skew

Самый простой способ сделать два вложенный, к примеру, div и первый повернуть на нужное количеств градусов, а второй на такое же количество, но в обратную сторону (со знаком минус).

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

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

Каждый пункт списка (<li>) будет выделен так:

Довольно красивый эффект - ссылка, при наведении, подчеркивается разноцветной линией.

Естественно так можно подчеркнуть любой блок или элемент.

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

В данной статье мне хотелось бы показать несколько примеров 3D-преобразования на CSS.

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

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

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