Cara Membuat Kartu Di Web HTML + CSS

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 15, 2021

Di bawah ini kita akan mempelajari cara membuat “kartu” dengan CSS.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 40%;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
  padding: 2px 16px;
}
</style>
</head>
<body>

<h2>Card</h2>

<div class="card">
  <img src="https://dosenit.com/wp-content/uploads/2021/01/apatar.jpg" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>Kim Faza</b></h4> 
    <p>Producer</p> 
  </div>
</div>

</body>
</html>

Cara Membuat Kartu

Langkah 1) Tambahkan HTML:
Contoh

<div class="card">
  <img src="https://dosenit.com/wp-content/uploads/2021/01/apatar.jpg" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>Kim Faza</b></h4> 
    <p>Producer</p> 
  </div>
</div>

Langkah 2) Tambahkan CSS:
Contoh

.card {
  /* Tambahkan bayangan untuk membuat efek "kartu" */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* Saat mengarahkan mouse, tambahkan bayangan yang lebih dalam */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Tambahkan beberapa padding di dalam wadah kartu */
.container {
  padding: 2px 16px;
}

Dengan sudut membulat:
Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 40%;
  border-radius: 5px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

img {
  border-radius: 5px 5px 0 0;
}

.container {
  padding: 2px 16px;
}
</style>
</head>
<body>

<h2>Round Card</h2>

<div class="card">
  <img src="https://dosenit.com/wp-content/uploads/2021/01/apatar.jpg" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>Tony</b></h4> 
    <p>Editor</p> 
  </div>
</div>

</body>
</html>