Курсы
HTML верстка слайдера с анимацией на чистом CSS

HTML верстка слайдера с анимацией на чистом CSS

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

HTML верстка слайдера с анимацией на чистом CSS - Видеоурок
Смотреть урок на YouTube
Все курсы канала WebDesign Master

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

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

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

Установка GraphicsMagick

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

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

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

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

brew install gs graphicsmagick

Если у вас подсистема Linux в Windows или самостоятельная операционная система 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

Создание сайта от А до Я. Комплексный курс
Большой комплексный курс по современному веб-дизайну

Веб-дизайн с нейросетями для начинающих
Фриланс для начинающих

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

Другие уроки по теме «Веб-разработка»