Membuat kesan suka bermain dengan bayang -bayang teks CSS

Mari kita lihat bagaimana kita boleh menggunakan harta CSS Text-Shadow untuk membuat teks yang benar-benar 3D. Anda mungkin memikirkan bayang-bayang teks sebagai dapat memohon warna kabur, kecerunan yang kelihatan di belakang teks, dan anda akan betul! Tetapi seperti box-shadow, anda boleh mengawal bagaimana kabur bayang-bayang itu, termasuk mengambilnya sehingga tidak kabur sama sekali. Itu, digabungkan dengan bayang-bayang yang memisahkan koma dan menyusunnya, adalah penipuan CSS yang akan kami lakukan di sini.

Pada akhirnya, kita akan mempunyai sesuatu yang kelihatan seperti ini:

Penyegaran cepat pada bayang-bayang teks

Sintaks adalah seperti ini:

 .el {
 Teks-bayang-bayang: [x-offset] [y-offset] [blur] [warna];
}

• X-offset: Kedudukan pada paksi-x. Nilai positif menggerakkan bayang -bayang ke kanan, nilai negatif menggerakkan bayang -bayang ke kiri. (diperlukan)
• Y-Offset: Kedudukan pada paksi-y. Nilai positif menggerakkan bayang -bayang ke bahagian bawah, nilai negatif menggerakkan bayang -bayang ke atas. (diperlukan)
• Blur: Berapa banyak kabur bayangan yang sepatutnya. Semakin tinggi nilai, lebih lembut bayang -bayang. Nilai lalai ialah 0px (tidak kabur). (Pilihan)
• Warna: Warna bayangan. (diperlukan)

Bayangan pertama

Mari kita mulakan kesan kami dengan menambah hanya satu bayang -bayang. Bayang -bayang akan ditolak 6px ke kanan dan 6px ke bahagian bawah:

 : root {
 --Text: #5362F6; / * Biru */
 --Shadow: #e485F8; / * Merah jambu */
}


.layful {
 warna: var (-teks);
 Teks-bayang-bayang: 6px 6px var (-Shadow);
}

Mewujudkan kedalaman dengan lebih banyak bayang -bayang

Apa yang kita ada adalah bayang -bayang yang rata pada ketika ini - tidak banyak lagi 3D. Kita boleh membuat kedalaman dan menyambungkan bayang-bayang ke teks sebenar dengan menambahkan lebih banyak contoh-contoh teks pada elemen yang sama. Apa yang diperlukan hanyalah memisahkan koma mereka. Mari mulakan dengan menambah satu lagi di tengah:

 .layful {
 warna: var (-teks);
 Teks bayang-bayang: 6px 6px var (-bayangan),
        3px 3px var (-Shadow);
}

Ini sudah mendapat tempat, tetapi kita perlu menambah beberapa bayang -bayang untuk kelihatan baik. Semakin banyak langkah yang kita tambah, semakin terperinci hasil akhir akan menjadi. Dalam contoh ini, kita akan bermula dari 6px 6px dan secara beransur -ansur membina kenaikan 0.25px sehingga kita mencapai 0.

 .layful {
 warna: var (-teks);
 bayang-bayang teks: 
  6px 6px var (-bayangan), 
  5.75px 5.75px var (-bayangan), 
  5.5px 5.5px var (-bayangan), 
  5.25px 5.25px var (-Shadow),
  5px 5px var (-bayangan), 
  4.75px 4.75px var (-Shadow), 
 4.5px 4.5px var (-bayangan), 
  4.25px 4.25px var (-Shadow),
 4px 4px var (-bayangan),
  3.75px 3.75px var (-Shadow),
 3.5px 3.5px var (-bayangan),
  3.25px 3.25px var (-Shadow),
  3px 3px var (-bayangan),
  2.75px 2.75px var (-Shadow),
   2.5px 2.5px var (-bayangan),
  2.25px 2.25px var (-Shadow),
   2px 2px var (-bayangan),
  1.75px 1.75px var (-bayangan),
  1.5px 1.5px var (-bayangan),
   1.25px 1.25px var (-Shadow),
  1px 1px var (-bayangan),
   0.75px 0.75px var (-Shadow),
  0.5px 0.5px var (-bayangan),
 0.25px 0.25px var (-Shadow);
}

Memudahkan kod dengan sass

Hasilnya mungkin kelihatan baik, tetapi kod sekarang agak sukar untuk dibaca dan diedit. Jika kita mahu membuat bayang -bayang lebih besar, kita perlu melakukan banyak penyalinan dan penampakan untuk mencapainya. Sebagai contoh, meningkatkan saiz bayangan hingga 10px bermakna menambah 16 lagi bayang -bayang secara manual.

