Artikel ini berisi cara membuat cards view dengan HTML dan CSS seperti cards view material design untuk aplikasi android.
Kali ini, saya ingin membuat sebuah tutorial mengenai bagaimana cara membuat cards view material design dengan HTML dan CSS seperti aplikasi android. Sebagai acuan, saya menggunakan situs www.material.io sebagai acuan dasar mengenai desain dan sebagainya. Intinya, saya akan membuat sebuah tampilan webnya dari gambar-gambar dan aturan yang disediakan oleh situs material.io.
Yang harus dilakukan paling pertama
Yang paling pertama yang harus dilakukan adalah membuat situs material.io pada bagian cards view. Silakan klik di sini untuk menuju halaman tersebut! Di sana, kamu akan menemukan beberapa desain cards view, mulai dari yang terlihat biasa-biasa saja sampai yang terlihat kompleks dan rumit. Mari kita bedah satu per satu.
Alat tempur
Alat tempur yang digunakan sama seperti pada tutorial yang lain, yaitu:
- Editor: saya menggunakan Sublime 3.0. Kamu bisa menggunakan Notepad++ dan sejenisnya.
- Browser: saya menggunakan Chrome. Kamu bisa menggunakan Mozilla Firefox, Safari, dan sejenisnya.
- Desain acuan: https://material.io/
Cuplikan tampilan nanti
Berikut adalah cuplikan hasil dari tutorial ini:
 |
| Tampilan cards view dengan HTML dan CSS |
Struktur folder
 |
| Struktur folder Membuat Cards View dengan HTML dan CSS |
Mulai tempur
Setelah mengikuti tahap-tahap di atas dan melihat tampilan cards view nanti, langkah selanjutnya adalah yang ditunggu-tunggu yaitu ngoding. Hahaha. Maaf agak lama, soalnya perlu sedikit penjalasan bagi programmer newbie. :)
Buat sebuah file dengan nama index.html
Karena tutoril kali ini tidak berhubungan dengan back-end atau server-side programming tetapi lebih kepada front-end atau client-side programming, jadi tidak perlu menggunakan nama file index.php. Cukup dengan index.html.
Isi file tersebut dengan skrip berikut:
[<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cards - Material Design by Anan Bahrul Khoir</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="cards">
<div class="cards-image">
<img src="assets/img/bg1.jpg">
</div>
<div class="cards-box">
<h1 class="cards-title">Kangaroo Valley Safari</h1>
<div class="cards-content">
<p>
Located two hours south of Sydney in the Sourthen Highlands of New South Wales, ...
</p>
</div>
</div>
<div class="cards-footer">
<a href="#">SHARE</a>
<a href="#">EXPLORE</a>
</div>
</div>
</div>
</body>
</html>]
Buat file style.css
Setelah file index.html berhasil dibuat, langkah selanjutnya adalah membuat sebuah file css di folder assets/css/ dengan nama style.css. Berikut adalah isi skrip dari style.css:
[body {
font-family: 'Roboto', sans-serif;
font-size: 14px;
padding-top: 50px;
}
.cards {
width: 300px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
border-radius: 2px;
overflow: hidden;
margin: 0 auto;
}
.cards-image {
width: 100%;
}
.cards-image img {
width: 100%
}
.cards-box {
padding: 15px;
}
.cards-title {
margin: 0;
margin-bottom: -10px;
padding: 0;
padding-top: 5px;
font-size: 24px;
font-weight: 500;
}
.cards-content p {
line-height: 1.8em;
}
.cards-footer {
display: block;
margin-top: -5px;
padding: 0 15px 2px;
}
.cards-footer a {
text-decoration: none;
font-weight: 600;
padding: 10px 13px;
display: inline-block;
position: relative;
overflow: hidden;
border-radius: 2px;
text-align: center;
}
.cards-footer a:after {
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 120px;
height: 120px;
margin-left: -60px;
margin-top: -60px;
background: #3f51b5;
border-radius: 100%;
opacity: .6;
transform: scale(0);
}
@keyframes ripple {
0% {
transform: scale(0);
}
20% {
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1);
border-radius: 2px;
}
}
a:not(:active):after {
animation: ripple 1s ease-out;
}
a:after {
visibility: hidden;
}
a:focus:after {
visibility: visible;
}]
Demo
Kamu bisa melihat demonya di sini: link
COMMENTS