WebDesign Master
Курсы
Адаптивная верстка галереи без JS. HTML + CSS target. Работа с изображениями (Retina img)

Адаптивная верстка галереи без JS. HTML + CSS target. Работа с изображениями (Retina img)

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

Адаптивная верстка галереи без JS. HTML + CSS target. Работа с изображениями (Retina img) - Видеоурок
Смотреть урок на YouTube
Создание контентного сайта на Jekyll от А до Я

Готовый результат урока (HTML верстка): Смотреть

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

  • Архив с исходниками: Скачать с GitHub
  • Последний стартер OptimizedHTML 5: https://github.com/agragregra/OptimizedHTML-5
  • Сайт с иконками для верстки: https://fontawesome.com
  • Сайт с бесплатными картинками: https://pixabay.com

Рекомендую к изучению (дополнительные уроки):

  • Команда "ncu" - обновление пакетов проекта
  • Основы Bootstrap сетки
  • Урок по Visual Studio Code
  • Использование подсистемы Linux
  • Урок по стартеру OptimizedHTML 4
  • Урок по быстрому написанию кода с Emmet
  • Справочник сокращений Emmet
  • Основы Sass
  • Основы Gulp

Установка 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();
	});
});

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Фриланс для начинающих

Я - фрилансер! Базовый курс для начинающих

Другие уроки по теме «Верстка»

  • Создание красивого сайта с горизонтальным Parallax эффектом | Материалы урока
  • Создание сайта портфолио с крутой анимацией | Материалы урока
  • Создание красивого сайта с Parallax эффектом при скролле | Материалы урока
  • Создание Parallax эффекта на сайте при движении мыши | Материалы урока
  • Создание красивого сайта с поддержкой темной темы (HTML, CSS, GSAP) | Материалы урока
  • Создание крутого 3D сайта с анимацией прокрутки | Материалы урока

Разделы сайта:

  • Курсы
  • Инструменты
  • Веб-дизайн
  • Вёрстка
  • CMS

Полезные ресурсы:

  • Установка WSL и окружения
  • Настройка окружения без WSL
  • Настройка VS Code
  • Lazy Load Placeholder
  • Документация Gulp 4
2023 © WebDesign Master