27 Contoh Gradien Latar Belakang CSS yang bergaya

27 Contoh Gradien Latar Belakang CSS yang bergaya

Mengikuti tren dan piawaian reka bentuk web teratas sangat penting bagi pereka atau pembangun. Pada masa ini, kecerunan latar digunakan secara meluas di laman web moden.





Dalam artikel ini, kami akan membimbing anda melalui contoh kecerunan latar belakang yang berbeza menggunakan CSS.



Latar Belakang Menggunakan CSS

Gradien CSS menampilkan peralihan yang lancar menggunakan dua atau lebih warna yang ditentukan. Gradien CSS memberikan kawalan dan prestasi yang lebih baik terhadap penggunaan fail gambar sebenar (dari kecerunan). The gambar latar belakang Harta CSS digunakan untuk menyatakan kecerunan sebagai latar belakang.





bagaimana menggabungkan dua lajur dalam excel

Terdapat tiga jenis kecerunan: linear (dibuat dengan kecerunan linear () fungsi), jejari (dibuat dengan kecerunan radial () fungsi), dan konik (dibuat dengan kecerunan kon () fungsi). Anda juga boleh membuat kecerunan berulang dengan mengulangi-linear-kecerunan () , mengulangi-radial-kecerunan () , dan pengulangan-kon-kecerunan () fungsi.

Dokumen MDN mendefinisikan fungsi-fungsi ini sebagai:



kecerunan linear () : Fungsi CSS linear-gradien () menghasilkan imej yang terdiri daripada peralihan progresif antara dua atau lebih warna di sepanjang garis lurus. Hasilnya adalah objek dari jenis data, yang merupakan jenis khas .

kecerunan radial () : The kecerunan radial () Fungsi CSS membuat gambar yang terdiri daripada peralihan progresif antara dua atau lebih warna yang memancar dari asal. Bentuknya mungkin berbentuk bulatan atau elips. Hasil fungsi adalah objek dari jenis data, yang merupakan jenis khas .



kecerunan kon () : The kecerunan kon () Fungsi CSS membuat gambar yang terdiri daripada kecerunan dengan peralihan warna yang diputar di sekitar titik tengah (dan bukannya memancar dari pusat). Contoh kecerunan kon termasuk carta pai dan roda warna. Hasil daripada kecerunan kon () fungsi adalah objek dari jenis data, yang merupakan jenis khas .

mengulangi-linear-kecerunan () : The mengulangi-linear-kecerunan () Fungsi CSS membuat gambar yang terdiri daripada kecerunan linear berulang. Ia serupa dengan gradien / linear-gradient () dan mengambil argumen yang sama, tetapi mengulangi warnanya berhenti tanpa henti ke semua arah sehingga menutup seluruh bekasnya. Hasil fungsi adalah objek dari jenis data, yang merupakan jenis khas .



mengulangi-radial-kecerunan () : The mengulangi-radial-kecerunan () Fungsi CSS membuat gambar yang terdiri daripada kecerunan berulang yang memancar dari asal. Ia serupa dengan gradien / radial-gradient () dan mengambil argumen yang sama, tetapi mengulangi warnanya berhenti tanpa henti ke semua arah sehingga dapat menutup seluruh bekasnya, mirip dengan gradient / berulang-linear-gradien (). Hasil fungsi adalah objek dari jenis data, yang merupakan jenis khas .

pengulangan-kon-kecerunan () : The pengulangan-kon-kecerunan () Fungsi CSS membuat gambar yang terdiri daripada kecerunan berulang (bukan satu gradien) dengan peralihan warna diputar di sekitar titik tengah (dan bukannya memancar dari pusat).

Inilah sintaks rasmi setiap jenis kecerunan.

Sintaksis Gradien Linear

linear-gradient(
[ | to ]? ,

)
= [to left | to right] || [to top | to bottom]

Sintaksis Gradien Radial

radial-gradient(
[ || ]? [ at ]? ,

);

Sintaksis Gradien Kon

conic-gradient(
[ from ]? [ at ]?,

)

Berikut adalah beberapa contoh kecerunan latar belakang yang hebat yang dapat meningkatkan UI laman web anda ke tahap seterusnya.

