Java, UX, HTML, CSS, WEB-design

Как создать адаптивную временную шкалу с миниатюрами изображений

Краткое описание по статье Как создать адаптивную временную шкалу с миниатюрами изображений

Название: Как создать адаптивную временную шкалу с миниатюрами изображений . Краткое описание: [ad_1] ⭐ В этом руководстве вы узнаете, как создать . Дата публикации: 23.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

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

Адаптивная временная шкала — вид рабочего стола

Вид рабочего стола

Отзывчивая временная шкала - маленькие планшеты / мобильный альбомный вид

Маленькие планшеты/мобильные устройства с альбомной ориентацией

Отзывчивая временная шкала — мобильная книжная ориентация

Мобильный книжный вид

Вам нужно иметь некоторые базовые знания HTML и CSS, чтобы следовать. Давайте начнем.

Ваш дизайнерский набор инструментов
Неограниченное количество загрузок: более 500 000 веб-шаблонов, наборов иконок, тем и элементов дизайна


Настройка

Создайте пустой документ HTML и назовите его index.html. Добавьте основной скелет HTML. Если вы используете Visual Studio Code, все, что вам нужно сделать, это ввести «!» и нажмите Enter. Вы закончите с этим.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
  
</body>
</html>

Я использовал шрифт «Noto Sans» с толщиной шрифта 300 и 700. Поэтому добавьте следующую строку под тегом заголовка, чтобы встроить этот шрифт с помощью шрифтов Google.

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:[email protected];700&display=swap" rel="stylesheet">

Создайте свою таблицу стилей и назовите ее style.css. Свяжите таблицу стилей с вашим HTML-документом под ссылкой Google Fonts CDN, используя:

<link rel="stylesheet" href="style.css">

Структура голых костей

Давайте сначала создадим структуру временной шкалы, а в следующей части мы добавим и стилизуем контент.

HTML

Добавьте это в свою разметку:

<div class="timeline">
   <div class="container container-left">
       <div class="content"></div>
   </div>
   <div class="container container-right">
       <div class="content"></div>
   </div>
   <div class="container container-left">
       <div class="content"></div>
   </div>
</div>

CSS

В style.css, начните с некоторых общих стилей для всех элементов:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

Добавьте эти стили в body элемент:

body {
   background-color: #EDF2F7;
   font-family: 'Noto Sans', sans-serif;
   font-size: 1em;
   color: #4A5568;
}

На временную шкалу добавьте следующие стили. Ограничим максимальную ширину до 1200px и центрировать содержимое, используя margin.

.timeline {
   position: relative;
   max-width: 1200px; /* Restrict the width on large screens */
   margin: 0 auto; /* Center the content */
   padding: 30px;
}

Теперь мы можем использовать ::after псевдоэлемент для создания этой фактической линии в центре временной шкалы. Добавьте эти стили:

.timeline::after {
   content: '';
   position: absolute;
   width: 6px;
   background-color: white;
   top: 0;
   bottom: 0;
   left: 50%;
   margin-left: -3px;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

Ширина линии 6px. Следовательно, мы использовали left:50% и margin-left: -3px чтобы расположить линию точно по центру. Узнайте больше о центрировании элемента с использованием абсолютного положения.

Теперь вы увидите очень тонкую линию в верхней части веб-страницы, расположенную по центру по вертикали. По мере добавления контента эта линия удлиняется.

Давайте стилизуем левый и правый контейнеры, содержащие элементы временной шкалы.

.container {
   position: relative;
   width: 50%;
}
.container-left {
   left: 0;
}
.container-right {
   left: 50%;
}

Вы все равно ничего не увидите на веб-странице, пока мы не стилизуем .content элемент внутри.

.content {
   padding: 30px;
   background-color: white;
   position: relative;
   border-radius: 6px;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

Вы должны быть в состоянии увидеть это сейчас.

Отзывчивая временная шкала до сих пор

Наша временная шкала обретает форму. Давайте добавим эти крошечные стрелки, указывающие на линию, используя ::before псевдоэлемент.

.container .content::before {
   content: " ";
   height: 0;
   position: absolute;
   top: 40px;
   width: 0;
   z-index: 1;
   border: medium solid white;
   right: -10px;
   border-width: 10px 0 10px 10px;
   border-color: transparent transparent transparent white;
}

Это добавит все метки со стрелками, указывающими вправо, расположенными на правом краю поля. Но для блоков справа нам нужна стрелка, указывающая налево и расположенная слева. Итак, меняем все это на:

.container .content::before {
   content: " ";
   height: 0;
   position: absolute;
   top: 20px;
   width: 0;
   z-index: 1;
   border: medium solid white;
}
.container-left .content::before {
   right: -10px;
   border-width: 10px 0 10px 10px;
   border-color: transparent transparent transparent white;
}
.container-right .content::before {
   left: -10px;
   border-width: 10px 10px 10px 0;
   border-color: transparent white transparent transparent;
}

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

.container-left {
   /* Existing styles here */
   padding-right: 70px;
}
.container-right {
   /* Existing styles here */
   padding-left: 70px;
}

Это потрясающе.

отзывчивая временная шкала со стрелками

Добавление и стилизация контента

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

HTML

Измените свою разметку на это, добавив 3 div элементы с фоновыми изображениями.

<div class="timeline">
   <div class="container container-left">
       <div class="image" style="background-image:url('https://images.pexels.com/photos/307008/pexels-photo-307008.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=100')"></div>
       <div class="content"></div>
   </div>
   <div class="container container-right">
       <div class="image" style="background-image:url('https://images.pexels.com/photos/210012/pexels-photo-210012.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=100')"></div>
       <div class="content"></div>
   </div>
   <div class="container container-left">
       <div class="image" style="background-image:url('https://images.pexels.com/photos/2104152/pexels-photo-2104152.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=100')"></div>
       <div class="content"></div>
   </div>
</div>

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

CSS

Давайте добавим немного размера и формы этому div-изображению.

.image {
   width:90px;
   height:90px;
   background-size:cover;
   background-position:center;
   border:solid 5px #ffffff;
   border-radius:50px;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

Теперь расположите их по центру линии рядом с коробками.

.image {
   position: absolute;
}
.container-left .image {
   right: 0;
   margin-right: -45px;
}
.container-right .image {
   left: 0;
   margin-left: -45px;
}

Но изображения появляются за чертой! Это легко исправить с помощью некоторых z-index.

.timeline::after {
   /* Existing styles here */
   z-index: 1;
}
.image {
   /* Existing styles here */
   z-index: 2;
}

Не обращайте внимания на изображения, накладывающиеся друг на друга прямо сейчас. Это будет исправлено, когда мы добавим некоторый контент в поля. Но если вашего контента будет очень мало, добавьте минимальную высоту контейнера.

.container {
   /* Existing styles here */
   min-height: 120px;
}

Затем добавьте фактический контент.

HTML

Добавьте эту разметку в каждый .content блокировать. Измените текст по своему усмотрению.

<span>July 2020</span>
<h2>Visit to Spain</h2>
<p>
   Et hinc magna voluptatum usu, cum veniam graece et. Ius ea scripserit temporibus, pri cu harum tacimates neglegentur. At adipisci incorrupte nam. Cu qui sumo appareat constituto.
</p>

CSS

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

.container .content::before {
   /* Existing styles here */
   top: 35px;
}

Выровняйте текст в левых полях по правому краю, а правые поля по левому краю.

.container-left {
   /* Existing styles here */
   text-align: right;
}
.container-right {
   /* Existing styles here */
   text-align: left;
}

Теперь немного стилей для фактического контента.

.content span {
   color: #2C7A7B;
   font-size: 1.1em;
   font-weight: bold;
}
.content h2 {
   font-size: 1.8em;
   padding-top: 5px;
}
.content p {
   line-height: 1.6;
   padding-top: 5px;
}

Разве это не аккуратно? Здорово! Теперь измените размер окна браузера, чтобы сделать его меньше, и все начинает выглядеть беспорядочно, когда размер экрана слишком мал.

Сделайте его отзывчивым

На меньших экранах, когда по обеим сторонам линии есть поля, они становятся слишком узкими. Пришло время добавить несколько медиа-запросов. Давайте добавим точку останова в 767px ширину и расположите оба поля с одной стороны, когда ширина экрана меньше этой ширины.

@media screen and (max-width: 767px) {
   /* Add styles to change the behaviour for screens smaller than 767px width */
}

Сначала расположите строку слева от страницы. Добавьте следующие стили в медиа-запрос:

.timeline::after {
   left: 65px;
}

Сделайте контейнеры полной ширины и правильно расположите их, переопределив предыдущие стили.

.container {
   width: 100%;
   padding-left: 100px;
   padding-right: 0px;
}
.container-right {
   left: 0%;
}
.container-left {
   text-align: left;
}

Добавьте верхнее поле ко всем контейнерам, кроме первого.

.container {
   /* Existing styles here */
   margin-top: 30px;
}
.container:first-of-type {
   margin-top: 0px;
}

Переопределите стили изображений, чтобы расположить их в строке.

.container .image {
   left:-10px;
   top: 0px;
   margin-left: 0;
   margin-right: 0;
}

Стрелки на «левых» полях должны изменить положение и направление.

.container-left .content::before {
   left: -10px;
   right: auto;
   border-width: 10px 10px 10px 0;
   border-color: transparent white transparent transparent;
}

Вот что мы имеем сейчас:

Отзывчивый вид временной шкалы один

Еще больше уменьшите размер экрана, и вы заметите, что на очень маленьких экранах (менее 400px ширина), коробки снова становятся узкими. Именно поэтому ниже 480px, давайте поместим контейнеры под изображение, чтобы они занимали всю ширину экрана.

@media screen and (max-width: 480px) {
   .container {
       padding-left: 0px;
       padding-top: 105px;
   }
}

Чтобы строка не появлялась поверх полей, а не снизу, просто добавьте z-index к контейнеру и дать более высокое значение, чем «линия».

.container {
   /* Existing styles here */
   z-index: 3;
}

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

.container .content::before {
   left: 25px;
   top: -10px;
   border: medium solid white;
   border-width: 0 10px 10px 10px;
   border-color: transparent transparent white transparent;
}

Ты получил это! Измените размер браузера, делая его меньше и больше, чтобы увидеть, насколько отзывчива ваша временная шкала. Идите вперед и настройте его в соответствии с вашими потребностями. На всякий случай, если это не работает должным образом, загрузите полный исходный код и не стесняйтесь вносить изменения по своему желанию.

Скачать исходный код

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.

[ad_2]
Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — Как создать адаптивную временную шкалу с миниатюрами изображений

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

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

Ваш адрес email не будет опубликован.

Кнопка «Наверх»