8 Trik Clever Dengan Fungsi CSS

Kuasa CSS jauh melebihi banyak imaginasi pemaju web. Dari masa ke masa, bahasa stylesheet telah menjadi semakin kuat, membawa fungsi kepada penyemak imbas yang pada mulanya memerlukan JavaScript untuk dicapai. Artikel ini akan memperkenalkan lapan petua fungsi CSS yang bijak yang tidak memerlukan JavaScript sama sekali.

mata utama

Fungsi CSS boleh digunakan untuk membuat pelbagai kesan dan fungsi seperti tooltip, tajuk kecil, kaunter, dan kesan kaca frosted tanpa JavaScript.
• Fungsi -fungsi boleh digunakan untuk mewujudkan sistem grid yang lebih bijak dan penjajaran elemen kedudukan tetap, memberikan fleksibiliti dan ketepatan yang lebih besar dalam reka bentuk.
Fungsi CSS
• juga membolehkan animasi kreatif menggunakan fungsi calc(), serta potensi untuk menggunakan elemen HTML sebagai imej latar belakang menggunakan fungsi
, walaupun yang terakhir hanya disokong oleh Firefox.
• cubic-bezier() element()

Pure CSS Tooltips

1. Banyak laman web masih menggunakan JavaScript untuk membuat tooltips, tetapi sebenarnya lebih mudah menggunakan CSS. Penyelesaian yang paling mudah adalah menggunakan sifat data dalam kod HTML untuk menyediakan teks tooltip, seperti . Dengan tag ini, anda boleh meletakkan perkara berikut ke CSS untuk memaparkan teks tooltip dalam fungsi

   :

   data-tooltip="…" attr() Ia sangat mudah dan jelas, bukan? Sudah tentu, lebih banyak kod diperlukan untuk benar -benar gaya tooltips, tetapi jangan risau, terdapat perpustakaan CSS tulen yang khusus untuk tujuan ini yang dipanggil HINT.CSS.

   .tooltip::after {
     content: attr(data-tooltip);
   }

(penyalahgunaan) atribut data tersuai dan fungsi attr ()

2. kami telah menggunakan untuk tooltips, tetapi ia mempunyai beberapa kes penggunaan lain. Menggabungkan sifat data, anda boleh membina imej kecil dengan tajuk dan penerangan menggunakan hanya satu baris kod HTML:

   attr() Anda kini boleh menggunakan fungsi

   untuk memaparkan tajuk dan keterangan:

   <a class="caption" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" data-title="秃鹫" data-description="...">
     <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174011191897662.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="8 Clever Tricks with CSS Functions " />
   </a>

   attr() Ini adalah contoh kerja lakaran kecil dengan tajuk animasi paparan hover: [pautan contoh codepen] (dengan asumsi bahawa pautan codepen harus dimasukkan di sini)

   .caption::after {
     content: attr(data-title);
     ...
   }

   NOTA: Kandungan yang dihasilkan mungkin mempunyai masalah dengan aksesibiliti. Artikel ini mengenai sokongan aksesibiliti untuk kandungan CSS yang dihasilkan memberikan tafsiran yang berguna mengenai topik ini.

   counter css

Anda boleh menggunakan kaunter CSS, yang kelihatan seperti sihir. Ia bukan ciri yang paling terkenal, dan kebanyakan orang mungkin berfikir ia tidak menyokongnya dengan baik, tetapi sebenarnya, setiap pelayar menyokong kaunter CSS: [Bolehkah saya menggunakan CSS-Counters?] (Dengan asumsi boleh saya gunakan harus dimasukkan di sini pautan)

3. Walaupun anda tidak boleh menggunakan kaunter CSS untuk senarai yang diperintahkan (<ol></ol>), kaunter sangat bagus untuk penomboran atau memaparkan nombor di bawah item di galeri. Anda juga boleh mengira bilangan item yang dipilih, yang sangat mengagumkan memandangkan anda memerlukan kod yang sangat sedikit (dan tiada JavaScript): [Pautan Sampel Codepen] (dengan mengandaikan bahawa pautan codepen harus dimasukkan di sini).

   kaunter CSS juga bagus untuk nombor berubah secara dinamik dalam senarai projek, yang boleh disusun semula oleh seret dan drop: [pautan contoh codepen] (dengan mengandaikan bahawa pautan codepen harus dimasukkan di sini).

   Seperti contoh terakhir, ingat bahawa kandungan yang dihasilkan mungkin mempunyai masalah dengan aksesibiliti.

