Học CSS từ mẫu Vertical timeline đơn giản

Không cần phải đọc quá nhiều sách, cũng không cần phải bỏ tiền để theo học bất kì một khóa học nào bên ngoài hay trên internet, các bạn có thể hoàn toàn làm chủ được khả năng sử dụng CSS  bằng những bài thực hành đơn giản mà mình giới thiệu cho các bạn trong bài viết này. Đây là một ví dụ mà các bạn có thể học được cách sắp xếp layout cũng như điều chỉnh vị trí của các phần tử html.

Xem Demo | Download

HTML

Timeline mà mình chia sẻ cho các bạn ngày hôm nay sẽ gồm có 3 phần : thời gian, tiêu đề và nội dung miêu tả ngắn được sắp xếp theo đoạn html bên dưới :

<div class="timeline">
	<div class="column">
		<div class="title">
			<h1> 1867 </h1>
			<h2> ALFRED ELY BEACH: <br> BEACH PNEUMATIC TRANSIT </h2>
		</div>
		<div class="description">
			<p> Americký vynálezca v tomto roku prezentoval tunelový systém, v ktorom sa pomocou stlačeného vzduchu pohybovala transportná bunka valcovitého tvaru. Na dráhe premávala kyvadlovým spôsobom jedna transportná kapsula. Pohyb zabezpečoval pneumatický kompresor, ktorý v jednom smere kapsulu “vytláčal” a v druhom smere ”nasával”. Bola vybudovaná aj skúšobná dráha, ktorá istý čas fungovala ale projekt bol zamietnutý a v dôsledku krachu americkej burzy sa ho nepodarilo oživiť. </p>
		</div>
	</div>

	<div class="column">
		<div class="title">
			<h1> 1904 </h1>
			<h2> ROBERT H. GODDARD: <br> VACUUM TUBE TRANSPORTATION SYSTEM </h2>
		</div>
		<div class="description">
			<p> Prvé zmienky o jeho koncepte sa objavili v roku 1909 ale kompletná dokumnetácia pochádza z roku 1904, ktorá sa objavila až 30 rokov po jeho smrti v opustenom sklade. V tomto koncepte Goddard popisuje hlavné črty konceptu Hyperloop.  Spomína použitie lineárneho elektromotora. Opisuje zariadenie na minimalizáciu nepriaznivého prúdenia vzduchu v okolí transportnej kapsuly. Venuje sa aj použitiu vzduchových ložísk. Hovorí o cestovaní rýchlosťou 1900 km/h. </p>
		</div>
	</div>
</div>

CSS

Và nhớ là nên gõ theo từng đoạn css bên dưới để hiểu rõ hơn về cách dùng của từng thuộc tính có trong CSS.

@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');

* {
	pading: 0;
	margin: 0;
	font-family: "Lato", sans-serif;
	position: relative;
}

.timeline {
	padding: 40px 0px;
	awidth: 80%;
	margin-left: 10%;
	margin-bottom: 40px;
}

.timeline:before {
	content: "";
	position: absolute;
	top: 40px;
	left: 65px;
	awidth: 3px;
	height: calc(100% - 80px);
	background: #c0392b;
}

.timeline .column {
	margin: 40px 40px 40px 120px;
}

.timeline .column .title h1 {
	font-size: 120px;
	color: rgba(0,0,0,0.1);
	font-family: serif;
	letter-spacing: 3px;
}

.timeline .column .title h1:before {
	content: "";
	position: absolute;
	left: -62px;
	top: 86px;
	awidth: 10px;
	height: 10px;
	background: #fff;
	border: 3px solid #c0392b;
}

.timeline .column .title h2 {
	margin-top: -60px;
	font-size: 33px;
}

.timeline .column .description p {
	font-size: 13px;
	line-height: 20px;
	margin-left: 20px;
	margin-top: 10px;
	font-family: serif;
}

.timeline .column .description {
	border-left: 1px solid #000;
}

.main {
	awidth: 80%;
	margin-left: 10%;
	margin-top: 80px;
}

.main h1 {
	font-size: 80px;
	line-height: 60px;
}

.main p {
	font-size: 13px;
	line-height: 20px;
	font-family: serif;
	text-align: right;
}

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster