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

pic1

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

pic1

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


Категории: Web, CSS, JQuery
Пометки: Как вывести YouTube виде во всплывающем окне со своем preview

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

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

pic1

pic1

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

pic1

pic1


Категории: Web, JavaScript, CSS
Пометки: Как центрировать картинку в swiperjs

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


Категории: CSS
Пометки:

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

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

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

pic1


Категории: CSS

Очередной красивый эффект при наведении на картинку, сделанный на чистом 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
Яндекс.Метрика