4. Gunakan penapis CSS untuk mencapai kesan kaca beku

   Dengan pelepasan iOS 7, Apple membawa kita kesan "frosted kaca" -unsur -unsur kabur yang kelihatan seperti tingkap kaca beku. Diilhamkan oleh pelaksanaan Apple, kesan ini mula muncul di banyak tempat. Menghasilkan semula kesan ini agak rumit sebelum anda mempunyai penapis CSS, anda perlu menggunakan imej kabur untuk membuat kesan kaca beku. Sekarang, hampir semua pelayar utama menyokong sepenuhnya penapis CSS, jadi lebih mudah untuk menghasilkan semula kesan ini. [Bolehkah saya menggunakan CSS-Filters?] (Dengan mengandaikan bahawa boleh saya gunakan pautan harus dimasukkan di sini)

   Pada masa akan datang, kita boleh menggunakan fungsi

   dan

   untuk menghasilkan kesan yang sama, tetapi kedua -dua fungsi ini hanya disokong oleh Safari. backdrop-filter filter()

5. Gunakan elemen html sebagai imej latar belakang

   Biasanya, anda menentukan fail JPEG atau PNG sebagai imej latar belakang, atau mungkin kecerunan. Tetapi adakah anda tahu bahawa menggunakan fungsi

   , anda juga boleh menggunakan

   sebagai imej latar belakang? Pada masa ini, fungsi element() hanya disokong oleh Firefox: [Bolehkah saya menggunakan fungsi CSS-elemen?] (Dengan mengandaikan bahawa boleh saya gunakan pautan hendaklah dimasukkan di sini) <div> <code>element() Kemungkinan hampir tidak terbatas, di sini adalah contoh dari MDN.

6. Buat grid pintar dengan calc ()

   Mesh cecair adalah perkara yang hebat, tetapi ada beberapa masalah yang serius. Sebagai contoh, tidak mungkin untuk membuat jarak di antara bahagian atas dan bawah saiz yang sama dengan jarak antara kiri dan kanan. Juga, penandaan sangat mengelirukan, bergantung kepada sistem grid yang anda gunakan. Malah Flexbox sendiri bukan penyelesaian akhir, tetapi menggunakan fungsi

   (yang boleh digunakan sebagai nilai dalam CSS), grid boleh menjadi lebih baik. Dalam tutorial ini di laman web ini, George Martsoukos menunjukkan beberapa contoh praktikal, seperti grid galeri dengan jarak yang sempurna. Menggunakan preprocessors CSS seperti SASS, membina sistem mesh kreatif boleh menjadi sangat mudah dan mudah dijaga. Oleh kerana sokongan penyemak imbas hampir sempurna,

   adalah ciri yang mudah anda pastinya digunakan. [Bolehkah saya menggunakan calc?] (Dengan asumsi bahawa boleh saya gunakan pautan harus dimasukkan di sini) calc() calc()

7. Gunakan CSS Calc () untuk menyelaraskan kedudukan: Elemen Tetap

   Satu lagi kes penggunaan untuk fungsi adalah untuk menyelaraskan elemen dengan kedudukan tetap. Sebagai contoh, jika anda mempunyai pembalut kandungan di sebelah kiri dan kanan dengan jarak cecair, dan anda ingin menyelaraskan unsur -unsur tetap di dalam pembungkus itu - anda akan mengalami kesukaran menentukan pemilihan atribut "kanan" atau "kiri" ? Dengan

   , anda boleh menggabungkan nilai relatif dan mutlak untuk menyelaraskan elemen dengan sempurna: calc() calc()

   Ini adalah contoh: [pautan contoh codepen] (dengan mengandaikan bahawa pautan codepen harus dimasukkan di sini)

   .tooltip::after {
     content: attr(data-tooltip);
   }

8. Animate dengan padu-bezier ()

   Untuk membuat UI laman web atau aplikasi lebih menarik, anda boleh menggunakan animasi, tetapi pilihan pelonggaran standard sangat terhad. Sebagai contoh, "linear" atau "mudah-dalam-keluar". Sesuatu seperti animasi melantun tidak mungkin walaupun dengan pilihan standard. Menggunakan fungsi

   , anda boleh menghidupkan unsur -unsur tepat seperti yang anda kehendaki.

   cubic-bezier() Terdapat dua cara untuk menggunakan

   - memahami matematik di belakangnya dan membinanya sendiri, atau menggunakan penjana

   . cubic-bezier() cubic-bezier jujur, saya akan memilih yang terakhir.

Kesimpulan

Penggunaan fungsi CSS yang mahir bukan sahaja menyelesaikan masalah yang diketahui (seperti membina sistem grid yang lebih bijak), tetapi juga memberikan anda kebebasan kreatif yang lebih besar. Sebagai sokongan penyemak imbas menjadi lebih baik, anda harus melihat dengan teliti CSS anda dan memperbaikinya menggunakan fungsi seperti

.

calc()

soalan yang sering ditanya mengenai fungsi CSS

sebagai pemula, apakah fungsi asas CSS yang harus saya fahami?

Fungsi CSS digunakan untuk menetapkan nilai atribut CSS. Beberapa fungsi asas yang perlu diketahui oleh setiap pemula termasuk

,

