Галерея фотографий на сайтГалерея фотографий на сайт. Здравствуйте читатели нашего блога сегодня мы поговорим о создании простой галерея фотографий для сайта, ее мы будем делать  с помощью html css и canvas. А сейчас мы расскажем вам что такое canvas. В html 5 имееться такой тег canvas он позволяет нам использовать хороший способ для работы с графикой  а также рисованием различных видов объектов конечно же

а также рисованием различных видов объектов конечно же с использованием Javascript. Рисование обьектов происходит в растровой  графике и так начнем

 

1. Html Разметка

Начнем мы пожалуй как всегда с простой html разметки наше галереи.

 

2. Css стили 

Будем использовать изображение 300px на 300px.

 

3. Canvas html5

Вот теперь мы начнем использовать html5 canvas для рисование оттенков серой версии наших изображений.

 

4. Стили для Canvas html5

Здесь мы зададим эффекты для canvas такие как как будет выглядеть изображения в обычном состоянии и как оно будет выглядеть кода на него будут наводить курсор мыши то есть hover эффект

Вот и все Галерея фотографий на сайт  готова после нескольких выпоненых  действий мы получаем простую но красивую галерею для вашего  сайта.

Скачать исходник

 

 

 

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