Dan di sinilah SCSS masuk dalam gambar. Kita boleh menggunakan fungsi untuk mengautomasikan menghasilkan semua bayang -bayang.

 @Function TextShadow ($ Precision, $ saiz, $ warna) {
 $ nilai: null; 
 $ offset: 0;
 $ panjang: $ saiz * (1 / $ ketepatan) - 1;


 @for $ i dari 0 hingga $ panjang {
  $ offset: $ offset $ precision;
  $ Shadow: $ offset px $ offset px $ color;
  $ nilai: tambah ($ nilai, $ bayangan, koma);
 }


 @return $ value;
}


.layful {
 Warna: #5362F6;
 Teks-bayang-bayang: TextShadow (0.25, 6, #e485F8);
}

Fungsi TextShadow mengambil tiga argumen yang berbeza: ketepatan, saiz dan warna bayang -bayang. Ia kemudian mencipta gelung di mana offset meningkat sebanyak $ ketepatan (dalam kes ini, ia adalah 0.25px) sehingga mencapai saiz keseluruhan (dalam kes ini 6px) bayang -bayang.

Dengan cara ini, kita dapat dengan mudah meningkatkan saiz atau ketepatan bayang -bayang. Sebagai contoh, untuk mencipta bayangan yang 10px besar dan meningkat dengan 0.1px, kita hanya perlu mengubahnya dalam kod kami:

 Text-shadow: TextShadow (0.1, 10, #e485F8);

Warna berganti

Kami mahu membakar perkara sedikit dengan pergi untuk warna bergantian. Kami akan memisahkan teks dalam huruf individu yang dibalut dalam rentang (ini boleh dilakukan secara manual, atau automatik dengan React atau JavaScript). Output akan kelihatan seperti ini:

 <p aria-label="Basuh tangan anda!">
 <span aria-hidden="true"> w </span> <span aria-hidden="true"> a </span> <span aria-hidden="true"> s </span> <span aria-hidden="true"> h </span>
</p>

Kemudian kita boleh menggunakan pemilih: nth-child () pada rentang untuk menukar warna teks dan bayangan mereka.

 . Span: nth-child (2n) {
 Warna: #ED625C;
 Text-shadow: TextShadow (0.25, 6, #f2a063);
}

Jika kami telah melakukan ini di Vanilla CSS, maka inilah yang kami akan berakhir dengan:

 .playful span {
 warna: var (-teks);
 bayang-bayang teks: 
  6px 6px var (-bayangan),
  5.75px 5.75px var (-bayangan),
  5.5px 5.5px var (-bayangan),
  5.25px 5.25px var (-Shadow),
  5px 5px var (-bayangan),
  4.75px 4.75px var (-Shadow),
  4.5px 4.5px var (-bayangan),
  4.25px 4.25px var (-Shadow),
  4px 4px var (-bayangan),
  3.75px 3.75px var (-Shadow),
  3.5px 3.5px var (-bayangan),
  3.25px 3.25px var (-Shadow),
  3px 3px var (-bayangan),
  2.75px 2.75px var (-Shadow),
  2.5px 2.5px var (-bayangan),
  2.25px 2.25px var (-Shadow),
  2px 2px var (-bayangan),
  1.75px 1.75px var (-bayangan),
  1.5px 1.5px var (-bayangan),
  1.25px 1.25px var (-Shadow),
  1px 1px var (-bayangan),
  0.75px 0.75px var (-Shadow),
  0.5px 0.5px var (-bayangan),
  0.25px 0.25px var (-Shadow);
}


. Span: nth-child (2n) {
 --Text: #ED625C;
 --Shadow: #F2A063;
}

Kita boleh mengulangi beberapa kali dengan warna dan indeks lain sehingga kita mencapai corak yang kita suka:

Mata Bonus: Menambah Animasi

Menggunakan prinsip yang sama, kita boleh membawa teks ke kehidupan lebih banyak lagi dengan menambah animasi. Pertama, kami akan menambah animasi berulang yang menjadikan setiap rentang bergerak naik dan turun:

 .playful span {
 Warna: #5362F6;
 Teks-bayang-bayang: TextShadow (0.25, 6, #e485F8);
 Kedudukan: Relatif;
 Animasi: Scatter 1.75S Infinite;
}

Kami dapat mengoptimumkan ini sedikit lagi dengan menggunakan pertanyaan media yang lebih besar-berkurang. Dengan cara itu, orang yang tidak mahu animasi tidak akan mendapatnya.

 .playful span {
  Warna: #5362F6;
  Teks-bayang-bayang: TextShadow (0.25, 6, #e485F8);
  Kedudukan: Relatif;
  Animasi: Scatter 1.75S Infinite;
}

@media skrin dan (lebih suka-dikurangkan-gerakan: mengurangkan) {
  Animasi: Tiada;
}

Kemudian, di setiap anak nth (n) kita akan menambah kelewatan animasi yang berbeza.

 . Span: nth-child (2n) {
 Warna: #ED625C;
 Text-shadow: TextShadow (0.25, 6, #f2a063);
 Animasi-Delay: 0.3s;
}

Atas ialah kandungan terperinci Membuat kesan suka bermain dengan bayang -bayang teks CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!