Адаптивная вёрстка галереи без JS. CSS target. Работа с изображениями — Retina img. HTML сниппеты #5

Всем привет, друзья! Сегодня мы создадим секцию галереи на чистом CSS (без JS), рассмотрим работу с изображениями — автоматическую оптимизацию, затронем подготовку изображений для Retina-дисплеев (экранов с масштабированием интерфейса от 150% и выше) посредством HTML5 атрибута srcset и я расскажу о других интересных и полезных моментах, с которыми вы можете столкнуться при вёрстке изображений в своих проектах.Поделиться

Дополнительные материалы и референсы:

Установка GraphicsMagick

Установите GraphicsMagick для автоматической обработки изображений, если вы используете стартер OptimizedHTML 4. В комментариях Gulpfile.js стартера OptimizedHTML 4 есть краткая инструкция по установке GraphicsMagick в Linux или в подсистеме Ubuntu для Windows 10.

Если вы используете стартер OptimizedHTML 5, установка GraphicsMagick и других дополнительных компонентов не требуется.

Если Node.js используется непосредственно в вашей системе Windows, установите бинарник с сайта graphicsmagick.org.

Если у вас MacOS, рекомендую установить GraphicsMagick через недостающий менеджер пакетов «brew«:

brew install gs graphicsmagick

Если у вас подсистема Linux в Windows 10 или самостоятельная операционная система Linux, выполните команду (на примере Debian):

sudo apt update; sudo apt install graphicsmagick

Изменение хеша в строке браузера без «Перепрыгивания»

Бнусом — JavaScript код, который предотвращает так называемое «перепрыгивание» страницы при активации определённого хеша:

var hashLinks = document.querySelectorAll("a[href^='#']");[].forEach.call(hashLinks, function (link) {	link.addEventListener("click", function (event) {		event.preventDefault();		history.pushState({}, "", link.href);		history.pushState({}, "", link.href);		history.back();	});});

Источник сайта: https://webdesign-master.ru/blog/html-css/2019-05-08-css-gallery.html

Автор сайта: webdesign-master.ru

Автор публикации

не в сети 1 неделя

admin

0
Комментарии: 1Публикации: 38Регистрация: 22-01-2020

Добавить комментарий

Авторизация
*
*
Регистрация
*
*
*
Генерация пароля