Butang hantu gula-gula css-ing

Baru -baru ini, saya mencari inspirasi pengekodan, kurang bakat artistik. Pendekatan saya? Mereplikasi ciptaan visual yang menarik oleh orang lain, memberi tumpuan kepada kod yang bersih dan ringkas. Butang hantu gula -gula ini menarik perhatian saya!

Mereka kelihatan sesuai untuk projek yang cepat. Dalam masa lima belas minit, saya mencapai ini dalam kromium:

Teknik ini patut dikongsi. Artikel ini memperincikan proses saya dan meneroka pendekatan alternatif.

Persediaan awal

Unsur butang mudah membentuk asas, menggabungkan atribut data-ico untuk penyisipan emoji dan harta CSS tersuai, --slist , untuk senarai berhenti dalam atribut gaya.

 <code>boo!</code>

Penyiapan pasca-artikel, saya dapati batasan keratan-ke-teks Safari. Ia gagal pada elemen butang, display: flex (dan mungkin grid) elemen, dan teks elemen kanak -kanak. Akibatnya, teknik-teknik yang diterangkan di sini adalah safari-tidak bersesuaian. Penyelesaiannya melibatkan bersarang a<span></span> dalam butang, memohon semua gaya butang ke<span></span> , dan memastikan ia meliputi kotak sempadan ibu bapa. Bagi pengguna Linux yang tidak mempunyai akses peranti Apple fizikal, saya cadangkan Epiphany (terima kasih, Brian!).

CSS menggunakan ::after elemen pseudo untuk ikon dan susun atur grid untuk penjajaran teks/ikon. Sempadan, padding, radius --slist , senarai berhenti-larian untuk kecerunan pepenjuru, dan gaya fon juga digunakan.

 <code>button { display: grid; grid-auto-flow: column; grid-gap: .5em; border: solid .25em transparent; padding: 1em 1.5em; border-radius: 9em; background: linear-gradient(to right bottom, var(--slist)) border-box; font: 700 1.5em/ 1.25 ubuntu, sans-serif; text-transform: uppercase; &::after { content: attr(data-ico) } }</code>

Penjelasan pada Kod di atas: background-origin dan background-clip ditetapkan ke border-box . background-origin meletakkan background-position di bahagian atas kotak yang ditentukan, menentukan rujukan untuk background-size . border-box memastikan kecerunan merangkumi seluruh kotak sempadan. padding-box lalai akan mengakibatkan kecerunan hanya meliputi kawasan padding.

Penyelesaian khusus kromium (tidak standard)

Kaedah ini menggunakan tiga lapisan topeng dan komposit. Penyegaran pada komposit topeng boleh didapati di [pautan ke kursus kemalangan]. Hanya saluran Alpha yang penting dalam lapisan topeng CSS; Saluran RGB tidak menjejaskan hasilnya.

Kami bermula dengan dua lapisan: lapisan legap sepenuhnya yang meliputi kotak sempadan (alpha = 1 di mana-mana) dan kedua, juga sepenuhnya legap, lapisan terhad kepada kotak padding (alpha = 1 dalam kotak padding, 0 di luar).

Visualisasikan kotak susun atur sebagai segi empat tepat bersarang. Lapisan bawah adalah legap sepenuhnya di seluruh kotak sempadan. Lapisan atas adalah legap dalam kotak padding dan telus di kawasan sempadan. Pembulatan sudut ditentukan oleh border-radius (dan border-width untuk kotak padding).

Lapisan ini disusun menggunakan operasi exclude (atau xor dalam WebKit). Hasilnya: alpha = 0 dalam kotak padding (kedua-dua lapisan mempunyai alpha = 1), dan alpha = 1 di kawasan sempadan (lapisan pertama alpha = 1, lapisan kedua alpha = 0).

Kod:

 <code>button { /* same base styles */ --full: linear-gradient(red 0 0); -webkit-mask: var(--full) padding-box, var(--full); -webkit-mask-composite: xor; mask: var(--full) padding-box exclude, var(--full); }</code>

Butiran: Kecerunan merah digunakan untuk keringkasan. Kecerunan digunakan untuk kedua-dua lapisan kerana batasan klip latar belakang. mask-composite standard disertakan, dengan versi yang tidak standard ditindas.

Ini menghasilkan sempadan kecerunan tetapi tidak mempunyai teks. Menambah lapisan topeng ketiga, terhad kepada teks (dengan teks telus), dan xoring dengan hasil sebelumnya menambah teks kembali. Walau bagaimanapun, ini adalah krom khusus kerana nilai text yang tidak standard untuk mask-clip . Blok @supports memastikan keserasian penyemak imbas (tanpa pelekat teks dalam penyemak imbas yang tidak disokong).

 <code>button { /* same base styles */ @supports (-webkit-mask-clip: text) { -webkit-text-fill-color: transparent; --full: linear-gradient(red 0 0); -webkit-mask: var(--full) text, var(--full) padding-box, var(--full); -webkit-mask-composite: xor; } }</code>

Ini adalah pendekatan yang mudah, tetapi pergantungannya terhadap ciri-ciri bukan standard mengehadkan keserasian penyemak imbasnya. Mari kita meneroka kaedah alternatif, lebih luas yang disokong.

Pendekatan Alternatif: Penyelesaian Pseudo-Elemen dan Border-Image

Penyelesaian elemen pseudo tambahan mengelakkan pelekat dengan memotong latar belakang ke kawasan teks dan menambah sempadan kecerunan menggunakan kedudukan yang benar-benar diposisikan ::before elemen pseudo. Penyelesaian imej sempadan, sementara lebih mudah, mempunyai batasan dengan border-radius . Kaedah ini menawarkan keserasian silang penyemak imbas yang lebih baik daripada penyelesaian khusus kromium. Butiran lanjut dan contoh kod untuk kaedah ini disediakan dalam artikel asal. Penyelesaian pengadunan, juga diterangkan dalam artikel asal, menawarkan pendekatan lain tetapi dengan batasan mengenai interaksi latar belakang. Setiap kaedah mempunyai kekuatan dan kelemahannya bergantung kepada tahap sokongan silang penyemak imbas dan keperluan reka bentuk khusus.

Atas ialah kandungan terperinci Butang hantu gula-gula css-ing. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!