Создание сайта

#3 – Создание секция с играми

#3 – Создание секция с играми

Продолжаем построение сайта. За урок мы добавим несколько дополнительных секций к странице нашего сайта. В частности мы поработаем с секцией трендовых игр, отобразим текст с призывом и сделаем секцию с баннером на весь экран.

Видеоурок

Создание веб-секций с изображениями на весь экран является популярной практикой в современном веб-дизайне. Это не только придает сайту визуальное очарование, но и улучшает пользовательский опыт, делая контент более привлекательным.


Фиксация изображения

Свойство fixed позволяет закрепить изображение на заднем плане, в то время как пользователь прокручивает страницу. Это создает интересный эффект параллакса, который добавляет динамизм и глубину дизайну.

.section-background {
	background-attachment: fixed;
	width: 100%;
	height: 100%;
	background-image: url('your-image.jpg');
	background-size: cover;
	background-position: center;
}


Креативное оформление

CSS свойство background-blend-mode позволяет смешивать цвета фона с изображением. Это может быть использовано для создания стильных эффектов, таких как затемнение изображения или наложение цветового фильтра.

.section-background {
	background-image: url('your-image.jpg'), linear-gradient(to right, rgba(69, 123, 157, 0.7), rgba(29, 53, 87, 0.7));
	background-blend-mode: multiply;
	background-size: cover;
	background-position: center;
}

Советы по оптимизации

  • Адаптивность: Используйте медиа-запросы для корректировки размеров изображений на разных устройствах, чтобы обеспечить быструю загрузку и хорошее качество изображений.
  • Производительность: Выбирайте форматы изображений, оптимизированные для веба, такие как WebP, для уменьшения времени загрузки.
  • Доступность: Не забывайте добавлять альтернативный текст для изображений и следить за контрастностью текста над фоном, чтобы обеспечить читаемость.

Материалы для курса

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Онлайн редактор кода

Загрузка...

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Также стоит посмотреть

Создание адаптивного сайта
4 урока
Создание сайта с нуля | Полноценная верстка сайта
11 уроков
Изучение ASP.NET Core MVC. Создание сайтов на C#
10 уроков
Изучение технологии Bootstrap (верстка сайта)
16 уроков
Изучение HTML5 для начинающих!
18 уроков
Вёрстка адаптивного сайта на Bootstrap 4
6 уроков
Комментарии
Добавить комментарий

Пока комментариев нет