Bagaimana Membuat Pita CSS
Kami bercakap tentang Reben CSS dalam reka bentuk web apabila a jalur kotak (dipanggil reben) membungkus kotak lain. Ia adalah teknik reka bentuk yang agak digunakan untuk menghias teks, terutamanya tajuk. Di laman web W3C, anda boleh menyemak bagaimana riben CSS yang digunakan dengan betul dapat membantu kandungan struktur dengan cara yang halus.
Jadi, dalam jawatan ini kita akan melihat bagaimana untuk mencipta riben CSS mudah yang boleh anda gunakan untuk meningkatkan tajuk di laman web anda. Terima kasih kepada Transformasi CSS, kami boleh membuat reka bentuk ini dengan pangkalan kod yang lebih mudah daripada sebelumnya.
Anda boleh melihat pada demo akhir di bawah.
HTML & gaya asas
Pertama, kita buat a tag kami tandakan dengan .kad pemilih yang mewakili a kotak segi empat tepat riben akan bungkus sekitar.
Kami juga menetapkan dimensi asas dan juga warna latar belakang dengan CSS.
.kad background-color: beige; ketinggian: 300px; margin: 40px; lebar: 500px;
Bahagian tengah reben
Kami akan menggunakan a Pembolehubah CSS (membolehkan kami menyimpan dan menggunakan semula nilai CSS) dipanggil --p kepada simpan nilai padding. Nilai padding harta benda menggunakan var (- p) sintaks untuk paddings kiri dan kanan reben supaya boleh mudah melebar. The --p pembolehubah kemudiannya akan digunakan semula berbilang kali; yang menjadikan kod kami fleksibel.
.reben - p: 15px; warna latar belakang: rgb (170,170,170); ketinggian: 60px; padding: 0 var (- p); lebar: 100%;
Pada tangkapan skrin di bawah, anda dapat melihat bagaimana demo anda sepatutnya kelihatan pada ketika ini:
Memusatkan riben
Kita juga perlu pusat reben. Kami tolakkannya ke kiri dengan saiz padding (ditandakan oleh --p pemboleh ubah) menggunakan kedudukan relatif.
.reben - p: 15px; warna latar belakang: rgb (170,170,170); ketinggian: 60px; padding: 0 var (- p); kedudukan: relatif; kanan: var (- p); lebar: 100%;
Demo dikemas kini:
Sisi reben
Sekarang kita buat belah kiri dan kanan reben yang sepatutnya nampak di sekeliling kad kad. Untuk berbuat demikian, kami menggunakan kedua-dua : sebelum dan : selepas elemen-elemen pseudo .riben.
Kedua-dua elemen pseudo mewarisi warna latar belakang .riben, dan kami menggunakannya penapis: kecerahan (.5) memerintah untuk menggelapkan warna mereka sedikit. Mereka juga benar-benar diposisikan dalam diri mereka (relatif kedudukan) ibu bapa.
Lebar mereka perlu menjadi sama seperti saiz padding, dan kami meletakkan mereka ke hujung kiri dan kanan reben menggunakan kiri: 0 dan betul: 0 peraturan gaya.
.reben: sebelum, .ribbon: selepas background-color: inherit; kandungan: "; paparan: blok; penapis: kecerahan (.5), ketinggian: 100%; kedudukan: mutlak; lebar: var (- p); .ribbon: betul: 0;
Kini riben dengan sisi yang baru kita tambahkan kelihatan seperti di bawah:
Keluarkan sebelah
Untuk membuat sisi reben kelihatan bengkok, kita perlu condong pinggang sebanyak 45 °. The mengubah: skewy () Peraturan CSS skews elemen menegak.
.reben: sebelum kiri: 0; mentransformasikan: skewy (45deg); .ribbon: selepas kanan: 0; mengubah: skewy (-45deg);
Seperti yang anda dapat melihat tepi sisi jangan selari selepas transformasi, jadi kita perlu tarik mereka ke bawah.
Align the sides
Untuk tentukan panjang yang betul dengan mana kita perlu menggerakkan sisi ke bawah, kita berpaling kepada trigonometri. Apa yang kita perlu cari adalah x, sebagai y adalah lebar sisi (sama dengan saiz padding) .riben), dan sudut θ adalah 45 ° (sudut condong).
Hasilnya x kemudian perlu dibahagi dua, kerana terdapat sisi kiri dan kanan juga.
Sekiranya anda menggunakan apa-apa pemeriksaan preprocessor CSS jika ia mempunyai Tan fungsi, sebaliknya merujuk kepada carta tangen atau kalkulator kepada ketahui nilai tangen sudut. Kita bernasib baik tan 45 ° adalah 1, yang bermaksud bahawa nilai x sama dengan y dalam kes kami.
.reben: sebelum, .ribbon: selepas background-color: inherit; (var (- p) / 2); lebar: var (- p);
Sejak x terpaksa dibahagi dua, kami menggunakannya calc () Fungsi CSS untuk melaksanakan pembahagian --p pembolehubah.
Akhirnya kita perlu menyelaraskan sisi sepanjang paksi z juga, jadi mari tambahkan z-indeks: -1 memerintah ke sisi untuk letakkan mereka di belakang bahagian tengah reben.
.reben: sebelum, .ribbon: selepas background-color: inherit; (var (- p) / 2); lebar: var (- p); z: indeks: -1;
Sekarang kita menyelaraskan sisi, reben CSS kami selesai.
Di bawah ini anda boleh menyemak demo langsung sekali lagi, sila ambil perhatian bahawa ia menggunakan beberapa stylings tambahan juga.
