Mencipta kesan teks MDN ' s

.card p {max-height: calc (4rem* var (-asas); Ambil perhatian bahawa saya mempunyai <code>-asas </code> pratetap berubah yang boleh digunakan sebagai pengganda biasa. Saya menggunakannya untuk mengira saiz fon, ketinggian baris, mengisi kad, dan sekarang <code> max-height </code> perenggan. Saya merasa lebih mudah menggunakan nilai malar, terutamanya apabila saiz yang diperlukan adalah berdasarkan skala seperti ini. Saya perhatikan bahawa MDN juga menggunakan pembolehubah </code> yang sama </code>, mungkin untuk tujuan yang sama. </p> <p> Bagaimana untuk membuat baris ketiga teks pudar? Ini adalah klasik <code> linear-gradient () </code> pada pseudo-elemen perenggan <code> :: selepas </code>, yang ditetapkan di sudut kanan bawah kad. Oleh itu, kita boleh menetapkannya seperti ini: </p> <pre class="brush:php;toolbar:false"> .card p :: selepas {kandungan: " code>-Latar Belakang Variable, yang ditetapkan ke nilai warna latar belakang yang sama seperti warna latar belakang yang digunakan oleh <code> .card </code> sendiri. Dengan cara ini, teks kelihatan pudar ke latar belakang. Saya mendapati bahawa titik berhenti warna kedua dalam kecerunan perlu diselaraskan kerana teks itu tidak tersembunyi sepenuhnya apabila kecerunan sepenuhnya dicampur hingga 100%. Saya dapati 80% adalah titik yang baik untuk saya. </p> <p> Ya, <code> :: selepas </code> memerlukan ketinggian dan lebar. Ketinggian adalah di mana pemboleh ubah <code>-asas </code> dimainkan semula, kerana kami mahu ia skala ketinggian garis perenggan untuk menimpa teks dengan ketinggian <code> :: selepas </code>. </p> <pre class="brush:php;toolbar:false"> .card p :: selepas {/* supra*/ketinggian: calc (1rem* var (-asas) 1px); Sekali lagi, saya tidak menggunakan <code> top </code> (atau <code> inset-block-start </code>) untuk mengimbangi kecerunan ke arah itu. ? ‍♂️ <p> sekarang <code> p :: selepas </code> benar -benar diposisikan, dan kita perlu secara jelas mengisytiharkan kedudukan relatif pada perenggan untuk menyimpan <code> :: selepas </code> dalam alirannya. Jika tidak, <code> :: selepas </code> akan dikeluarkan sepenuhnya dari aliran dokumen dan akhirnya muncul di luar kad. Ini adalah css penuh <card> perenggan: </card></p> <pre class="brush:php;toolbar:false"> .card p {max-height: calc (4rem* var (-asas); Tidak! Kecerunan itu nampaknya tidak berada di tempat yang betul. <p> Saya mengakui saya membuat kesilapan dalam ini dan memulakan DevTools di MDN untuk melihat apa yang saya terlepas. Oh, ya, <code> :: selepas </code> perlu dipaparkan sebagai elemen blok. Ini sangat jelas apabila menambah sempadan merah. ? </p> <p> Ya, Voiceover nampaknya menghormati teks penuh. Saya belum menguji pembaca skrin lain, walaupun. </p> <p> Saya juga menyedari bahawa pelaksanaan MDN membuang <code> pointer-events </code> dari <code> p :: selepas </code>. Ini mungkin strategi pertahanan yang baik untuk mengelakkan tingkah laku aneh apabila memilih teks. Saya menambahnya, dan sekurang -kurangnya di Safari, Firefox, dan Chrome, pemilihan teks terasa sedikit lancar. </p>

Atas ialah kandungan terperinci Mencipta kesan teks MDN ' s. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!