, rgb(), rgba(), hsl(), dan hsla(). Fungsi calc() dan rgb() digunakan untuk menentukan warna, manakala fungsi rgba() dan hsl() digunakan untuk menentukan warna berdasarkan warna, ketepuan, dan kecerahan. Fungsi hsla() membolehkan anda melakukan pengiraan untuk menentukan nilai atribut CSS. calc()

Bagaimana menggunakan fungsi Calc () dalam CSS?

Fungsi

dalam

dalam CSS digunakan untuk melakukan pengiraan yang boleh digunakan sebagai nilai atribut. Fungsi ini boleh menggunakan "" "(tambahan),"-"(penolakan),"*"(berganda), dan"/"(bahagian) pengendali matematik. Sebagai contoh, anda boleh menggunakan calc() untuk membuat div yang sentiasa tolak 20 piksel untuk lebar viewport 50% seperti yang ditunjukkan di bawah: calc(). div { width: calc(50% – 20px); }

Apakah perbezaan antara fungsi RGB () dan RGBA () dalam CSS?

Perbezaan utama antara fungsi

dan

dalam rgb() CSS ialah rgba() mengandungi saluran alfa yang menentukan kelegapan warna. Parameter alfa adalah nombor antara 0.0 (telus sepenuhnya) dan 1.0 (sepenuhnya legap). Sebagai contoh, untuk menetapkan merah lut, anda boleh menggunakan: rgba(). color: rgba(255, 0, 0, 0.5);

Bagaimana untuk membuat kecerunan menggunakan fungsi CSS?

Fungsi CSS boleh digunakan untuk membuat kecerunan menggunakan fungsi linear-gradient() dan radial-gradient(). Sebagai contoh, untuk mencipta kecerunan linear dari merah ke biru, anda boleh menggunakan: background: linear-gradient(red, blue);. Begitu juga, untuk mewujudkan kecerunan radial dari pusat merah ke pinggir biru, anda boleh menggunakan: background: radial-gradient(red, blue);.

Bolehkah saya menukar elemen menggunakan fungsi CSS?

Ya, fungsi CSS boleh digunakan untuk menukar elemen. Atribut transform boleh digunakan dengan pelbagai fungsi seperti rotate(), scale(), skew(), dan translate() untuk mengubah suai rupa elemen. Sebagai contoh, untuk memutar elemen 45 darjah, anda boleh menggunakan: transform: rotate(45deg);.

Apakah tujuan fungsi ATTR () dalam CSS?

Fungsi

dalam attr() dalam CSS digunakan untuk mengembalikan nilai atribut elemen yang dipilih. Ini berguna untuk menghasilkan kandungan, dll. Sebagai contoh, anda boleh menggunakan attr() untuk memaparkan nilai harta "HREF" pautan dalam tooltip: a:after { content: attr(href); }.

Bagaimana menggunakan fungsi VAR () dalam CSS?

fungsi var() dalam CSS digunakan untuk memasukkan nilai harta tersuai (juga dikenali sebagai "pembolehubah CSS". Sebagai contoh, anda boleh menentukan harta tersuai --main-color: blue; dan kemudian gunakannya dalam CSS seperti berikut: color: var(--main-color);.

Bolehkah saya membuat animasi menggunakan fungsi CSS?

Ya, fungsi CSS boleh digunakan untuk membuat animasi. Atribut animation dalam CSS disingkat atribut untuk lapan atribut yang berbeza, termasuk animation-name, animation-duration, animation-timing-function, dan lain -lain. Sebagai contoh, untuk membuat animasi 2 saat yang dipanggil "Slidein", anda boleh menggunakan: animation: slidein 2s;.

Apakah tujuan fungsi url () url () dalam CSS?

Fungsi

dalam

dalam CSS digunakan untuk memasukkan fail. Penggunaan fungsi yang paling biasa adalah untuk menghubungkan ke stylesheets luaran atau termasuk imej. Sebagai contoh, untuk menetapkan imej latar belakang elemen, anda boleh menggunakan: url(). url() background-image: url('image.jpg'); Bolehkah saya membuat transformasi 3D menggunakan fungsi CSS?

Ya, fungsi CSS boleh digunakan untuk membuat transformasi 3D. Atribut

dalam CSS boleh digunakan dengan fungsi seperti

, transform, rotateX(), rotateY(), rotateZ(), dan scale3d() untuk membuat transformasi 3D. Sebagai contoh, untuk memutar elemen di sekitar paksi-x, anda boleh menggunakan: translate3d(). transform: rotateX(45deg);

Sila ambil perhatian bahawa saya telah mencuba yang terbaik untuk pseudo-asal teks asal dan mengekalkan format asal dan lokasi imej. Oleh kerana saya tidak dapat mengakses codepen dan saya boleh menggunakan laman web, saya menggantikan pautan yang berkaitan dengan ruang letak. Sila cari dan masukkan pautan yang betul sendiri.