Cara menggunakan css fade border-image

Dalam tutorial ini Anda akan belajar tentang menggunakan gradien pada website. Saya akan memberikan beberapa contoh, beberapa latihan (seperti bagaimana membuat gradien untuk border), dan saya juga akan memberikan beberapa sumber berguna yang akan membuat anda jauh lebih mudah dalam membuat gradient.

Lihatlah Tutorial Ini

Dasar-dasar gradien

Dimasa lalu tidak mungkin menggunakan gradien tanpa mengandalkan gambar, walaupun demikian perkembangan CSS saat ini menjadi sederhana dan andal untuk membuat gradien melalui stylesheet.

Dalam bentuk yang paling sederhana, kita mendefinisikan gradien sebagai gambar latar belakang. Kami menetapkan gambar latar belakang (hanya menggunakan singkatan

 background: linear-gradient(to right, #000046, #1cb5e0);   

 background: linear-gradient(to right, #000046, #1cb5e0);   

 background: linear-gradient(to right, #000046, #1cb5e0);   

1

.box {

2

 background: linear-gradient(#000046, #1cb5e0);   

3

}

Secara default, linier gradien berjalan dari atas ke bawah, memberikan kita sesuatu seperti ini:

Kita dapat mengubah arah dengan menambahkan parameter baru sebelum warna, misalnya:

1

.box {

2

 background: linear-gradient(to right, #000046, #1cb5e0);   

3

}

Sama halnya, mengubah parameter ini untuk membaca arah

 background: linear-gradient(to right, #000046, #1cb5e0);   

 background: linear-gradient(to right, #000046, #1cb5e0);   

Mengambil langkah yang lebih jauh, Anda tidak perlu berhenti hanya dengan dua warna. Dan Anda dapat menggunakan nama warna juga, seperti ini:

1

.box {

2

.box {

3

}

Dalam kasus ini masing-masing dari empat warna akan menduduki jumlah yang sama dari ruang yang tersedia, memberikan kita gradien yang halus, dan seimbang.

Jika kita tidak ingin mendistribusikan secara merata, tetapi ingin satu warna menempati lebih banyak ruang daripada yang lain, kita dapat menentukan nilai langsung sebagai persentase setelah warna seperti ini:

1

.box {

2

2

3

}

Kita Berikan:

Radial Gradient

Kemudian, Kita dapat menggunakan segala sesuatu yang telah Kita pelajari sejauh ini dan mengubahnya untuk menampilkan gradien secara radial sebagai gantinya. Beralih ke

 background: linear-gradient(to right, #000046, #1cb5e0);   

 background: linear-gradient(to right, #000046, #1cb5e0);   

1

.box {

2

2

3

}

Gradien radial ini membentang ke elemen induknya, sehingga persegi panjang ini berakhir dengan gradien seperti elips. Untuk membatasi gradien itu tetap menjadi lingkaran terlepas dari proporsi induknya, kita dapat menambahkan kata kunci

 background: linear-gradient(to right, #000046, #1cb5e0);   

1

.box {

2

 background: linear-gradient(#000046, #1cb5e0);   

3

}

Lebih jauh lagi, Kita dapat menentukan sumber gradien lingkaran juga, sehingga dimulai (sebagai contoh) dari kiri atas elemen induknya.

1

.box {

2

 background: linear-gradient(#000046, #1cb5e0);   

3

}

Efeknya halus, tetapi perbedaan antara ini dan gradien linier mungkin hanya sesederhana apa yang Anda cari.

Penggunaan yang Sesungguhnya

Dimana kita bisa menggunakan gradien dalam beberapa cara yang menarik?

1. Hero Overlay

Berikut contoh dari overlay, dimana gradien sedikit transparan (menggunakan nilai

 background: linear-gradient(to right, #000046, #1cb5e0);   

Properti

 background: linear-gradient(to right, #000046, #1cb5e0);   

1

3

2

3

3

}

Berikut adalah efek yang dihasilkan:

2. Gradien pada Text

Memiliki gradien pada teks adalah efek yang bagus, meskipun tidak sepenuhnya didukung dalam arti yang sesungguhnya. Sebaliknya, kami mengandalkan properti

.box {

.box {

Kita mulai dengan sepotong teks (tag

.box {

.box {

.box {

.box {

.box {

1

3

2

}

3

}

}

}

}

}

}

}

1

1

1

}

3. Gradien Border

Gradien Broder adalah suatu hal yang mungkin telah Anda lihat di Envato Elements, dan itu adalah cara yang bagus untuk memvisualisasikan UI secara visual. Ini dilakukan secara halus, tetapi lihatlah linear gradient biru ke ungu pada tombol border ini:

Untuk mencapai efek ini ada beberapa pendekatan. Yang pertama bergantung pada kita terlebih dahulu memberikan elemen (anchor, container, atau apa saja) border yang transparan. Kami kemudian menerapkan gradien menggunakan properti

.box {

.box {

1

1

2

1

3

1

}

.box {

}

}

Inilah hasilnya:

Namun ada beberapa masalah dengan pendekatan ini. Pertama,

.box {

Kami mulai dengan memberi div dengan

.box {

1

.box {

2

.box {

3

.box {

}

2

}

2

}

2

1

2

1

}

Ini akan memberi kita solid gradien blok yang mencakup seluruh div. Menambahkan

.box {

Berikutnya (ada banyak langkah untuk tahap ini) kami menambahkan

.box {

Akhirnya, Kita sekali lagi beralih ke teman kita yaitu

.box {

.box {

Jadi pendekatan akhir ini sebenarnya bukanlah border dalam arti yang sebenarnya, tetapi itu mencapai efek yang kita cari.

Pendekatan ketiga lebih tepatnya, kali ini menggunakan

.box {

Kesimpulan

Jadi begitulah! permulaan pada gradien CSS ini telah memberi Anda awal yang Anda butuhkan, ditambah dengan melihat bagaimana Anda dapat menggunakan gradien pada website. Jika Anda telah melihat penggunaan kreatif lainnya dari gradien di luar sana, silakan cantumkan pada bagian komentar.