Война бесконечности в HTML и CSS

1656677668 vojna beskonechnosti v html i css

от Kunal

В этой публикации мы собираемся создать постер фильма «Мстители: Война бесконечности» в HTML и CSS.

Вот что мы будем строить:

1*bKfG0yasGD590ClJBKDetQ

Выглядит интересно, не правда ли?

Вот несколько важных понятий, которые вы узнаете при создании этого плаката:

  • Как создать фоновое изображение для вашей страницы на весь экран
  • Центрирование элементов по горизонтали в CSS
  • Центрирование элементов по вертикали в CSS
  • Встраивание видео Youtube в HTML
  • Что такое Margin Collapse
  • Как загрузить собственные шрифты из локального файла
  • Как загрузить шрифты из Google fonts

Это будет весело, так что давайте окунемся.

Чистый лист

Давайте сначала поговорим об одной странице.

Вот так выглядит структура папок моего проекта:

1*SHnVL-WZQ0muKIKwoo1lWQ

Наша таблица стилей “styles.css” содержится в папке CSS, пользовательский файл шрифта, который мы загрузим, попадает в папку fonts, фоновое изображение, которое мы загружаем, попадает в папку img, а наш HTML-код находится в папке “infinity -war .html”.

Вот мой HTML файл для пустой страницы. Мы будем опираться на эту пустую страницу:

Если вы не понимаете вышеприведенный код, то, вероятно, вы впервые кодируете в HTML. Я бы рекомендовал начать здесь: Как сделать бургер в HTML – учебник для начинающих.

Полное фоновое изображение

Сначала загрузите изображение и сохраните его в папке img.

1*YhsGz4lXux0XEYL2NZkQJQ

Примечание: все права на изображение принадлежат Marvel Studios, используются здесь только для обучения.

Обычно мы используем <img> для включения изображений в HTML. Но для этой конкретной цели мы создадим div, заставим div покрывать весь экран, а затем установим фоновое изображение для этого div с помощью свойства CSS «background-image».

Вот наш HTML:

и наш CSS:

Как видите, мы создали div и дали ему класс в нашем HTML-файле. В нашем CSS-файле мы установили ширину и высоту на 100%, чтобы они покрывали весь экран. Мы устанавливаем фоновое изображение с помощью свойства background-img.

Обратите внимание, как мы ссылаемся на файл изображения: url("../img/infinity-war-wallpaper.jpg"). Вы это видите .. в начале пути? Видите ли, мы ссылаемся на файл изображения, который находится в папке «img», из нашего файла styles.css, который находится в папке «css», не правда ли?

Итак, нам нужно выйти из одной папки, а затем ссылаться на путь. что .. переносит нас на одну папку выше в структуре папок.

Давайте обновим страницу в браузере и увидим результат.

Ааа, это все еще пустая страница.

На самом деле, здесь нам не хватает одной детали.

Когда мы устанавливаем высоту или ширину в %, скажем, 100% в нашем случае, это не 100% экрана – это 100% размера родительского элемента.

Что является родительским элементом div? <body>. Что является родительским элементом для body? .

Итак, нам нужно установить высоту нашего тела и элементов HTML на 100%. Давайте сделаем это и проверим, работает ли это:

Теперь мы получаем такой результат:

1*ox5E8h7eEJyVs3moBMQy7Q

Ладно, если вы внимательно посмотрите на это, вы увидите, что здесь есть две проблемы:

  • вокруг изображения белый промежуток — вы видите это?
  • изображение увеличено, не правда ли?

Давайте разберемся с этими проблемами поочередно.

Элемент body по умолчанию имеет некоторый запас. Вот почему мы видим этот пробел вокруг изображения.

Давайте удалим поле, установив для него значение 0 на теле:

Обновите браузер, и вы увидите, что белый промежуток исчез и полоса прокрутки отсутствует.

Далее разрешим проблему масштабирования изображения. По умолчанию изображение отображается в оригинальном размере. Мы можем изменить это, чтобы масштабировать изображение таким образом, чтобы оно покрывало экран, установив значение «покрытие» для свойства «размер фона».

Мы также установили backgound-position для центрирования фонового изображения.

Обе проблемы разрешаются.

Снижение маржи

Давайте добавим заголовок с помощью <h1> и придайте ему белый цвет с помощью свойства «color» в CSS:

и наш CSS:

Выход:

1*epGPR0ycthJ6PyrYJ3bEQg

Мы что-то напутали. Откуда взялся этот белый разрыв?

Ну, оказывается, элемент h1, как и элемент body, также имеет некоторый запас по умолчанию и так же элементы h2, h3, h4, h5 и h6.

Но даже если элемент h1 имел поле, оно должно отображаться с некоторым промежутком. внутри div с нашим фоном. Итак, почему он показал пробел наружу div?

В идеале это должно было отражаться так:

1*XOd5CXCEZbEbMAmpZrGFSw

Но он отображает промежуток над div «full-bg».

Это происходит из-за понижения маржи.

Если у вас есть два блочных элемента (в нашем случае div и h1), а родительский элемент не имеет отступа или рамки, то верхнее и нижнее поля дочернего элемента будут отображаться как верхнее и нижнее поля отцу. Это называется уменьшением маржи. Поле дочернего элемента сворачивается вместе с родительским полем.

Если родительский элемент имеет отступление даже в 1 пиксель или имеет рамку не менее 1 пикселя, этого не произойдет. Давайте добавим 1 пиксель отступления к нашему full-bg div и посмотрим на его эффект:

Свертывание поля исправлено.

Но вы заметили крошечную разницу?

Ваш браузер теперь имеет горизонтальную и вертикальную полосы прокрутки. Это означает, что ширина и высота div увеличились.

как?

Отступ и рамка увеличивают размер элемента

Это еще одно поведение по умолчанию, которое вы должны помнить. Скажем, вы создаете div размером 100 x 100 пикселей и прибавляете ему отступление 10 пикселей. Размер div теперь станет 110 x 110 пикселей.

Да, отступление, которое вы предоставляете элементу, добавляется к размеру элемента. То же самое с пределом: если вы дадите предел 4px своему элементу, его размер увеличится на 4px.

В идеале мы не хотим увеличивать размер элемента, а скорее убавляем содержимое внутри элемента, чтобы освободить пространство для заполнения и рамки.

Мы можем добиться этого, установив для свойства «box-sizing» значение «border-box». Давайте сделаем это:

Обновите браузер. Бам, полосы прокрутки исчезли.

Раздел и заголовок

Если вы увидели изображение конечного результата, вы увидите, что нам еще нужно добавить подзаголовок, видео YouTube и дату выпуска. Целесообразно сгруппировать все эти элементы в раздел, поскольку эти элементы соединены друг с другом. Давайте создадим раздел с помощью <section> и вставьте в него наш h1:

Все элементы нашего плаката попадут в этот раздел контент плаката.

Вам может быть интересно, почему мы не использовали здесь div — почему section?

Фактически, в HTML5 все было «div». На самом деле, мы можем создавать целые веб-сайты только с элементами «div». Но мы этого не делаем, поскольку целесообразнее включить изображение с элементом целесообразнее включить абзац сh tэлемент

и подобным образом имеет смысл группировать содержимое подобного theme in tэлемент

.

Итак, эмпирическое правило: используйте <div> если вам нужен контейнер только для придания определенного стиля содержимого (например, наш «full-bg» div),d use <;section>, если вы хотите, чтобы контейнер группировал содержимое похожей тематики.

Далее мы тоже знаем, что будет подзаголовок. К счастью, в HTML5 есть элемент для группировки элементов заголовков. <header> элемент. Давайте также включим это:

Мы также должны обновить селекторы в нашем CSS:

Теперь, как только вы нажмете «Обновить», вы заметите, что шрифт нашего элемента h1 уменьшился.

Многие браузеры уменьшают размер шрифта элемента h1 при размещении внутри a <sectiна> or a <элемент ;article>. Так что лучше всего задать размер нашему h1 вручную, когда это placed insiгде &lt;section> или <стаття>:

Прозрачный фон

Давайте зададим черному полупрозрачному фону нашему элементу раздела:

выход:

1*PsSzEft5rpXHqW8fwf1yNw

Код «rgba(0, 0, 0, 0.6)» означает: цвет с 0 красными, 0 зелеными и 0 синими компонентами, который является черным и непрозрачностью 60%.

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

Давай сделаем это:

Мы задали отступление «16px» и установили «box-sizing» на «border-box», потому что мы не хотим, чтобы контейнер расширялся на 16px, чтобы освободить место для отступа. Мы хотим, чтобы контейнер оставался того же размера, а содержимое в нем уменьшалось, чтобы освободить место для 16 пикселей отступа.

Выход:

1*kh-fqa4y3Za8fqZYuhIDGw

Ладно, верхний и нижний промежутки точно не выглядят как «16px» – они выглядят гораздо больше, чем это. И если вы заметили, ранее раздел не касался верхнего края браузера, но теперь он касается. Что происходит?

Это снова падение маржи. Дополнительное пространство над и под h1 – это не заполнение раздела, это поле h1. Ранее в разделе не было отступления, поэтому поле h1 и раздела сворачивалось и отображалось вне раздела. Поэтому раньше раздел не касался верха.

Давайте убавим поле h1 и отцентрируем его, установив «text-align: center» для нашего <header> элемент:

Обновите страницу, и текст h1 должен быть по центру с относительно меньшим пространством вокруг него.

Согните вещи в центр

Наш раздел уже отцентрирован горизонтально через margin: auto.

