Cara menggunakan transparent color in javascript

element.

Indonesian (Bahasa Indonesia) translation by Lukman Nulhakim (you can also view the original English article)

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 dan ini akan baik-baik saja) sebagai linear-gradient, atau radial-gradient, kemudian kami memberikan warna awal dan warna akhir:

.box {
 background: linear-gradient(#000046, #1cb5e0);   
}

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:

.box {
 background: linear-gradient(to right, #000046, #1cb5e0);   
}

Sama halnya, mengubah parameter ini untuk membaca arah to top right yang akan membuat gradient menjadi diagonal. Tepatnya Anda juga dapat membuat yang diagonal, dengan menetapkan sesuatu seperti 45deg (atau suduh apa pun yang Anda pilih).

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

.box {
 background: linear-gradient(to right, orange, #ec38bc, #7303c0, cyan);   
}

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:

.box {
 background: linear-gradient(to right, #f05053 80%, #e1eec3);   
}

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 linear-gradient untuk radial-gradient adalah semua hal yang perlu Anda lakukan disini:

.box {
 background: radial-gradient(#fdbb2d, #22c1c3);    
}

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 circle seperti ini:

.box {
 background: radial-gradient(circle, #fdbb2d, #22c1c3);    
}

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

.box {
 background: radial-gradient(circle at top left, #fdbb2d, #22c1c3);    
}

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 rgba) dan berada di atas foto.

Properti background dapat menerima beberapa nilai yang membentuk tumpukan, yang pertama adalah yang paling atas dan yang terakhir menemukan dirinya di bagian bawah tumpukan. Jika kita mendefinisikan gradien terlebih dahulu, itu akan berada di atas apa pun yang kita definisikan sesudahnya. Lihatlah snippet ini dan lihat apakah Anda dapat mengetahui apa yang terjadi:

.hero {
    background: linear-gradient(to right, rgba(57, 106, 252, 0.5), rgba(41, 72, 255, 0.2)),  url(https://bg.jpg);
}

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 background-clip (dan awalan -webkit-background-clip), yang merupakan sesuatu yang diretas tetapi bekerja dengan sangat baik.

Kita mulai dengan sepotong teks (tag h2 dalam kasus ini) dan menerapkan gradien ke latar belakangnya. Properti background-clip, diberi nilai text, kemudian menghapus latar belakang dari seluruh blok kecuali untuk area di belakang teks. Color teks tentu saja mengaburkan latar belakang, jadi kami membuatnya menjadi transparent untuk membiarkan gradien bersinar melalui:

h2 {
    background-image: linear-gradient(to right, #0cebeb, #20e3b2, #29ffc6);
	
    -webkit-background-clip: text;
    background-clip: text;
    
    color: transparent;
}

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 border-image. Akhirnya, kita mengatur border-image-slice ke 1, agar gradien menggunakan garis batas penuh dari border.

.card1 {
    border: 5px solid transparent;
	border-image: linear-gradient(to bottom, #22c1c3, #fdbb2d);
	border-image-slice: 1;
}

Inilah hasilnya:

Namun ada beberapa masalah dengan pendekatan ini. Pertama, border-image tidak didukung secara universal pada semua browser, terutama IE versi yang lama. Kedua, pendekatan ini tidak akan memungkinkan Anda untuk menambahkan border-radius seperti yang Anda lihat dalam Envato elemen UI. Jadi mari kita lihat pendekatan alternatif.

Kami mulai dengan memberi div dengan position: relative. Kami kemudian menambahkan pseudo-element ke div, memberikan posisi absolute negatif apa pun yang kami pilih untuk lebar border (5px dalam kasus ini):

.card2::after {
    content: '';
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: -5px;
    right: -5px;
}

Ini akan memberi kita solid gradien blok yang mencakup seluruh div. Menambahkan z-index menjadi -1 akan memastikan bahwa blok gradien bergerak dibalik div.

Berikutnya (ada banyak langkah untuk tahap ini) kami menambahkan border-radius ke pseudo-element yang sama dengan induknya (masing-masing berlaku 10px). Dan kemudian kami memberi elemen induk latar belakang apa pun yang kami inginkan; sama dengan latar belakang halaman akan membuatnya tampak transparan.

Akhirnya, Kita sekali lagi beralih ke teman kita yaitu background-clip, menerapkannya pada elemen induk dan kali ini memberi nilai pada padding-box. Tindakan terakhir ini memastikan bahwa pengisian div berjalan ke tepi batas dan tidak lebih jauh.

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-shadow untuk mencapai efeknya. Saya sarankan Anda melihat Border-gradient mixin yang dibuat oleh John Grisin pada CodePen untuk melihat bagaimana ini bekerja.

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.

Sumber-sumber lain yang berguna

• Gradien Website: Koleksi gratis 180 gradien linier yang dapat Anda gunakan sebagai
  latar belakang konten pada bagian mana pun dari website Anda.
• UI Gradien: Gradien warna yang indah untuk desain dan kode
• CSSmatic Gradiet Generator  
• PostCSS Autoprefixer
• Border-gradient mixin: oleh John Grishin