Corak latar belakang kreatif menggunakan kecerunan, bentuk CSS, dan juga emojis

Di luar jalur mudah, CSS menawarkan toolkit yang sangat serba boleh untuk membuat corak latar belakang dinamik. Walaupun jalur mempunyai tempat mereka, mari kita meneroka lebih banyak pendekatan imajinatif menggunakan kecerunan, bentuk, dan juga emojis.

Corak latar belakang, imej yang diulangi, boleh diperolehi secara luaran (seperti PNGs) atau dihasilkan secara langsung dalam CSS, sering memanfaatkan kecerunan. Kecerunan linear, sering digunakan untuk jalur, hanya permulaan. Mari kita menyelidiki aplikasi yang lebih kreatif.

Corak berasaskan kecerunan

CSS menyediakan tiga jenis kecerunan:

1. linear-gradient() : Mewujudkan peralihan warna linear di sepanjang arah yang ditentukan.
2. radial-gradient() : Warna memancar dari titik pusat, membentuk bulatan atau elips.
3. conic-gradient() : Warna diedarkan di sekitar bulatan, menghasilkan kesan seperti sinar. (Nota: Sokongan penyemak imbas mungkin berbeza -beza.)

Memahami sintaks kecerunan -menentukan warna berhenti dan kedudukan -sangat penting untuk penciptaan corak yang berkesan.

Contoh kecerunan radial

Kecerunan radial menawarkan kelebihan menjana bulatan dan elips, sesuai untuk corak yang unik.

 Latar Belakang: Radial-Gradient (<gradient values=""> );</gradient>

Berikut adalah contoh corak tembikai:

 Latar Belakang: 
    Radial-Gradient (bulatan pada 25px 9px, hitam 2px, telus 2px), 
    Radial-Gradient (bulatan pada 49px 28px, hitam 2px, telus 2px), 
    Radial-Gradient (bulatan pada 38px 1px, hitam 2px, telus 2px), 
    Radial-Gradient (bulatan pada 20px 4px, hitam 2px, telus 2px), 
    Radial-Gradient (bulatan pada 80px 4px, hitam 2px, telus 2px), 
    Radial-Gradient (bulatan pada 50px 10px, hitam 2px, telus 2px), 
    Radial-Gradient (bulatan pada 60px 16px, hitam 2px, telus 2px), 
    Radial-Gradient (bulatan pada 70px 16px, hitam 2px, telus 2px), 
    Radial-Gradient (Ellipse pada 50px 0, merah 33px, kapur 33px, kapur 38px, telus 38px) 
    putih;
Latar Belakang: 100px 50px;

Kod ini mengatasi pelbagai kecerunan radial: elips untuk daging tembikai dan bulatan yang lebih kecil untuk biji. Saiz background-size mengawal pengulangan corak.

Corak kecerunan conic

Kecerunan conic menghasilkan bentuk radiasi. Walaupun berguna untuk corak geometri, ingatlah bahawa keserasian penyemak imbas harus dipertimbangkan.

 Latar Belakang: Conic-Gradient (<gradient values=""> );</gradient>

Contoh:

 Latar Belakang: 
 Conic-Gradient (kuning 40deg, biru 40deg, biru 45deg, 45deg telus), 
 conic-gradient (telus 135deg, biru 135deg, biru 140deg, 140deg telus);
Latar Belakang: 60px 60px;
latar belakang warna: putih;

(Semak Caniuse.com untuk maklumat sokongan penyemak imbas terkini.)

Corak berasaskan emoji

Mari kita bergerak melampaui bentuk geometri dan menggabungkan bentuk emojis organik.

Emojis warna pepejal

Kita boleh mencipta corak emoji warna pepejal menggunakan teks telus dan bayang-bayang teks:

 warna: telus;
Teks-bayang-bayang: 0 0 hitam;

Emojis ini kemudiannya boleh dimasukkan ke dalam imej SVG dan digunakan sebagai latar belakang melalui URL data.

<svg>
<foreignobject>
  
</foreignobject></svg>

Latar Belakang: URL ("Data: Imej/SVG XML,<svg viewbox="" xmlns="" http:></svg> ");

Contoh:

 Latar Belakang: 
    URL ("Data: Imej/SVG XML, <svg viewbox="" xmlns="" http:><foreignobject height="" width=""><div black=""  color:transparent xmlns="" http:> ? ‍♀️</div></foreignobject></svg> "), 
    putih; 
Latar Belakang: 60px 60px;

Emojis kecerunan dan lut

Teknik yang sama boleh digunakan untuk membuat corak emoji kecerunan atau lut dengan menyesuaikan bayangan teks atau menggunakan background-clip: text; .

Kaedah SVG dan element()

Walaupun kurang disokong secara meluas, menggunakan SVG<text></text> Unsur-unsur atau element() menawarkan pendekatan alternatif untuk mewujudkan corak berasaskan emoji. Walau bagaimanapun, keserasian penyemak imbas perlu dinilai dengan teliti sebelum pelaksanaan.

Kesimpulan

Keupayaan harta background untuk menerima pelbagai nilai membolehkan lapisan kreatif dan gabungan teknik. Eksperimen dengan kecerunan, emojis, dan bentuk yang berbeza untuk menemui corak latar belakang anda sendiri. Ingatlah untuk sentiasa memeriksa keserasian penyemak imbas untuk ciri -ciri yang kurang disokong secara meluas.

Atas ialah kandungan terperinci Corak latar belakang kreatif menggunakan kecerunan, bentuk CSS, dan juga emojis. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!