Halloween, Topeng (CSS) dan Gerbang Logik

Di laman web ini, terdapat benang Meme Monday mingguan di mana saya biasanya menerbitkan kartun komiks dan mencari inspirasi. Minggu lepas, @webbureaucrat berkongsi kartun yang menarik perhatian saya:

Saya mendapati ia lucu dan memutuskan untuk mencipta versi saya sendiri dengan HTML dan CSS menggunakan topeng.

Pada pandangan pertama, baris pertama kelihatan mudah dibuat: dua kecerunan jejari dan memilih komposit topeng terbaik. Baris kedua kelihatan lebih mencabar. Adakah penambahan satu kecerunan tambahan sudah memadai?

Mengabaikan garisan dan ciri muka jack-o-lantern —yang akan ditambahkan kemudian—, pangkal kartun itu ialah dua bulatan yang bersilang. Untuk mencapainya, saya mencipta topeng dengan dua kecerunan jejari:

.pumpkin {
  mask:
    /* trick */
    radial-gradient(circle at 40% 60%, #000 25%, #0000 0),
    /* treat */
    radial-gradient(circle at 60% 60%, #000 25%, #0000 0);
}

Dari situ, saya tahu saya perlu menggunakan komposit topeng atau komposit -webkit-mask-tidak standard untuk menggabungkan topeng dengan cara yang berbeza.

Berikut ialah percubaan awal yang tidak akan berfungsi pada Firefox. Saya akan tinggalkan imej:

Ini adalah nilai yang saya gunakan:

• ATAU: permulaan. Tidak ada keperluan untuk nilai istimewa kerana lalainya ialah semuanya akan bertindih. Saya tidak perlu menambah komposit topeng.
• DAN: bersilang. Topeng yang digunakan akan menjadi persimpangan semua topeng. Dalam kes ini, persilangan kedua-dua bulatan.
• XOR: kecualikan. Yang ini membolehkan dua alternatif. Untuk komposit topeng, pengecualian boleh dicapai dengan pengecualian. Tetapi kita juga boleh menggunakan nilai xor -webkit-mask-composite... jenis yang lebih masuk akal dalam kes ini tetapi, seperti yang dinyatakan di atas, adalah tidak standard.

Untuk baris kedua, saya memerlukan topeng ketiga untuk menduduki keseluruhan bekas (dan satu tambahan untuk NAND!) Saya mesti mengakui, ia agak kemas:

• NOR: -webkit-mask-composite: destinasi-keluar. Oleh kerana topeng yang menduduki keseluruhan bekas adalah yang terakhir, piksel daripada topeng sebelumnya (bersamaan dengan menipu ATAU merawat) dikosongkan, meninggalkan ruang di luar labu dengan warna.
• NAND: topeng-komposit: tolak. Saya terlalu merumitkan yang ini dengan terlalu banyak lapisan (4), cuba mengekalkannya standard dan dengan nilai komposit topeng tunggal.
• XNOR: -webkit-mask-komposit: xor. Ironinya. Untuk mencipta XNOR, kami menggunakan nilai xor tetapi dengan lapisan tambahan yang akan menyebabkan "flip" pemilihan.

Ia adalah kucar-kacir. Temani Afif dan Ana Tudor —anda harus mengikuti mereka di media sosial jika anda belum melakukannya, mereka hebat dalam CSS—, dimasukkan dan membantu memudahkan kod dan menggunakan sifat komposit topeng standard.

Hasilnya ada di bawah. Ia memerlukan menetapkan topeng untuk setiap sel, dan menunjukkan nilai komposit topeng sebaris. Dan semasa saya melakukannya, saya memutuskan untuk mengembangkan sedikit jenaka dan memasukkan beberapa lagi gerbang logik (sesetengahnya memerlukan lebih daripada 2 dan 3 topeng):

versi comiCSS

Walaupun ia berfungsi dengan baik, saya memutuskan untuk membuat versi yang lebih pendek yang hanya menggunakan standard CSS untuk komik CSS yang saya terbitkan (anda boleh mengikutinya di Medium juga!)

Ia hanya menggunakan get logik yang dijana dengan dua topeng dan sifat komposit topeng standard, jadi ia akan berfungsi dalam semua penyemak imbas. Selain itu, ia mempamerkan setiap nilai secara individu. Seronok dan mendidik (saya harap).

Atas ialah kandungan terperinci Halloween, Topeng (CSS) dan Gerbang Logik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!