CSS: Вертикальный таймлайн

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

HTML код:

<div class="timeline">
		<div class="item">
			<div class="icon">1</div>
			<div class="content">
				<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae at rerum ut amet blanditiis. Deserunt quisquam veritatis amet natus sint. Ab facilis ex recusandae earum magnam sapiente dicta, modi deserunt?</p>
			</div>
		</div>
		<div class="item">
			<div class="icon">2</div>
			<div class="content">
				<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae at rerum ut amet blanditiis. Deserunt quisquam veritatis amet natus sint. Ab facilis ex recusandae earum magnam sapiente dicta, modi deserunt?</p>
			</div>
		</div>
		<div class="item">
			<div class="icon">3</div>
			<div class="content">
				<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae at rerum ut amet blanditiis. Deserunt quisquam veritatis amet natus sint. Ab facilis ex recusandae earum magnam sapiente dicta, modi deserunt?</p>
			</div>
		</div>
	</div>

CSS код:

*{
	font-family: Arial, Helvetica, sans-serif;
}

.timeline *, 
.timeline *:before, 
.timeline *:after {
	box-sizing: border-box;
}

.timeline {
	max-width: 1000px;
	width: 96%;
	margin: 30px auto;
	position: relative;
	padding: 0 10px;
}

.timeline:before {
	content: "";
	width: 3px;
	height: 100%;
	background: #737575;
	left: 50%;
	top: 0;
	position: absolute;
}

.timeline:after {	
	content: "";
	clear: both;
	display: table;
	width: 100%;
}

.timeline .item {
	margin-bottom: 20px;
	position: relative;
}

.timeline .item:after, 
.timeline .item:before {
	content: '';
	display: block;
	width: 100%;
	clear: both;
}

.timeline .item .icon {
	background: #737575;
	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%;
}

.timeline .item .content {
	width: 45%;
	background: #fff;
	padding: 20px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 10px rgba(0,0,0,0.2);
	border-radius: 3px;
}
.timeline .item .content h4 {
	padding: 15px;
	background: #737575;
	color: #fff;
	margin: -20px -20px 0px -20px;
	font-weight: 300;
	border-radius: 3px 3px 0px 0px;
}
.timeline .item .content: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 #737575;
}
.timeline .item:nth-child(even) .content {
	float: right;
}
.timeline .item:nth-child(even) .content:before {
	content: '';
	right: 45%;
	left: inherit;
	border-left: 0;
	border-right: 7px solid #737575;
}
@media screen and (max-width: 768px) {
	.timeline {
		margin: 30px;
		padding: 0px;
		width: 90%;
	}
	.timeline:before {
		left: 0;
	}
	.timeline .item .content {
		width: 90%;
		float: right;
	}
	.timeline .item .content:before, 
	.timeline .item:nth-child(even) .content:before {
		left: 10%;
		margin-left: -6px;
		border-left: 0;
		border-right: 7px solid #737575;
	}
	.timeline .item .icon {
		left: 0;
	}
}

Получим следующий результат:

1

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae at rerum ut amet blanditiis. Deserunt quisquam veritatis amet natus sint. Ab facilis ex recusandae earum magnam sapiente dicta, modi deserunt?

2

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae at rerum ut amet blanditiis. Deserunt quisquam veritatis amet natus sint. Ab facilis ex recusandae earum magnam sapiente dicta, modi deserunt?

3

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae at rerum ut amet blanditiis. Deserunt quisquam veritatis amet natus sint. Ab facilis ex recusandae earum magnam sapiente dicta, modi deserunt?

При перепубликации активная ссылка на этот блог обязательна.
Поблагодарить автора 🙂
 руб.