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


Категории: CSS

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

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

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


Категории: Web, CSS
Пометки: css прямоугольный фон с наклоном

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

pic1


Категории: Web, CSS, Сторонние сервисы

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

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

pic1


Категории: HTML, CSS

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

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


Категории: CSS

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

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


Категории: CSS

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

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

pic1


Категории: CSS

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


Категории: Web, HTML, CSS

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


Категории: Web, HTML, CSS
Пометки: Кастомный чекбокс, оформление checkbox, checkbox css, стилизировать checkbox

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

pic1

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

pic1


Категории: JavaScript, HTML, CSS
Яндекс.Метрика