Очередной красивый эффект при наведении на картинку, сделанный на чистом CSS
CSS:
CSS Clip-Path Hover Effect
Нужно сделать блок со скошенными / наклонными краями, при этом текст или другие блоки в нем должны отображаться ровно.
Для такой задачи подойдет CSS свойство transform: skew
Самый простой способ сделать два вложенный, к примеру, div и первый повернуть на нужное количеств градусов, а второй на такое же количество, но в обратную сторону (со знаком минус).
Генератор полосатого фона (CSS)
Не могу сказать, что такой инструмент нужен каждый день, но для красивого и необычного оформления, например, демонстрационного контента подойдет хорошо.
Обычные HTML списки, отмеченные точками - выглядят скучными и устаревшими. В этой заметке покажу альтернативное и, на мой взгляд довольно красивое, оформления списков, когда в них много текста.
Каждый пункт списка (<li>) будет выделен так:
Эффект разноцветного подчеркивания ссылок
Довольно красивый эффект - ссылка, при наведении, подчеркивается разноцветной линией.
Естественно так можно подчеркнуть любой блок или элемент.
Создаем 3D куб на чистом CSS
Во многих книгах по 3D графике можно увидеть пример куба, с текстом / текстурами на каждой грани. Нарисовать такое на canvas с использованием javascript, проблемы не составляет, но мало кто знает, что сделать такое можно и на чистом CSS.
В данной статье мне хотелось бы показать несколько примеров 3D-преобразования на CSS.
Часто требуются красивые рамки, у блоков карточек, например, для рекомендуемых товаров, лучших предложений и подобных, внешний вид которых должен "броситься в глаза".
Ниже будет вариант оформления рамок блоков / изображений с использованием шума через svg filter.
Оформление checkbox'а внутри label
Уже есть небольшая памятка о том как стилизовать checkbox спрайтами, но я решил продемонстрировать вариант, когда поле ввода находиться внутри "этикетки" (тега label).
Небольшая памятка о том как стилизовать checkbox, если никаких особых анимаций и элементов оформления не требуется.
Оригинальное зачеркивавшие checkbox'ов
Красивая анимация зачеркивая пунктов чеклиста на css и javascript
и темная тема: