Gradien: Linear dan Radial
Buat transisi warna yang halus dengan linear-gradient() dan radial-gradient().
Gradien: Linear dan Radial adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Apa Itu Gradien CSS
Gradien CSS adalah gambar yang dihasilkan (tidak memerlukan berkas gambar) yang beralih di antara dua warna atau lebih. Gradien ditentukan sebagai nilai background-image atau singkatan background.
Dasar-Dasar linear-gradient()
Gradien linear mengubah warna sepanjang garis lurus. Argumen pertama menentukan arah, kemudian diikuti oleh hentian warna.
<div class="gradient-demo"></div>
Arah Gradien: Kata Kunci dan Sudut
Arah dapat menggunakan kata kunci atau sudut dalam derajat:
<div class="dir-keyword"></div>
<div class="dir-45deg"></div>
<div class="dir-135deg"></div>
Beberapa Hentian Warna
Tambahkan hentian warna sebanyak yang diperlukan. Setiap hentian dapat menentukan posisi secara opsional (panjang atau persentase).
<div class="stops"></div>
Hentian Warna Tajam
Tetapkan dua hentian pada posisi yang sama untuk membuat hentian tajam — perubahan warna mendadak tanpa percampuran.
<div class="hard-stop"></div>
Gradien Linear Berulang
repeating-linear-gradient() mengulang pola gradien untuk membuat garis-garis dan tekstur.
<div class="stripes"></div>
Dasar-Dasar radial-gradient()
Gradien radial memancar keluar dari titik pusat dalam bentuk elips atau lingkaran.
<div class="radial-demo"></div>
Bentuk dan Ukuran Radial
Atur bentuk gradien (circle atau ellipse) dan kata kunci jangkauannya:
<div class="radial-circle"></div>
<div class="radial-ellipse"></div>
Posisi Gradien Radial
Gunakan at <position> setelah bentuk/ukuran untuk memindahkan pusat gradien radial.
<div class="radial-position"></div>
Gradien Konik
conic-gradient() menyapu warna mengelilingi titik pusat seperti diagram lingkaran. Fungsi ini memerlukan sudut awal from dan posisi at opsional.
<div class="conic-demo"></div>
Transparansi Gradien
Gunakan transparent atau rgba() dalam hentian gradien untuk beralih secara halus dari atau menuju warna latar belakang elemen.
<div class="fade-overlay"></div>
Pemeriksaan Cepat
Fungsi CSS mana yang menghasilkan gradien yang memancar keluar dari titik pusat?
Ringkasan
Gradien linear mengikuti garis, gradien radial memancar keluar, dan gradien konik menyapu mengelilingi suatu titik. Gunakan hentian tajam untuk membuat garis-garis. Semua fungsi gradien merupakan nilai background-image dan menghasilkan gambar tanpa berkas eksternal.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Gradien: Linear dan Radial” gratis?
Ya — teks lengkap “Gradien: Linear dan Radial” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Gradien: Linear dan Radial”?
Buat transisi warna yang halus dengan linear-gradient() dan radial-gradient(). Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Gradien: Linear dan Radial” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Nilai Warna: Bernama, Heksadesimal, RGB, HSL
- Warna dan Gambar Latar
- Gradien: Linear dan Radial
- Opasitas dan Transparansi RGBA