Trik CSS yang hanya menggunakan satu kecerunan

kecerunan CSS adalah ruji pembangunan front-end, yang menawarkan pilihan gaya serba boleh. Walaupun sintaks mereka boleh menjadi rumit, artikel ini meneroka kuasa dan kesederhanaan yang mengejutkan yang boleh dicapai dengan hanya

satu kecerunan. Kami akan bergerak melampaui penggunaan asas untuk membuka kunci teknik canggih untuk mencipta corak, garisan grid, garis putus -putus, kesan pelangi, animasi hover, bentuk, dan helah imej sempadan.

Lupakan tanggapan bahawa kecerunan tunggal mengehadkan. Mari kita meneroka potensinya:

Menjana corak berulang

Gradien cemerlang dalam mencipta corak berulang. Fungsi

adalah kunci di sini. Corak papan semak mudah dicapai dengan: repeating-conic-gradient()

background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 / 100px 100px;

Menyesuaikan warna berhenti menghasilkan hasil yang berbeza. Sebagai contoh, separuh warna berhenti (25% hingga 12.5%, 50% hingga 25%) mewujudkan corak segi tiga. Menggunakan pembolehubah CSS meningkatkan fleksibiliti, membolehkan penyesuaian warna dan saiz mudah. Corak yang lebih kompleks boleh divisualisasikan dengan sementara melumpuhkan pengulangan (

) untuk mengasingkan jubin tunggal. Untuk menyelam yang lebih mendalam ke dalam penciptaan corak, rujuk sumber -sumber ini: no-repeat

Cara Membuat Corak Latar Belakang Menggunakan CSS & Conic-Gradient (Verpex Blog)
Belajar CSS Radial-Gradient dengan membina corak latar belakang (freecodecamp)
corak latar belakang, dipermudahkan oleh kecerunan konik (ana tudor)

Membina grid dinamik

memperluaskan konsep corak untuk menghasilkan grid fleksibel. Pembolehubah CSS Kawalan Ketebalan, Kiraan Sel, dan Saiz:

.grid-lines {
  --n: 3; /* rows */
  --m: 5; /* columns */
  --s: 80px; /* size */
  --t: 2px; /* thickness */
  width: calc(var(--m)*var(--s) + var(--t));
  height: calc(var(--n)*var(--s) + var(--t));
  background: conic-gradient(from 90deg at var(--t) var(--t), #0000 25%, #000 0) 0 0/var(--s) var(--s);
}

memastikan garis lengkap di tepi. Grid responsif adalah mungkin dengan mengeluarkan var(--t) dan menggunakan --m untuk menyesuaikan kiraan lajur secara dinamik berdasarkan ruang yang tersedia. Proofing masa depan melibatkan menggunakan width: calc(round(down, 100%, var(--s)) var(--t));: calc-size() width: calc-size(auto, round(down, size, var(--s)) var(--t));

Membuat garis putus -putus

garis putus -putus menegak atau mendatar mudah dibuat:

.dashed-lines {
  --t: 2px;  /* thickness */
  --g: 50px; /* gap */
  --s: 12px; /* dash size */
  background: conic-gradient(at var(--t) 50%, #0000 75%, #000 0) var(--g)/calc(var(--g) + var(--t)) var(--s);
}

Eksperimen untuk membuat versi mendatar. Menggabungkan garis putus -putus dengan grid memerlukan dua kecerunan, seperti yang terperinci dalam koleksi CSS Bentuk penulis.

Menjana kesan pelangi

Membuat kecerunan pelangi yang lancar memerlukan pendekatan pintar:

background: linear-gradient(90deg in hsl longer hue, red 0 0);

memanfaatkan interpolasi ruang warna HSL, mewujudkan spektrum penuh dari satu warna. Begitu juga, roda warna dicipta dengan in hsl longer hue background: conic-gradient(in hsl longer hue,red 0 0);

Melaksanakan kesan hover

Gradien menawarkan kesan hover yang elegan, menggantikan keperluan untuk unsur-unsur pseudo. Contoh gelongsor garis bawah:

background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 / 100px 100px;

membuat bentuk kompleks

Gradien mengejutkan mahir dalam mewujudkan bentuk kompleks. Teknik untuk menjana sempadan zig-zag, sudut, berkilau, dan ikon (seperti tanda tambah) terperinci dalam "Panduan Moden untuk Membuat Bentuk CSS" (Smashing Magazine) dan CSS Shape Collection.

menggunakan helah imej sempadan

Harta , digabungkan dengan kecerunan, membuka kunci kemungkinan kreatif lebih lanjut. Contohnya termasuk lapisan kecerunan, latar belakang lebar penuh, pembahagi tajuk, dan reben. Kesan -kesan ini secara tradisinya memerlukan penyelesaian yang kompleks, tetapi CSS moden memudahkan proses.

border-image Kesimpulan

Menguasai teknik tunggal-gradien memperluaskan keupayaan CSS anda. Walaupun artikel ini memberi tumpuan kepada kecerunan tunggal, ingatlah bahawa menggabungkan pelbagai kecerunan membuka potensi yang lebih besar. Kuncinya adalah memahami tingkah laku kecerunan untuk mewujudkan penyelesaian CSS yang inovatif dan cekap.

Atas ialah kandungan terperinci Trik CSS yang hanya menggunakan satu kecerunan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!