mata utama
calc(), serta potensi untuk menggunakan elemen HTML sebagai imej latar belakang menggunakan fungsi cubic-bezier()
element()
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);
}
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
<a class="caption" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" data-title="秃鹫" data-description="..."> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174011191897662.jpg" 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
Walaupun anda tidak boleh menggunakan kaunter CSS untuk senarai yang diperintahkan (<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.
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()
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>
element() Kemungkinan hampir tidak terbatas, di sini adalah contoh dari MDN.
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()
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()
.tooltip::after {
content: attr(data-tooltip);
}
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
. cubic-bezier()
cubic-bezier jujur, saya akan memilih yang terakhir.
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()
sebagai pemula, apakah fungsi asas CSS yang harus saya fahami?
, 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()
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); }
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);
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);.
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);.
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); }.
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);.
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;.
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?
, 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);
Atas ialah kandungan terperinci 8 Trik Clever Dengan Fungsi CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