1. Rumput Berdebu

Gunakan CSS berikut untuk membuat kecerunan di atas:

skrin windows 10 terbalik
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);

2. Pasir ke Biru

Gunakan CSS berikut untuk membuat kecerunan di atas:

background-image: linear-gradient(to right, #DECBA4, #3E5151);

3. Kye Meh

Gunakan CSS berikut untuk membuat kecerunan di atas:

background-image: linear-gradient(to right, #8360c3, #2ebf91);

4. Amin

Gunakan CSS berikut untuk membuat kecerunan di atas:

background-image: linear-gradient(to right, #8e2de2, #4a00e0);

5. Bersantai Merah

Gunakan CSS berikut untuk membuat kecerunan di atas:

background-image: linear-gradient(to right, #fffbd5, #b20a2c);

6. Cahaya Luhur

Gunakan CSS berikut untuk membuat kecerunan di atas:

background-image: linear-gradient(to right, #fc5c7d, #6a82fb);

7. Megatron

Gunakan CSS berikut untuk membuat kecerunan di atas:

background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);

8. Raspberry Biru

Gunakan CSS berikut untuk membuat kecerunan di atas:

background-image: linear-gradient(to right, #00b4db, #0083b0);

9. Premium Gelap

Gunakan CSS berikut untuk membuat kecerunan di atas:

background-image: linear-gradient(to right, #434343 0%, black 100%);

10. Kristal

Gunakan CSS berikut untuk membuat kecerunan di atas:

background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);

11. Lawrencium

Gunakan CSS berikut untuk membuat kecerunan di atas:

background-image: linear-gradient(to right, #0f0c29, #302b63, #24243e);

Berkaitan: Cara Menukar Warna Latar Belakang Dengan CSS

12. Ohhappiness

Gunakan CSS berikut untuk membuat kecerunan di atas:

background-image: linear-gradient(to right, #00b09b, #96c93d);

13. Ketegangan

Gunakan CSS berikut untuk membuat kecerunan di atas:

background-image: linear-gradient(to right, #870000, #190a05);

14. Mangga Kuning

Gunakan CSS berikut untuk membuat kecerunan di atas:

background-image: radial-gradient(circle farthest-side, #fceabb, #f8b500);

Berkaitan: Apakah Helaian Gaya Cascading dan Apa CSS Digunakan?

15. Rumput Berair

Gunakan CSS berikut untuk membuat kecerunan di atas:

teks balasan automatik samsung galaxy s8
background-image: radial-gradient( circle 759px at -6.7% 50%, rgba(80,131,73,1) 0%, rgba(140,209,131,1) 26.2%, rgba(178,231,170,1) 50.6%, rgba(144,213,135,1) 74.1%, rgba(75,118,69,1) 100.3% );

16. Ikan Pink

Gunakan CSS berikut untuk membuat kecerunan di atas:

background-image: linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114));

Berkaitan: Lembaran Menipu Properties CSS3 Yang Penting

17. Tuan Laut

Gunakan CSS berikut untuk membuat kecerunan di atas:

background-image: linear-gradient( 109.6deg, rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );

18. Cherry Blossom

Gunakan CSS berikut untuk membuat kecerunan di atas:

background-image: linear-gradient(25deg,#d64c7f,#ee4758 50%);

19. Udara Segar

Gunakan CSS berikut untuk membuat kecerunan di atas:

background-image: linear-gradient( 95.2deg, rgba(173,252,234,1) 26.8%, rgba(192,229,246,1) 64% ); Berkongsi Berkongsi Tweet E-mel Cara Menggunakan CSS box-shadow: 13 Trik dan Contohnya

Kotak bland kelihatan membosankan. Bersihkan mereka dengan kesan bayangan kotak CSS!

Baca Seterusnya Topik-topik yang berkaitan Mengenai Pengarang Yuvraj Chandra(60 Artikel Diterbitkan)

Yuvraj adalah pelajar sarjana Sains Komputer di University of Delhi, India. Dia meminati Pembangunan Web Stack Penuh. Ketika dia tidak menulis, dia meneroka kedalaman teknologi yang berbeza.

Lagi Dari Yuvraj Chandra

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan