Buat Perbatasan Multi-warna menggunakan CSS

Diterbitkan: 2022-02-16

Properti perbatasan CSS memang memiliki beberapa opsi penyesuaian, seperti pilihan seperti solid, putus-putus, putus-putus, dll. Namun, ketika menyangkut warna perbatasan, kita hanya dapat memiliki warna solid per sisi. Tapi, ada cara lain untuk mencapai garis multi-warna menggunakan beberapa properti lagi yang mungkin tidak Anda pikirkan, mari kita lihat.

Padat

solidbor

putus-putus

dashbor

Burik

bertitik

Perbatasan multi-warna

warnawarnibor1

warnawarnibor2

Untuk mencapai batas multi-warna seperti yang ditunjukkan di atas, kita akan menggunakan properti position dan pemilih ::after dengan gradien warna. Pertama, kita akan membuat area header menggunakan kelas <div> HTML dan kemudian kita akan menatanya dengan CSS untuk memiliki batas multi-warna yang membaginya dan konten di bawahnya.

Buat HTML Anda:

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>
BUKA DI POPUP
 <div class="ost-multi-header"> <h1> Header Title </h1> </div>

Sekarang, mari kita menatanya sedikit dengan CSS.

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }
BUKA DI POPUP
 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

Anda sekarang harus memiliki sesuatu yang terlihat seperti ini:

Buat Perbatasan Multi-warna menggunakan CSS

Dengan itu, sekarang kita dapat menambahkan ::after ke .ost-multi-header selector . Tapi, sebelum kita melakukannya, saya ingin menjelaskan sedikit tentang apa yang ::after lakukan dan mengapa kita membutuhkan properti position untuk border multi-warna. ::after membuat elemen semu dengan apa pun yang ada di properti konten di akhir elemen yang dipilih. Dalam kasus kami, elemen itu adalah .ost-multi-header . Mari kita membuat "Halo Dunia!" contoh untuk menggambarkan.

Tambahkan ini ke CSS Anda:

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }
BUKA DI POPUP
 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }

hwheaderbor

Seperti yang Anda lihat, kami sekarang memiliki "Hello World!" elemen di bawah judul header. Karena elemen induk kita, .ost-multi-header , memiliki properti position sebagai relative , kita dapat memberikan posisi absolute pada elemen turunan. Ini akan memungkinkan kita memindahkan elemen semu baru yang kita buat dengan ::after mana pun kita suka di dalam elemen induk dengan mudah. Kami meletakkannya di bagian bawah dan memindahkannya lebih dari 20px dari kiri di dalam elemen induk. Catatan, jika elemen induk tidak memiliki properti posisi yang disetel ke relatif, maka elemen posisi absolut kita akan berada di bagian bawah dan 20px di sebelah kiri area pandang browser.

Bagaimana dengan perbatasan berwarna kita? Kita akan menata latar belakang elemen semu kita menjadi perbatasan multi-warna kita menggunakan gradien. Gradien CSS bisa linier atau radial. Untuk perbatasan kita, kita akan menggunakan linear-gradient . Sederhananya, ini akan memberi kita perbatasan yang kita cari.

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }
BUKA DI POPUP
 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

Tapi, mari kita perlambat sejenak untuk selangkah demi selangkah. Pertama, properti content tetap ada meskipun kosong. Ini karena, tanpa properti content , elemen semu tidak pernah dibuat; jadi, kita membutuhkannya. Kita perlu mengatur ketinggian elemen pseudo kita, ketinggian perbatasan kita. Mengapa mengatur properti left dan right ke 0? Tanpa lebar yang ditetapkan, ini akan meregangkan elemen semu menjadi lebar 100% di dalam elemen induk. Ini mungkin terlihat seperti banyak, tetapi pengaturan linear-gradient hanya memberi tahu warna untuk mengalir dari kiri "ke kanan", dan kami memasukkan warna apa yang kami inginkan pada persentase tertentu dari latar belakang.

Meskipun semua yang kami lakukan adalah memilih warna apa yang menjadi persentase tertentu, itu banyak pekerjaan kaki. Untungnya, ada sumber online gratis yang sangat membantu dengan gradien warna. Ultimate CSS Gradient Generator oleh ColorZilla adalah alat hebat yang mencakup beberapa properti gradien untuk mendukung browser lama.

Kami sudah menyiapkan gradien pada alat ini, jadi kami dapat menggunakan tautan ini untuk melihat pengaturan persis yang digunakan dalam tutorial ini: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33 ,feb123+66,2184cd+66,2184cd+100. Seharusnya terlihat seperti ini:

Buat Perbatasan Multi-warna menggunakan CSS

Ada banyak pengaturan di situs ini, tetapi mari kita fokus pada pengaturan apa yang kita butuhkan untuk membuat tampilan yang akan kita gunakan untuk perbatasan kita. Mari kita uraikan:

Buat Perbatasan Multi-warna menggunakan CSS

  1. Preset - Ini bisa menjadi titik awal yang bagus!
  2. Bilah penggeser - Anda dapat menambahkan, menghapus, dan mengedit warna di sini
  3. Berhenti - Bagian ini memungkinkan Anda untuk mengubah pengaturan untuk setiap opasitas dan lokasi warna. Cukup klik kotak warna pada penggeser di atas untuk mengubah mana yang Anda kontrol di bagian ini.
  4. Pratinjau - Di sini Anda dapat langsung melihat hasil perubahan Anda.
  5. Orientasi & Ukuran - Ini memungkinkan Anda untuk mengubah dari horizontal, vertikal, diagonal, atau radial. Dan untuk mengatur ukuran gradien.
  6. Kode CSS - Kode yang dihasilkan dengan tautan permanen sehingga Anda selalu dapat kembali dan mengedit gradien dengan mudah.

Kami tidak mencari gradien pudar dalam kasus kami, melainkan transisi datar yang solid antara dua warna, jadi yang harus kami lakukan adalah menumpuk dua warna di atas satu sama lain di mana kami ingin ini terjadi. Dalam contoh kami, kami menumpuk warna masing-masing 33% dan 66%.

Buat Perbatasan Multi-warna menggunakan CSS

Jangan ragu untuk bermain-main dengan pengaturan, mengetahui bahwa apa yang Anda lihat di pratinjau adalah kode yang akan dihasilkan. Saat Anda mendapatkan pengaturan tampilan seperti yang Anda inginkan, Anda dapat menggunakan tombol "salin" di kanan bawah kotak kode.

gradcopy

Jika Anda menyalin kode seperti yang saya miliki di tautan, CSS akhir Anda akan terlihat seperti ini:

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }
BUKA DI POPUP
 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

Dan, CSS itu akan menghasilkan garis bawah multi-warna yang sepenuhnya responsif:

Buat Perbatasan Multi-warna menggunakan CSS

Ini dia! Kita tidak perlu menambahkan padding 6px ke bagian bawah .ost-multi-header , tetapi posisi anak absolute tidak mempengaruhi ketinggian elemen induk lagi. Kami dapat membiarkannya mengapung di atas konten kami di elemen induk, atau menambahkan padding untuk memastikannya tidak menutupi konten apa pun yang mungkin tidak ingin kami blokir.

Berikut ini tautan ke latihan ini yang dibuat ulang di CodePen agar semua orang dapat mengedit dan belajar tanpa khawatir.

Satu catatan terakhir, beberapa browser lama hanya mendukung pemilih titik dua tunggal :after , dan bukan standar modern double ::after . Anda dapat menggunakan titik dua tunggal jika Anda ingin aman. Ini juga akan berfungsi di browser modern untuk saat ini.