Cara Membuat Bentuk Jantung dengan CSS
CSS3 meningkatkan kemungkinan apa yang boleh kita bina di laman web menggunakan hanya HTML dan CSS. Anda boleh mencari contoh yang menakjubkan yang telah kami tampilkan sebelum ini. Tetapi jangan terlalu jauh di hadapan kita, reka bentuk yang rumit akan memerlukan kod yang boleh memberi anda sakit kepala.
Sebaliknya, kami akan membuat sesuatu yang mudah untuk membantu anda memahami bentuk dan kedudukan dengan CSS terlebih dahulu, sebelum meneroka reka bentuk yang lebih canggih. Sejak hari Valentine hanya sekitar sudut, mari kita buat bentuk hati menggunakan HTML dan CSS.
Asas-asas
Pada asasnya, kita boleh membuat bentuk baru dengan menyertai satu atau lebih bentuk asas, seperti segi empat dan bulatan. Jika kita mengkaji bentuk hati kita dapati bahawa ia terdiri daripada dua bulatan dan sebuah persegi panjang digabungkan. Unsur-unsur HTML pada dasarnya adalah segiempat atau persegi panjang. Terima kasih kepada jejari sempadan CSS3 kita boleh mengubah segi empat tepat ke dalam bulatan dengan mudah.
Mula dengan menambah a Kemudian, kita menjadikannya persegi dengan menyatakan lebar dan ketinggian sama. Pilih warna latar belakang yang anda suka. Seterusnya, kami akan membuat bulatan. Daripada menambah unsur-unsur baru, kami akan menggunakan elemen pseudo, Bersama-sama dengan dataran kita akan mempunyai hasil seperti ini: Selepas itu, kita buat bulatan kedua dengan unsur pseudo Keputusannya adalah seperti berikut: Kita boleh menggabungkan kedua-dua gaya yang sama dengan mengelompokkan pemilih pseudo-element seperti berikut: Ta-da! Kami mempunyai bentuk hati, walaupun ia tidak dalam arah yang betul lagi. Untuk meluruskannya, kami akan menggunakan Transformasi CSS3. Transformasi boleh diberikan kepada elemen utama bentuk; di sini, ini bermakna persegi. Apabila berubah, unsur pseudo secara automatik akan mengubah kedudukannya mengikut elemen utama. Di sini kita akan memutarkan hati supaya dapat dilihat “berdiri”. Dan inilah yang kelihatan seperti hati kita sekarang. Kod lengkap bentuk hati di atas adalah seperti berikut, dalam HTML: Dan pada CSS kami, ia akan menjadi seperti ini: Perhatikan bahawa kami kini menetapkan saluran alpha Sekarang kita mempunyai bentuk hati yang sempurna, kita boleh menggantikan latar belakang dengan warna yang lain (mis. merah jambu atau merah) dengan mudah. Satu-satunya kelemahan di sini ialah kita tidak dapat menambahkan sempadan kepada bentuk kerana unsur-unsur disusun. Menambah garisan sempadan akan menjadikan hati kelihatan pelik. Dengan CSS3 yang membentuk bentuk seperti bentuk Jantung kini mudah dilakukan. Hartanah radius sempadan membolehkan kami membuat elemen atau elemen pseudo menjadi satu lingkaran. Dengan transformasi CSS3, kita boleh memutar atau menggerakkan koordinat objek dengan mudah. Anda hanya terhad oleh kreativiti dan imaginasi anda!
.bentuk hati kedudukan: relatif; lebar: 200px; ketinggian: 200px; warna latar belakang: rgba (250,184,66, 0.8);
: sebelum dan : selepas. Kami mula-mula menetapkan : sebelum unsur-unsur pseudo sebagai bulatan pertama kami. Kami menjadikannya persegi dengan saiz yang sama pada lebar dan ketinggian seperti yang kita lakukan dengan div itu. Kami kemudian mengubahnya menjadi bulatan dengan memberikan radius sempadan sebanyak 50% dan meletakkannya di sebelah kiri dataran. .bentuk hati: sebelum kedudukan: mutlak; bawah: 0px; kiri: -100px; lebar: 200px; ketinggian: 200px; kandungan: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; radius border: 50%; color-background: rgba (250,184,66 , 0.8);
: selepas dengan gaya yang sama seperti bulatan pertama yang kami buat. Kemudian, kami juga meletakkannya di bahagian atas dataran. .bentuk hati: selepas kedudukan: mutlak; atas: -100px; betul: 0px; lebar: 200px; ketinggian: 200px; kandungan: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; radius border: 50%; color-background: rgba (250,184,66 , 0.8);
.bentuk hati: sebelum,. bentuk hati: selepas kedudukan: mutlak; lebar: 200px; ketinggian: 200px; kandungan: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; radius border: 50%; color-background: rgba (250,184,66 , 0.8);. Bentuk-bentuk: sebelum bawah: 0px; kiri: -100px;. Bentuk-bentuk: selepas top: -100px; betul: 0px;
.bentuk hati -webkit-transform: berputar (45deg); -moz-transform: berputar (45deg); -ms-transform: putar (45deg); -o-transform: berputar (45deg); mengubah: putar (45deg);
Keputusan:
.bentuk hati kedudukan: relatif; lebar: 200px; ketinggian: 200px; -webkit-transform: berputar (45deg); -moz-transform: berputar (45deg); -ms-transform: putar (45deg); -o-transform: berputar (45deg); mengubah: putar (45deg); warna latar belakang: rgba (250,184,66, 1); . bentuk-bentuk: sebelum, .set-bentuk: selepas kedudukan: mutlak; lebar: 200px; ketinggian: 200px; kandungan: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; radius border: 50%; color-background: rgba (250,184,66 , 1);. Shape-shape: sebelum bottom: 0px; left: -100px;. Shape-shape: after top: -100px; right: 0px;
rgba (250,184,66, 1) di latar belakang untuk 1 untuk menghapuskan ketelusan. Kini inilah pandangan hati kita.
Kesimpulannya