Что делает margin: auto, это устанавливает поля со всех сторон (поле вверху, поле справа, поле снизу и поле слева) на «авто».

Мы знаем, что настройка параметров margin-left и margin-right на «авто» центрирует элемент горизонтально.

Но установка параметров margin-top и margin-bottom на авто не автоматически центрирует элемент по вертикали. Исторически так сложилось, что центровка вещей в HTML была одним из главных моментов для веб-разработчиков.

Больше нет. Теперь, когда Flexbox широко поддерживается всеми браузерами, мы можем использовать «display:flex» для элемента. Этот элемент станет гибким контейнером, а его дочерние элементы станут гибкими элементами.

Гибкие предметы обладают отличными свойствами. К примеру, когда верхнее и нижнее поле элементов Flex установлено на «авто», оно центрируется вертикально!

Давайте попробуем, добавим «display:flex» к «.full-bg»:

Выход:

1*l_d0FkGBckGqp4k6nv1z9w

Ладно, теперь это начинает выглядеть хорошо.

Загрузите специальный шрифт из локальной системы

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

Посмотрите на этот шрифт на dafont.com:

1*_H1Wq3Uz5EKQaMUDghP7hQ

Это выглядит идеально для нашего использования, так что вы можете скачать его здесь.

Если вы распакуете файл zip, вы увидите файлы шрифтов в форматах TTF и OTF. Мы можем использовать их, но формат WOFF является лучшим способом использования любого специального шрифта для CSS. Превратите любой из файлов TTF в WOFF с помощью этого инструмента.

Затем мы разместим преобразованный файл .woff в каталог «fonts».

Давайте загрузим наш шрифт:

Примечание. Если вы используете Firefox, вам нужно будет разрешить загрузку локальных файлов шрифтов. Введите about:config в адресной строке Firefox и нажмите ввод. Примите предупреждение. Затем найдите strict_orogin_policy и установите значение false.

Выход:

1*Ocd8cEcW2fNHGidZYawjHg

Ладно, сейчас мы говорим.

Теперь давайте напишем Infinity War как подзаголовок как h2 и дадим верхнюю и нижнюю границы.

и наш CSS:

Выход:

1*orbR-s8x_fLR6sYNgle19g

Ладно, здесь две проблемы:

  • промежуток между h1 и h2,
  • мы не хотим, чтобы белые линии (верхняя и нижняя граница h2) охватывали весь раздел. Мы хотим, чтобы он был таким же широким, как текст «Мстителей».

Чтобы уменьшить промежуток между h1 и h2, удалите нижнее поле h1 и верхнее поле h2:

Код margin: 16px 8px 0 означает установку верхнего поля на 16 пикселей, правого и левого полей на 8 пикселей и нижнего поля на 0.

А теперь вторая проблема.

Элемент

по умолчанию является блочным элементом, поэтому его ширина превышает ширину родительского элемента. Если мы сделаем его «встроенным блочным» элементом, он не будет разворачиваться до ширины родительского элемента, а будет занимать только ширину, необходимую для размещения текста внутри него. Это именно то, что мы хотим.

Давайте предоставим «display: inline-block» заголовка и «text-align: center» его родительскому «poster-content»:

Выход:

1*kMygYZw_BHEqZCtRRpaiBg

Специальный шрифт Google

Давайте используем научно-фантастический шрифт для h2. Мы увидели, как скачать шрифт и использовать его в нашем CSS. В таком случае вы сами размещаете шрифт. Здесь Google бесплатно предоставляет множество размещенных шрифтов. Мы просто связываем его с Google. Вот один, который выглядит хорошо для нашего использования:

1*OMR76PpUGsGzZ_ty8zPB9g

Вот URL.

Перейдите по URL выше и нажмите «ВЫБРАТЬ ЭТОТ ШРИФТ» в правой части экрана:

1*5LT-eATcKpb01KehR6Zxfg

Затем щелкните панель «Избранное семейство», которая отображается внизу:

1*UNt8QiOtTM-OZ3Cnru18CA

Это даст нам код для копирования, чтобы использовать этот шрифт на нашей странице:

1*ZW2S5IeEgjD6sGqjk7zC4A

Вставьте <link> код в наш HTML-файл:

и код семейства шрифтов для нашего CSS:

Я также добавил несколько интервалов, поскольку буквы выглядели перегруженными. Я также увеличил размер шрифта до 26 пикселей.

Выход:

1*JKpvtjmxeemuwSdKx5Qoug

Вставьте видео YouTube

Постер фильма будет неполным без видеотрейлера.

Мы можем включить видео YouTube на страницу HTML с помощью «iframe». Тег iframe позволяет нам скачать другую HTML-страницу на текущую страницу. Какую страницу загружать определяется атрибутом “src”.

Вот как вы можете использовать