ZorNet.Ru — сайт для вебмастера » HTML и CSS » Вертикальный адаптивный таймлайн в CSS

Вертикальный адаптивный таймлайн в CSS

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

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

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

Адаптивная верстка вертикального таймлайна HTML

Вид с мобильного гаджет:

Установочный процесс:

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

Код

HTML

Код

<div id="sozdaniyu-taymlayna">
  <div class="sozdaniyu-taymlayna-kasen">
  <div class="sozdaniyu-taymlayna-icon">
  <i class="fa fa-university"></i>
  </div>
  <div class="sozdaniyu-taymlayna-deksta">
  <h4>Форум вебмастеров ZorNet.Ru</h4>
  <p>Первое описание.</p>
  </div>
  </div>
  
  <div class="sozdaniyu-taymlayna-kasen">
  <div class="sozdaniyu-taymlayna-icon">
  <i class="fa fa-folder-open"></i>
  </div>
  <div class="sozdaniyu-taymlayna-deksta">
  <h4>ZorNet.Ru — сайт для вебмастера</h4>
  <p>Второе краткое пояснение.</p>
  </div>
  </div>
</div>

CSS

Код

#sozdaniyu-taymlayna *,
#sozdaniyu-taymlayna *:before,
#sozdaniyu-taymlayna *:after {
  box-sizing: border-box;
}
#sozdaniyu-taymlayna .sozdaniyu-taymlayna-kasen:after,
#sozdaniyu-taymlayna .sozdaniyu-taymlayna-kasen:before {
  content: '';
  display: block;
  width: 100%;
  clear: both;
}
#sozdaniyu-taymlayna {
  max-width: 1100px;
  width: 100%;
  margin: 30px auto;
  position: relative;
  padding: 0 10px;
  transition: all 0.4s ease;
}
#sozdaniyu-taymlayna:before {
  content: "";
  width: 3px;
  height: 100%;
  background: #337AB7;
  left: 50%;
  top: 0;
  position: absolute;
}
#sozdaniyu-taymlayna:after {
  content: "";
  clear: both;
  display: table;
  width: 100%;
}
#sozdaniyu-taymlayna .sozdaniyu-taymlayna-kasen {
  margin-bottom: 50px;
  position: relative;
}
#sozdaniyu-taymlayna .sozdaniyu-taymlayna-kasen .sozdaniyu-taymlayna-icon {
  background: #337AB7;
  color: #FFF;
  text-align: center;
  font-size: 24px;
  line-height: 50px;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 50%;
  overflow: hidden;
  margin-left: -23px;
  border-radius: 50%;
}
#sozdaniyu-taymlayna .sozdaniyu-taymlayna-kasen .sozdaniyu-taymlayna-icon i {
  line-height: 50px;
}
#sozdaniyu-taymlayna .sozdaniyu-taymlayna-kasen .sozdaniyu-taymlayna-deksta {
  width: 45%;
  background: #fff;
  padding: 10px 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 10px rgba(0,0,0,0.2);
  border-radius: 5px;
  transition: all 0.3s ease;
}
#sozdaniyu-taymlayna .sozdaniyu-taymlayna-kasen .sozdaniyu-taymlayna-deksta h4 {
  padding: 15px;
  background: #337AB7;
  color: #fff;
  margin: -20px -20px 10px -20px;
  font-weight: 300;
  border-radius: 3px 3px 0 0;
}
#sozdaniyu-taymlayna .sozdaniyu-taymlayna-kasen .sozdaniyu-taymlayna-deksta:before {
  content: '';
  position: absolute;
  left: 45%;
  top: 20px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid #337AB7;
}
#sozdaniyu-taymlayna .sozdaniyu-taymlayna-kasen:nth-child(even) .sozdaniyu-taymlayna-deksta {
  float: right;
}
#sozdaniyu-taymlayna .sozdaniyu-taymlayna-kasen:nth-child(even) .sozdaniyu-taymlayna-deksta:before {
  content: '';
  right: 45%;
  left: inherit;
  border-left: 0;
  border-right: 7px solid #337AB7;
}
@media screen and (max-width: 768px) {
  #sozdaniyu-taymlayna {
  margin: 30px;
  padding: 0px;
  width: 90%;
  }
  #sozdaniyu-taymlayna:before {
  left: 0;
  }
  #sozdaniyu-taymlayna .sozdaniyu-taymlayna-kasen .sozdaniyu-taymlayna-deksta {
  width: 90%;
  float: right;
  }
  #sozdaniyu-taymlayna .sozdaniyu-taymlayna-kasen .sozdaniyu-taymlayna-deksta:before,
  #sozdaniyu-taymlayna .sozdaniyu-taymlayna-kasen:nth-child(even) .sozdaniyu-taymlayna-deksta:before {
  left: 10%;
  margin-left: -6px;
  border-left: 0;
  border-right: 7px solid #337AB7;
  }
  #sozdaniyu-taymlayna .sozdaniyu-taymlayna-kasen .sozdaniyu-taymlayna-icon {
  left: 0;
  }
}

Если говорим про шрифтовые иконки, то в данном примере задействовали шрифт Font Awesome, где уже сам веб мастер или веб-разработчик может поставить свои кнопки, которые отлично впишутся в основной стиль дизайна. Где ставим HTML каркас, и под него стили, и больше нам не требуется, но разве, что все заполнить.

Демонстрация

15 Октября 2019 Загрузок: 1 Просмотров: 1122 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0