Home-theater-designers
Jika Anda berada di internet selama lebih dari beberapa menit, kemungkinan Anda menemukan gradien CSS. Properti latar belakang CSS dapat digunakan untuk membuat berbagai gaya yang berbeda, dan salah satu jenis yang paling menarik adalah apa yang dapat dilakukan dengan nilai gradien.
Mengetahui cara mendesain dan membuat gradien CSS yang berbeda merupakan aset bagi setiap perancang atau pengembang perangkat lunak. Dari artikel ini, Anda akan mempelajari semua yang perlu Anda ketahui untuk mulai memasukkan gradien CSS dalam proyek Anda.
Apa itu Gradien CSS?
Gradien CSS pada dasarnya adalah kombinasi dari dua atau lebih warna yang bertransisi dengan mulus dari satu warna ke warna berikutnya. Keadaan transisi dari gradien CSS tergantung pada jenis gradien yang digunakan. Ada dua jenis utama gradien yang biasa digunakan dalam desain perangkat lunak: linier dan radial.
Namun, ada jenis gradien ketiga yang kurang populer dan dikenal sebagai gradien kerucut.
Sintaks Gradien CSS
Background-image: gradient-type (direction, color1, color2);
Gradien CSS harus ditetapkan ke properti CSS gambar latar. Jenis gradien dapat menjadi salah satu dari beberapa; gradien linier, gradien radial, atau gradien kerucut. Jenis gradien diikuti dengan kurung buka dan tutup yang berisi arah transisi gradien, serta warna yang akan dimasukkan dalam gradien.
Terkait: Cara Mengatur Gambar Latar Belakang di CSS
Contoh di atas menunjukkan dua warna, tetapi gradien dapat berisi beberapa warna berbeda. Satu-satunya persyaratan adalah bahwa setiap warna dalam daftar dipisahkan dengan koma.
Apa itu Gradien Linier?
Gradien linier adalah gradien CSS paling populer. Ini menciptakan gradien transisi horizontal, vertikal, atau diagonal menggunakan dua atau lebih warna.
Contoh Gradien Linear CSS
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
Kode di atas akan menghasilkan gradien CSS berikut:
Ada satu komponen utama dari sintaks gradien dihilangkan dari contoh di atas. Komponen ini adalah arah transisi dari gradien, dan itu dihilangkan karena keselarasan default dari gradien linier adalah vertikal (atas-ke-bawah); itulah output yang diinginkan dalam contoh ini.
Kode di atas menghasilkan hasil yang sama dengan baris kode berikut. Satu-satunya perbedaan antara keduanya adalah bagian arah kode.
Menggunakan Contoh Gradien Linier Bawah
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
Seperti yang Anda lihat dari output, kode di atas membuat gradien yang dimulai dengan warna biru di bagian atas lalu perlahan beralih ke oranye di bagian bawah. Jika Anda ingin membalik urutan warna, Anda cukup mengganti ke bawah dengan ke atas dan ini akan membalikkan arah gradien, menghasilkan output berikut:
Mirip dengan perataan vertikal, perataan horizontal gradien dapat dicapai dengan menggunakan dua set kata kunci arah: ke kiri dan ke kanan , yang akan menghasilkan output berikut, masing-masing.
aplikasi edit video terbaik untuk android
Gradien Linier Diagonal
Dimungkinkan untuk mencapai transisi gradien linier diagonal ke segala arah gradien linier. Hanya ada empat daftar kata kunci spesifik yang perlu Anda ketahui untuk memungkinkan hal ini.
- Ke kanan bawah
- Ke kiri bawah
- Ke kanan atas
- Ke kiri atas
Menggunakan Contoh Gradien Linier Diagonal
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
Contoh di atas menghasilkan output berikut:
Seperti yang Anda lihat dari output di atas, gradien linier membuat transisi dalam arah diagonal bergerak dari kiri atas ke bagian kanan bawah gradien.
Gradien Linear Warna-warni
Gradien linier dapat memiliki dua warna atau lebih, tetapi seperti apa lebih banyak warna dalam gradien? Susunan warna gradien linier warna-warni tergantung pada arahnya. Yang bertransisi dalam arah horizontal akan memiliki setiap warna baru yang muncul di sebelah kiri atau kanan gradien linier, tergantung pada arah yang tepat dari gradien linier.
Contoh Gradien Linier Warna-warni
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Baris kode di atas akan menghasilkan output sebagai berikut:
Seperti yang Anda lihat, setiap warna baru ditambahkan di sebelah kanan gradien, menciptakan apa yang akhirnya berubah menjadi pelangi. Output yang sama dapat dicapai dalam arah vertikal; namun, pengaturan warna spesifik pada gradien linier akan tergantung pada kata kunci arah vertikal (ke atas atau ke bawah).
Apa itu Gradien Radial?
Gradien Radial menciptakan gradien spiral dua warna lebih yang dimulai dari pusat secara default. Dimana gradien linier menghasilkan gradien lurus yang mengalir secara vertikal atau horizontal, gradien radial menghasilkan gradien melingkar yang mengalir dari pusat ke tepi luar.
Menggunakan Contoh Gradien Radial
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
Baris kode di atas akan menghasilkan output sebagai berikut:
Mengubah Pusat Gradien Radial
Secara default gradien radial dimulai di tengah gradien; namun, mungkin untuk mengubah titik asal dengan pengenalan beberapa kata kunci.
60 hz vs 120 hz tv
Mengubah Contoh Posisi Awal Gradien Radial
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
Baris kode di atas akan menghasilkan output sebagai berikut:
Seperti yang Anda lihat dari output di atas gradien sekarang dimulai dari sudut kanan atas, bukan dari tengah. Perubahan ini dimungkinkan karena penyertaan kata kunci kanan atas dalam kode di atas. Daftar kata kunci berikut juga dapat digunakan untuk mengubah titik asal gradien radial:
- Kiri atas
- Kanan bawah
- Kiri bawah
Gradien Radial Warna-warni
Seperti gradien linier, gradien radial juga dapat menggunakan dua warna yang lebih banyak, perbedaan utamanya adalah di mana gradien linier menambah gradien dalam garis lurus, gradien radial menambahkan warna baru di tepi luar.
Contoh Gradien Radial Warna-warni
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Baris kode di atas akan menghasilkan output sebagai berikut:
Menyesuaikan Gradien
Sejauh ini Anda telah melihat cara mengubah arah dan titik tengah gradien, tetapi Anda belum melihat cara menyesuaikan gradien. Menyesuaikan gradien mungkin terdengar seperti banyak pekerjaan, tetapi begitu Anda memahami dasar-dasar membuat gradien latar belakang CSS, langkah nyata berikutnya adalah mempelajari cara membuat gradien CSS Anda lebih unik.
dapatkah Anda menggunakan headphone bluetooth di xbox one?
Secara default, warna dalam gradien menempati jumlah ruang yang terdistribusi secara merata dengan setiap warna bertransisi dengan mulus ke warna setelahnya. Jadi jika dua warna digabungkan untuk membentuk gradien, masing-masing warna akan menempati setengah dari ruang yang tersedia saat transisi dari satu warna ke warna lainnya. Jika tiga warna digabungkan, setiap warna akan menempati sepertiga dari ruang yang tersedia.
Dengan gradien yang disesuaikan, Anda dapat menentukan jumlah ruang yang akan ditempati oleh warna dalam gradien dengan menetapkan secara eksplisit posisi berhenti warna .
Menyesuaikan Contoh Gradien Linier 1
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
Baris kode di atas akan menghasilkan output sebagai berikut:
Output di atas menunjukkan warna kedua dalam gradien linier yang berhenti pada titik 30% dari warna pertama dalam gradien, alih-alih posisi biasanya, dan karena warna kedua juga merupakan warna akhir dalam gradien, ia secara alami meluas ke ujung. .
Jika Anda menempatkan 30% dalam kode di atas di akhir warna pertama, semuanya akan menjadi lebih jelas.
Menyesuaikan Contoh Gradien Linier 2
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
Kode di atas akan menghasilkan output berikut.
Output di atas dengan jelas menunjukkan warna pertama dalam gradien berhenti pada titik 30% dari warna kedua dalam gradien. Contoh ini bersama dengan yang di atas akan membantu membuat penyesuaian penghentian warna lebih mudah untuk Anda pahami.
Menyesuaikan gradien radial dilakukan dengan cara yang sama seperti gradien linier. Satu-satunya hal yang perlu Anda lakukan untuk mencapai hasil yang sama di atas dalam gradien radial adalah mengubah jenis dan arah gradien.
Membuat Gradien CSS Tidak Pernah Semudah Ini
Artikel tutorial ini memberi Anda alat untuk mengidentifikasi dan membuat gradien linier dan radial. Jika Anda telah mencapai titik ini, Anda telah mempelajari cara mengubah arah dan pusat gradien. Selain itu, Anda sekarang memiliki keterampilan untuk menyesuaikan gradien CSS dan membuat gradien latar belakang yang unik.
Namun, jika Anda tidak ingin langsung membuat gradien baru dan unik, Anda dapat mulai dengan membuat beberapa gradien yang sudah ada sebelumnya.
Membagikan Membagikan Menciak Surel 27 Contoh Gradien Latar Belakang CSS yang BergayaWarna solid begitu tahun lalu. Gradien masuk! Tapi bagaimana Anda membuatnya di CSS?
Baca Selanjutnya Topik-topik yang berkaitan- Pemrograman
- Pengembangan web
- Desain web
- CSS
Kadeisha Kean adalah Pengembang Perangkat Lunak Full-Stack dan Penulis Teknis/Teknologi. Dia memiliki kemampuan yang berbeda untuk menyederhanakan beberapa konsep teknologi yang paling kompleks; menghasilkan materi yang dapat dengan mudah dipahami oleh setiap pemula teknologi. Dia bersemangat menulis, mengembangkan perangkat lunak yang menarik, dan berkeliling dunia (melalui film dokumenter).
More From Kadeisha KeanBerlangganan newsletter kami
Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!
Klik di sini untuk berlangganan