Cara Membuat Bentuk Hati dengan CSS
CSS3 meningkatkan kemungkinan apa yang bisa kita bangun di situs web hanya menggunakan HTML dan CSS. Anda dapat menemukan contoh luar biasa yang telah kami tampilkan sebelumnya. Tapi jangan terlalu jauh ke depan, desain yang rumit akan membutuhkan kode yang bisa membuat Anda pusing.
Sebagai gantinya, kami akan membuat sesuatu yang sederhana untuk membantu Anda memahami bentuk dan posisi dengan CSS terlebih dahulu, sebelum merambah ke desain yang lebih maju. Karena hari Valentine sudah dekat, mari kita buat bentuk hati menggunakan HTML dan CSS.
Dasar
Pada dasarnya, kita dapat membuat bentuk baru dengan menggabungkan satu atau lebih bentuk dasar, seperti persegi panjang dan lingkaran. Jika kita memeriksa bentuk hati kita dapat menemukan bahwa itu terbuat dari apa dua lingkaran dan satu persegi panjang digabungkan. Elemen HTML pada dasarnya adalah persegi atau persegi panjang. Berkat radius perbatasan CSS3 kita dapat mengubah persegi panjang menjadi lingkaran dengan mudah.
Mulailah dengan menambahkan a Kemudian, kita membuatnya menjadi persegi dengan menentukan lebar dan tinggi secara merata. Pilih warna latar yang Anda sukai. Selanjutnya, kita akan membuat lingkaran. Daripada menambahkan elemen baru, kami akan menggunakan elemen pseudo, Bersama-sama dengan kotak kita akan mendapatkan hasil seperti ini: Setelah itu, kita membuat lingkaran kedua dengan elemen pseudo Hasilnya adalah sebagai berikut: Kita dapat menggabungkan dua gaya yang sama ini dengan mengelompokkan pemilih elemen semu sebagai berikut: Ta-da! Kami memiliki bentuk hati, meskipun belum ke arah yang benar. Untuk meluruskannya, kita akan menggunakan Transformasi CSS3. Transformasi dapat diberikan pada elemen utama bentuk; di sini, itu berarti kotak. Ketika ditransformasikan, elemen pseudo akan secara otomatis mengubah posisinya mengikuti elemen utama. Di sini kita akan memutar hati sehingga terlihat “kedudukan”. Dan seperti inilah hati kita sekarang. Kode lengkap bentuk hati di atas adalah sebagai berikut, dalam HTML: Dan pada CSS kita, akan seperti ini: Perhatikan bahwa kita sekarang mengatur saluran alpha dari Sekarang kita memiliki bentuk hati yang sempurna, kita bisa ganti latar belakang ke warna lain (mis. merah muda atau merah) dengan mudah. Satu-satunya downside di sini adalah kita tidak dapat menambahkan perbatasan ke bentuk karena elemen ditumpuk. Menambahkan garis batas akan membuat hati terlihat aneh. Dengan CSS3 membuat bentuk seperti bentuk hati sekarang mudah dilakukan. Properti border-radius memungkinkan kita untuk membuat elemen atau bahkan elemen pseudo menjadi lingkaran. Dengan transformasi CSS3, kita bisa memutar atau memindahkan koordinat objek dengan mudah. Anda hanya dibatasi oleh kreativitas dan imajinasi Anda!
.bentuk-hati posisi: relatif; lebar: 200px; tinggi: 200px; warna latar: rgba (250.184.66, 0.8);
:sebelum dan :setelah. Kami pertama kali mengatur :sebelum elemen semu sebagai lingkaran pertama kami. Kami membuatnya menjadi persegi dengan ukuran yang sama pada lebar dan tinggi seperti yang kami lakukan dengan div. Kami kemudian mengubahnya menjadi lingkaran dengan memberinya batas-jari 50% dan meletakkannya di sisi kiri alun-alun. .bentuk hati: sebelum position: absolute; bawah: 0px; kiri: -100px; lebar: 200px; tinggi: 200px; konten: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; radius-perbatasan: 50%; warna-latar belakang: rgba (250.184,66 , 0.8);
:setelah dengan gaya yang sama dengan lingkaran pertama yang kami buat. Kemudian, kami juga memposisikannya di atas alun-alun. .bentuk hati: after position: absolute; atas: -100px; kanan: 0px; lebar: 200px; tinggi: 200px; konten: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; radius-perbatasan: 50%; warna-latar belakang: rgba (250.184,66 , 0.8);
.bentuk hati: sebelumnya, bentuk hati: sesudah posisi: absolut; lebar: 200px; tinggi: 200px; konten: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; radius-perbatasan: 50%; warna-latar belakang: rgba (250.184,66 , 0.8); .bentuk hati: sebelum bawah: 0px; kiri: -100px; .bentuk hati: setelah atas: -100px; kanan: 0px;
.heart-shape -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -ms-transform: rotate (45deg); -o-transform: rotate (45deg); transform: rotate (45deg);
Hasil:
.bentuk-hati posisi: relatif; lebar: 200px; tinggi: 200px; -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -ms-transform: rotate (45deg); -o-transform: rotate (45deg); transform: rotate (45deg); warna latar: rgba (250.184.66, 1); .heart-shape: before, .heart-shape: after position: absolute; lebar: 200px; tinggi: 200px; konten: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; radius-perbatasan: 50%; warna-latar belakang: rgba (250.184,66 , 1); .bentuk hati: sebelum bawah: 0px; kiri: -100px; .bentuk hati: setelah atas: -100px; kanan: 0px;
rgba (250.184.166, 1) di latar belakang 1 untuk menghapus transparansi. Sekarang inilah yang terlihat oleh Hati kita.
Kesimpulan
