Bentuk Hati atau Ikon CSS Murni Menggunakan HTML
Ini adalah tutorial sederhana tentang membuat Bentuk Hati atau Ikon CSS menggunakan HTML. Jika Anda sudah menggunakan jenis font icon labiary maka Anda dapat dengan mudah menggunakan icon hati darinya.
Namun dalam beberapa kasus, Anda tidak menggunakan pustaka ikon apa pun dan ingin menambahkan ikon hati. Dalam hal ini, tutorial sederhana ini akan banyak membantu Anda.
Selain itu, merupakan partikel yang buruk untuk menggunakan seluruh perpustakaan ketika Anda hanya membutuhkan satu bentuk hert jadi jika ini kasusnya maka Anda dapat menggunakan ikon hart kami hanya dengan menambahkan satu baris kode HTML bersama dengan sedikit CSS.
Skenario lain Anda dapat menggunakan grafik hati tetapi mengapa Anda menambahkan gambar yang diekstraksi ketika kami memiliki solusi CSS sederhana dan mudah yang berfungsi sempurna dengan semua browser?
Saya selalu mencoba melakukan banyak hal dengan CSS dan menghindari grafik karena CSS mudah diubah dan ringan. Setiap kali saya perlu mengubah skema warna, saya tidak perlu mengubah keseluruhan elemen, sebagai gantinya, saya hanya akan mengubah warna latar belakang dari CSS.
Cara Membuat Bentuk Hati atau Ikon CSS
Kami memiliki div sederhana dengan nama kelas heart-shape. Kami tidak perlu melakukan apa pun selain div, jadi kami melanjutkan dengan implementasi CSS.
<div class="heart-shape"></div>
Setelah itu, kita hanya akan memberi style pada div dengan meletakkan latar belakang. Untuk mengubah div menjadi bentuk bulat, kita akan menggunakan properti border-radius.
Lebar dan tingginya harus sama lalu kita akan sejajarkan di tengah body dengan menambahkan margin 0 autos.
.heart-shape { background: #f9e1ea none repeat scroll 0 0; border-radius: 50%; display: block; height: 200px; margin: 5em auto 0; text-align: center; width: 200px; } Permainan sebenarnya dimulai dari sini, dan kami akan menggunakan :before sebuah elemen. Untuk menambahkan ikon hati, kami akan menggunakan simbol HTML dan kami mendefinisikannya di dalam div utama. Anda bisa melihatnya seperti itu content: "♥";
Selanjutnya, Anda dapat menambahkan warna hati dan mengatur ukuran font. Ukuran font digunakan untuk mengontrol ukuran hati. Jika Anda ingin mengecilkan hati, maka Anda bisa memperkecil ukurannya.
.heart-shape:before{ color: #f3166e; content: "
"; font-size: 8em; position: relative; top: 100px; } Simbol Hati
Berikut adalah beberapa simbol hati yang dapat Anda salin dan tempel dengan mudah di dalam konten: ""; untuk mengubahnya.
Mari kita lihat demonya. Itu cara termudah untuk membuat hati. Ada cara yang lebih kompleks tetapi yang ini mudah digunakan untuk pengembang mana pun.
