Membuat Hati atau Love dengan CSS3

KursusKode - CSS3 membuat sebuah inovasi yang sangat menakjubkan sehingga kita bisa menggabungkan komponen HTML dann CSS menjadi beberapa bangun yang bagus.
Beberapa bangun dasar itu bisa anda buat hanya menggunakan kode CSS dan HTML yang ada di dalamnya, dan semakin rumit bangun tersebut berarti anda siap untuk lebih keras bertarung dengan kode-kode di dalamnya. Dan bersiaplah untuk sakit kepala.

Kali ini Kursus Kode akan mengajarkan bagaimana cara membuat sebuah gambar Hati atau Love menggunakan tatanan kode CSS3 digabungkan dengan HTML.

Love Hati Menggunakan CSS3 dan HTML5

Untuk langkah awal membuat gambar Hati atau Love kali ini anda perlu membuat sebuah bangun persegi. Anda bebas mewarnai-nya sesuai selera anda disini sebagai bahan pembelajaran, Kursus Kode menggunakan warna merah saja karena melambangkan warna Hati atau Love itu sendiri.


.hati {
   background-color: red;
   width: 100px;
   height: 100px;
}


<!DOCTYPE html>
<html>
   <head>
      <title>Hati/Love dengan CSS3 [KursusKode]</title>
   </head>
   <body>
      <div class="hati"></div>
   </body>
</html>

Maka jika anda buka di browser, maka outputnya akan sama kaya gambar dibawah ini.

Membuat Hati atau Love dengan CSS3 | Preview Percobaan 1

Langkah selanjutnya adalah membuat bangun setengah lingkaran pada class="hati". Saya akan memberi warna PINK pada pembelajaran kali ini agar terlihat jelas (Tidak tubrukan dengan warna merah).

Anda cukup mengganti atau mengedit CSS dari class .hati menjadi seperti di bawah ini.


.hati {
   background-color: red;
   width: 100px;
   height: 100px;
   border-top : 50px solid PINK; /* Warna PINK pada setengah lingkaran */
   border-radius: 50px 50px 0 0;
}

Hasilnya akan seperti ini

Membuat Hati atau Love dengan CSS3 | Preview Percobaan 2

Nah, sudah mulai kelihatan kan bangun-nya.

Sekarang kita akan mencoba membuat dua buah element class .hati, disini saya akan mengedit element dari HTML menjadi seperti ini.


<!DOCTYPE html>
<html>
   <head>
      <title>Hati/Love dengan CSS3 [KursusKode]</title>
   </head>
   <body>
      <div class="hati kiri"></div>
      <div class="hati kanan"></div>
   </body>
</html>

Perlu anda perhatikan, pada kode diatas saya menambah 1 element hati lagi. 1 element hati dengan class kiri, dan satu lagi dengan class kanan.
Setelah anda mengedit file HTML anda, sekarang anda coba memberi jarak antara class="hati kiri" dengan class="hati kanan" dengan menggunakan margin.

Tambahkan di CSS anda script ini.


.hati.kanan {
   margin-left:35px;
}

Maka outputnya akan seperti dibawah ini.

Dan ubah CSS class hati anda menjadi. Menambah posisi Absolute agar sejajar.


.hati {
   background-color: red;
   width: 100px;
   height: 100px;
   border-top : 50px solid PINK;
   border-radius: 50px 50px 0 0;
   position: absolute; /* Penambahan */
}

Membuat Hati atau Love dengan CSS3 | Preview Percobaan 3

Sekarang kita akan merotasi kedua class hati. untuk class="hati kiri" saya akan merotasi menjadi -45 Derajat, sementara untuk class="hati kanan" saya akan merotasi menjadi 45 Derajat.
Untuk melakukannya tambahkan Script CSS dibawah ini di kode CSS anda.


.hati.kiri {
   transform:rotate(-45deg);
   -webkit-transform:rotate(-45deg);
   -moz-transform:rotate(-45deg);
   -ms-transform:rotate(-45deg);
   -o-transform:rotate(-45deg);
}
.hati.kanan {
   margin-left: 35px;
   transform:rotate(45deg);
   -webkit-transform:rotate(45deg);
   -moz-transform:rotate(45deg);
   -ms-transform:rotate(45deg);
   -o-transform:rotate(45deg);
}

Sekarang coba anda preview di browser anda.
Maka penampakannya akan seperti dibawah ini.

Membuat Hati atau Love dengan CSS3 | Preview Percobaan 4

Untuk mengubah warna PINK dari gambar tersebut, anda hanya perlu mengedit CSS ini.


.hati {
   background-color: red;
   width: 100px;
   height: 100px;
   border-top : 50px solid RED; /* GANTI WARNA INI */
   border-radius: 50px 50px 0 0;
   position: absolute; 
}

Dan hasil akhirnya adalah seperti ini.