CSS:

Бывает, что нужно вставить на страницу сайта видео с YouTube, но если использовать обычный метод "embedded code":

то его обложка может быть не подходящей:

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

Проблема: swiperjs растягивался на всю шину станицы, но картинку он позиционировал по верхнему левому углу и, при сжатии экрана, он ее обрезал.

Как было (на большом и среднем разрешении):

Как стало (на большом и среднем разрешении):

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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