Dengan semua fitur baru di CSS3, kami sekarang dapat membuat situs web tanpa gambar. Di masa lalu, penggunaan gambar tidak dapat dihindari untuk menunjukkan warna gradien
Hari ini, menjadi lebih ramping dengan penggunaan CSS3 Gradient Background. Di postingan sebelumnya, kami telah menunjukkan kepada Anda cara memainkan Gradient CSS3 sebagai warna latar belakang dalam berbagai bentuk dan arah;
Tapi Gradient CSS3 tidak berhenti hanya untuk penggunaan latar belakang. Tahukah Anda bahwa Anda juga dapat menggunakannya di dalam perbatasan?
Metode Pertama
Metode pertama adalah dengan menerapkan CSS3 Gradient di dalam pseudo-elements. Baiklah, mari kita lihat bagaimana triknya bekerja
Perbatasan Gradien Atas ke BawahKami akan memulai dengan gradien sederhana yang menyebar dari atas ke bawah. Untuk memulai, buat kotak dengan div, sebagai berikut
HTML
CSS
.box { width: 400px; height: 400px; background: #eee; }_Untuk membentuk gradien pada batas kotak, atur batas padat di sisi atas dan bawah kotak terlebih dahulu. Kami juga membuat 2 persegi panjang dengan 2 elemen semu — :before dan :after — dan menentukan lebar dalam ukuran yang sama dengan lebar batas kotak
Posisikan persegi panjang di sisi kiri dan kanan kotak dan terapkan linear-gradient melalui background-image. Anda dapat melihat bagaimana trik ini ternyata di bawah ini
Gradien Perbatasan Kiri ke KananSekarang mari buat gradien yang membentang ke kiri dan kanan dengan cara yang identik dengan contoh sebelumnya. Hanya saja, kali ini kita akan menambahkan border kotak di sisi kiri dan kanan, bukan di atas dan bawah
Demikian pula, kami juga menggunakan elemen semu — :before dan :after — untuk membentuk 2 persegi panjang. Tapi, bertentangan dengan contoh sebelumnya, kita sekarang menempatkannya di sisi atas dan bawah kotak
Membuat gradien diagonal dengan trik ini, secara teknis rumit
Tetap saja, kami mengandalkan 2 elemen semu, :before dan :after dan menggunakan linear-gradient. Namun kali ini, kami akan menggunakan 2 linear-gradient dalam elemen semu. Dan setiap rentang gradien bertentangan satu sama lain. Lihat kode sumber berikut untuk detailnya
Trik Kedua
Metode kedua adalah dengan menggunakan properti CSS3 .box { width: 400px; height: 400px; background: #eee; }5. Properti .box { width: 400px; height: 400px; background: #eee; }5 di CSS3 memungkinkan kita untuk mengisi perbatasan dengan gambar serta CSS3 Gradient
Dukungan browser untuk .box { width: 400px; height: 400px; background: #eee; }_5 cukup bagus; . Perlu dicatat, bagaimanapun, bahwa .box { width: 400px; height: 400px; background: #eee; }5 hanya akan bekerja pada bentuk atau kotak persegi panjang
Itu berarti menambahkan border-image: <source> <slice> <width> <outset> <repeat|initial|inherit>; _0 akan menyimpang .box { width: 400px; height: 400px; background: #eee; }5 output
Berikut ini adalah spesifikasi properti .box { width: 400px; height: 400px; background: #eee; }_5
border-image: <source> <slice> <width> <outset> <repeat|initial|inherit>;adalah jalur yang menentukan gambar yang digunakan di perbatasan. Di sini, kita akan mengisinya dengan CSS3 Gradient sebagai gantinya. Untuk mencapai hasil yang sama seperti pada contoh sebelumnya, kami menerapkan Gradien CSS3 dalam .box { width: 400px; height: 400px; background: #eee; }5, sebagai berikut
.box{ width: 250px; height: 250px; background: #eee; border: 20px solid transparent; -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%); -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%); border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%); border-image-slice: 1; }.box { width: 400px; height: 400px; background: #eee; }5 tidak akan menampilkan apa pun jika kami tidak menentukan lebar border-image: <source> <slice> <width> <outset> <repeat|initial|inherit>; 5. Jadi, seperti yang Anda lihat di atas, kami menambahkan border-image: <source> <slice> <width> <outset> <repeat|initial|inherit>; 6 lebar batas dengan warna batas transparan. Kemudian, kami menetapkan nilai.box { width: 400px; height: 400px; background: #eee; }_5danlinear-gradient bersama dengan awalan vendor untuk versi Webkit dan Firefox sebelumnya
Penambahan border-image-slice yang ditunjukkan di atas akan mengatur offset bagian dalam konten border-image: <source> <slice> <width> <outset> <repeat|initial|inherit>; 9. Properti ini diperlukan untuk menampilkan gradien sepenuhnya di dalam area sekitar kotak. Lihat output di bawah ini
Metode ini menawarkan lebih banyak fleksibilitas untuk menyesuaikan gradien ke segala arah yang memungkinkan; . Di bawah ini adalah beberapa contoh