Создавая свой сайт вы, наверное, не раз задумывались над тем, как красиво можно оформить элементы на будущем ресурсе необходимым образом, чтобы пользователю было все предельно понятно но при этом не загромождало визуально взор. В данном случае вам не нужно строить велосипед, и мучатся создавая то, что до вас уже было изобретено. В данном уроке мы рассмотрим как можно оформить изображения с помощью элемента canvas. Который позволит визуально выделить ваши изображения придав при этом им особую изюминку.

Идея состоит в том, что серая «копия» изображения будет создаваться элементом canvas, а визуальное преобразование при наведении курсора будет выполняться трансформациями CSS3. И так, приступим.

Шаг 1. HTML

Разметка очень простая. Каждый элемент галереи является пунктом неупорядоченного списка.

Как вы заметили-разметка достаточно простая, по этому более детально на ней останавливаться не стоит, перейдем к следующему шагу.

Шаг 2. CSS

Для начала рассмотрим набор стилей простого сброса:

Мы используем изображения размером 300px x 300px. Основной контейнер #wrap центрируется по высоте (margin: 0 auto) и получает ширину 1020px (=340 x 3). Пункт списка получает свойство  float : left и позиционируется относительно.

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

Добавим стили для элемента canvas.

Шаг 3. Canvas

Теперь приступим к использованию элемента HTML5 canvas, для формирования серой версии изображения.

Функция createCanvas создает элемент, получает копию изображения, выполняет конвертацию и выводит результат в элемент canvas, а затем вставляет его в структуру DOM. С помощью метода .each() функция createCanvas выполняет итерации по всем изображениям в списке #gallery.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: