Properti perbatasan di CSS memungkinkan desainer web untuk menentukan gaya, lebar, dan warna batas elemen.
Di CSS, gradien memungkinkan seorang desainer untuk menerapkan transisi yang mulus antara dua warna atau lebih. Anda dapat menggunakan gradien untuk membuat efek visual seperti bayangan, pencampuran warna, dan tekstur pada elemen di halaman web Anda.
Gradien batas adalah properti CSS yang memungkinkan pengembang menerapkan gradien ke batas elemen.
Perbatasan gradien menciptakan efek visual di mana warna perbatasan berubah dari satu warna ke warna lainnya.
Mengapa menggunakan batas gradien?
Gradien batas adalah di antara berbagai fitur gaya yang diperkenalkan di CSS3. Ini adalah beberapa alasan mengapa Anda harus memilikinya di aplikasi web berikutnya:
- Gradien batas fleksibel: Anda dapat membuat efek kompleks dan berlapis menggunakan batas gradien. Ini tidak seperti batas warna solid, yang kaku. Perbatasan gradien dengan demikian berguna ketika berhadapan dengan tata letak atau bentuk kompleks yang menuntut desain visual yang bernuansa.
- Buat daya tarik visual: Dengan menggunakan efek batas gradien, Anda dapat menambahkan efek visual yang menarik ke desain Anda. Misalnya, Anda dapat menggunakan kontras warna yang berani untuk membantu menarik perhatian ke elemen tertentu di laman web Anda.
- Berikan integrasi tanpa batas: Batas gradien memungkinkan Anda mengintegrasikan batas dengan mulus ke latar belakang elemen Anda. Pendekatan seperti itu memberi halaman web Anda tampilan yang solid dan kohesif, menunjukkan desain yang dipikirkan dengan matang.
Bagaimana cara menambahkan Border Gradient di CSS
Sebelum kami mendemonstrasikan cara menambahkan gradien batas, kami dapat mengilustrasikan cara menambahkan batas ke elemen HTML.
Kita bisa menggunakan kode ini;
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> <title>Document</title> </head> <body> <div class="box contains-border"> How to add a Border illustrated!!! </div> </body> </html>
CSS
.box {
width: 400px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.contains-border {
border-color: rebeccapurple;
border-style: solid;
border-width: 5px;
}
Halaman yang dirender akan muncul sebagai:
Meskipun kode di atas memiliki batas, namun tidak begitu menarik untuk dilihat karena kosong. Kami hanya memiliki perbatasan ungu Rebecca solid 5px di sekitar div kami.
Kita dapat membuat perbatasan kita menarik menggunakan gradien perbatasan. Ada pendekatan berbeda untuk menambahkan gradien batas. Berikut ini adalah beberapa yang utama:
Menggunakan Perbatasan Gradien (Gradien Linier, Gradien Radial, Gradien Kerucut)
Kami akan mengilustrasikan bagaimana menggunakan Gradient Borders dalam tiga cara berbeda:
Gradien Linier
Gradien linier menciptakan transisi yang mulus antara dua atau lebih warna dalam garis lurus. Kita dapat menggunakan kode berikut untuk menunjukkan:
HTML
<!DOCTYPE html> <html> <head> <title>Linear Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box linear-gradient"> Linear Gradient Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.linear-gradient {
border-style: solid;
border-width: 10px;
border-image: linear-gradient(45deg, rgb(143, 55, 0), rgb(66, 228, 250)) 1;
}
Kami telah menentukan gaya perbatasan sebagai solid, artinya perbatasan di sekitar kotak kami adalah garis padat. Lebar batas pada kode kita adalah 10px.
Gradien linier dimulai dengan rgb(143, 55, 0)” dan diakhiri dengan “rgb(66, 228, 250)”. Kami juga telah menentukan sudut 45 derajat. Lebar irisan gambar batas diatur ke “1”.
Halaman yang dirender akan muncul sebagai:
Gradien Radial
Gradien radial menciptakan gradien melingkar yang memancar dari titik pusat, memungkinkan pengguna untuk beralih dari satu warna ke warna lain dalam elemen halaman web.
Kita dapat mengilustrasikan cara menambahkan gradien radial menggunakan kode ini:
HTML
<!DOCTYPE html> <html> <head> <title>Radial Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box radial-gradient"> Radial Gradient Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.radial-gradient {
border-style: solid;
border-width: 5px;
border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
}
Kami telah menetapkan gaya batas elemen kami sebagai padat. Kami juga telah memberikan batas dengan lebar batas 5px.
Gradien radial dimulai dengan RGB hijau tua (0,143,104) dan diakhiri dengan kuning cerah, dilambangkan dengan rgb (250,224,66).
‘1’ di akhir kode mewakili properti border-image-repeat. Nilai ini menginstruksikan browser untuk mengulangi gambar batas hanya sekali di sekitar batas elemen.
Halaman yang dirender akan muncul sebagai:
Gradien Kerucut
Gradien berbentuk kerucut menciptakan transisi warna melingkar. Dalam efek ini, transisi dimulai dari titik pusat dan kemudian menyebar ke luar, membentuk efek melingkar.
HTML
<!DOCTYPE html> <html> <head> <title>Conic Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box conic-gradient"> Conic Gradient Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.conic-gradient {
border-style: solid;
border-width: 7.5px;
border-image: conic-gradient(red, rgb(0, 255, 47), rgb(255, 60, 0), rgb(13, 255, 0), blue, rgb(0, 255, 4), rgb(255, 0, 38)) 1;
}
Dalam kode ini, kita mengatur gaya perbatasan sebagai solid dan memberikan lebar perbatasan 7.5px. Properti border-image mengatur gradien perbatasan. Ada tujuh warna, dimulai dengan merah dan diakhiri dengan rgb(255, 0, 38).
Gambar ‘1’ di akhir kode memberikan lebar batas 1 piksel.
Halaman yang dirender akan muncul sebagai:
Menggunakan Gambar Perbatasan
Gambar batas menggantikan batas solid standar elemen HTML. Gambar batas digunakan untuk membuat desain yang rumit alih-alih menggabungkan warna untuk membuat gradien batas.
HTML
<!DOCTYPE html> <html> <head> <title>Border Images Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box border-images"> Border Images Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.border-images {
border-style: solid;
border-width: 15px;
border-image-source: url(/images/elephant-2910293_1920.jpg);
border-image-slice: 60 30;
}
Kami telah memberikan properti border-width kami dengan lebar 15px dan mengatur border-style menjadi solid.
Border-image-slice menyetel lebar dan tinggi kotak border masing-masing menjadi 60% dan 30%.
Halaman yang dirender akan muncul sebagai:
Menggunakan Properti Singkatan
Properti steno memungkinkan pengembang untuk menata beberapa properti CSS individual menggunakan satu baris kode. Untuk kasus ini, kami menggunakan border-image untuk menentukan border-image-source dan border-image-slice.
HTML
<!DOCTYPE html> <html> <head> <title>Shorthand Property Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box shorthand"> Shorthand Property Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.shorthand {
border-style: solid;
border-width: 15px;
border-image: url(/images/elephant-2910293_1920.jpg) 60 30;
}
Halaman yang dirender akan muncul sebagai:
Generator gradien batas CSS
Generator gradien batas CSS membantu pengembang menambahkan efek gradien pada elemen di halaman web. Generator ini memungkinkan Anda menyesuaikan pengaturan, artinya Anda tidak perlu membuat semuanya dari awal. Berikut ini adalah beberapa alat yang dapat Anda gunakan:
#1. CSS Gradient Generator-Mengonversi Warna
Konversi Warna memungkinkan Anda menghasilkan kode CSS gradien linier atau radial hingga lima warna. Kode gradien CSS yang Anda hasilkan dapat digunakan sebagai batas elemen atau gambar latar belakang.
Anda dapat melakukan hal berikut dengan generator ini;
- Pilih hingga lima warna dan gunakan dalam gradien batas.
- Pilih arah gradien. Alat ini memiliki gradien linier dan radial.
- Anda dapat memutuskan bagaimana transisi warna terjadi menggunakan fitur penghentian warna.
Setelah selesai bereksperimen dan menghasilkan kode, Anda dapat menyalin dan menggunakannya di situs web Anda.
#2. Generator Gradien Perbatasan CSS-CSS yang tidak digunakan
Unused-CSS membantu pengembang menghasilkan batas gradien yang dapat mereka terapkan untuk memblokir elemen tanpa membuat elemen semu atau elemen tambahan.
Anda dapat melakukan hal berikut;
- Pilih di antara jenis gradien yang berbeda. Anda dapat dengan mudah beralih antara gradien radial dan linier saat bekerja dengan alat ini.
- tab pratinjau. Alat ini memungkinkan Anda melihat pratinjau bagaimana gradien batas akan muncul di halaman web Anda saat Anda menyesuaikannya.
- Warna berhenti. Alat ini memudahkan untuk memutuskan bagaimana transisi akan terjadi untuk warna yang berbeda.
- Kustomisasi ukuran batas. Anda dapat menyesuaikan ukuran batas dan radius batas dengan mudah menggunakan alat ini.
Setelah Anda puas dengan kode yang dihasilkan, Anda dapat menyalin dan menggunakannya di proyek Anda.
#3. Gradient Border Generator- Amit Sheen
Alat ini memiliki delapan area latar belakang yang berbeda, memungkinkan pengembang membuat efek perbatasan gradien bulat.
Anda dapat mencapai yang berikut;
- Buat animasi gradien. Alat ini memungkinkan Anda menghasilkan animasi gradien yang bertransisi antara dua warna atau lebih.
- Anda dapat memasukkan kode JavaScript. Jika elemen Anda yang dapat disesuaikan memerlukan kode JS, Anda selalu dapat menemukan dan menyesuaikannya dari panel kontrol.
- Pratinjau langsung. Anda dapat melihat perubahan pada kode Anda saat Anda menyesuaikannya.
Anda dapat menyalin-tempel kode setelah menyesuaikan efek gradien batas sesuai keinginan Anda.
Kesimpulan
Saat mendesain halaman web Anda, Anda dapat menggunakan salah satu pendekatan di atas untuk menambahkan batas gradien ke elemen Anda. Pilihan pendekatan dapat bervariasi berdasarkan preferensi, tingkat keterampilan, dan sifat elemen yang Anda gaya.
Anda juga dapat menggunakan pendekatan yang berbeda untuk elemen yang berbeda pada halaman web yang sama.
Lihat cara membuat batas ganda di CSS untuk meningkatkan daya tarik visual laman web Anda.
