Sehingga 2020, mod campuran adalah ciri yang saya tidak banyak digunakan kerana saya jarang pernah tahu apa hasil yang dapat mereka hasilkan tanpa memberi mereka percubaan terlebih dahulu. Dan mengambil pendekatan "cuba dan lihat apa yang berlaku" seolah -olah selalu meninggalkan saya terkejut dengan muntah visual yang saya dapat mencipta di skrin.
Masalahnya berpunca daripada tidak benar -benar mengetahui bagaimana mereka bekerja di belakang. Cukup banyak setiap artikel yang saya lihat mengenai topik ini adalah berdasarkan contoh, perbandingan dengan photoshop atau deskripsi artistik verbose. Saya dapati contoh-contoh yang hebat, tetapi apabila anda tidak tahu bagaimana keadaan berfungsi di belakang, menyesuaikan diri dengan demo yang bagus ke dalam sesuatu yang akan melaksanakan idea yang berbeza di kepala anda menjadi pengembaraan yang sangat memakan masa, mengecewakan dan akhirnya sia-sia. Kemudian perbandingan Photoshop tidak berguna untuk seseorang yang datang dari latar belakang teknikal. Dan penerangan artistik yang terperinci merasakan bahasa penguin kepada saya.
Oleh itu, saya mempunyai momen bola lampu ketika saya menjumpai spec dan mendapati ia juga termasuk formula matematik yang sesuai dengan mod campuran yang berfungsi. Ini bermakna saya akhirnya dapat memahami bagaimana perkara ini berfungsi di belakang dan di mana ia boleh menjadi sangat berguna. Dan sekarang saya tahu lebih baik, saya akan berkongsi pengetahuan ini dalam satu siri artikel.
Hari ini, kita akan memberi tumpuan kepada bagaimana pengadunan biasanya berfungsi, kemudian melihat dengan lebih dekat pada dua mod campuran yang agak serupa - perbezaan dan pengecualian - dan, akhirnya, sampai ke daging artikel ini di mana kita akan membedah beberapa kes penggunaan yang sejuk seperti yang di bawah.
Penggabungan bermaksud menggabungkan dua lapisan (yang disusun satu di atas yang lain) dan mendapatkan satu lapisan. Kedua-dua lapisan ini boleh menjadi dua adik beradik, di mana harta CSS yang kita gunakan adalah mod campuran. Mereka juga boleh menjadi dua lapisan latar belakang, di mana harta CSS yang kami gunakan adalah mod latar belakang. Perhatikan bahawa apabila saya bercakap tentang menggabungkan "adik-beradik," ini termasuk menggabungkan elemen dengan unsur-unsur pseudo atau dengan kandungan teks atau latar belakang ibu bapanya. Dan ketika datang ke lapisan latar belakang, ia bukan hanya lapisan latar belakang yang saya bicarakan-warna latar belakang juga lapisan.
Apabila menggabungkan dua lapisan, lapisan di atas dipanggil sumber , manakala lapisan di bawahnya dipanggil destinasi . Ini adalah sesuatu yang saya ambil kerana nama -nama ini tidak masuk akal, sekurang -kurangnya kepada saya. Saya mengharapkan destinasi menjadi output, tetapi sebaliknya mereka kedua -dua input dan lapisan yang dihasilkan adalah output.
Betapa tepatnya kita menggabungkan kedua -dua lapisan bergantung kepada mod campuran tertentu yang digunakan, tetapi ia sentiasa setiap piksel. Sebagai contoh, ilustrasi di bawah menggunakan mod campuran Multiply untuk menggabungkan dua lapisan, yang diwakili sebagai grid piksel.
Baiklah, tetapi apa yang berlaku jika kita mempunyai lebih daripada dua lapisan? Nah, dalam kes ini, proses penggabungan berlaku secara berperingkat, bermula dari bawah.
Pada peringkat pertama, lapisan kedua dari bahagian bawah adalah sumber kami, dan lapisan pertama dari bawah adalah destinasi kami. Kedua -dua lapisan ini menggabungkan bersama dan hasilnya menjadi destinasi untuk peringkat kedua, di mana lapisan ketiga dari bawah adalah sumber. Menggabungkan lapisan ketiga dengan hasil penggabungan yang pertama memberi kita destinasi untuk peringkat ketiga, di mana lapisan keempat dari bawah adalah sumber.
Sudah tentu, kita boleh menggunakan mod campuran yang berbeza pada setiap peringkat. Sebagai contoh, kita boleh menggunakan perbezaan untuk menggabungkan dua lapisan pertama dari bahagian bawah, kemudian gunakan Multiply untuk menggabungkan hasilnya dengan lapisan ketiga dari bahagian bawah. Tetapi ini adalah sesuatu yang kita akan pergi sedikit lebih banyak dalam artikel masa depan.
Hasilnya yang dihasilkan oleh dua mod campuran yang kita bincangkan di sini tidak bergantung kepada mana dari kedua -dua lapisan berada di atas. Perhatikan bahawa ini tidak berlaku untuk semua mod campuran yang mungkin, tetapi ia adalah kes bagi yang kita lihat dalam artikel ini.
Mereka juga mod campuran yang boleh dipisahkan, yang bermaksud operasi pengadunan dilakukan pada setiap saluran secara berasingan. Sekali lagi, ini tidak berlaku untuk semua mod campuran yang mungkin, tetapi ia adalah kes untuk perbezaan dan pengecualian.
Lebih tepat lagi, saluran merah yang dihasilkan hanya bergantung kepada saluran merah sumber dan saluran merah destinasi; Saluran hijau yang dihasilkan hanya bergantung kepada saluran hijau sumber dan saluran hijau destinasi; Dan akhirnya, saluran biru yang dihasilkan hanya bergantung pada saluran biru sumber dan saluran biru destinasi.
R = f <sub>b</sub> (r <sub>s</sub> , r <sub>d</sub> ) G = f <sub>b</sub> (g <sub>s</sub> , g <sub>d</sub> ) B = F <sub>B</sub> (B <sub>S</sub> , B <sub>D</sub> )
Untuk saluran generik, tanpa menyatakan sama ada ia merah, hijau atau biru, kita mempunyai fungsi dari dua saluran yang sepadan di lapisan sumber (atas) dan di lapisan destinasi (bawah):
Ch = f <sub>b</sub> (ch <sub>s</sub> , ch <sub>d</sub> )
Sesuatu yang perlu diingat ialah nilai RGB boleh diwakili sama ada dalam selang [0, 255], atau sebagai peratusan dalam selang [0%, 100%], dan apa yang sebenarnya kita gunakan dalam formula kita adalah peratusan yang dinyatakan sebagai nilai perpuluhan. Sebagai contoh, Crimson boleh ditulis sama ada RGB (220, 20, 60) atau sebagai RGB (86.3%, 7.8%, 23.5%) - kedua -duanya sah. Nilai saluran yang kami gunakan untuk pengiraan jika piksel adalah Crimson adalah peratusan yang dinyatakan sebagai nilai perpuluhan, iaitu .863, .078, .235.
Jika piksel hitam, nilai saluran yang kita gunakan untuk pengiraan adalah semua 0, kerana hitam boleh ditulis sebagai RGB (0, 0, 0) atau sebagai RGB (0%, 0%, 0%). Sekiranya piksel putih, nilai saluran yang kami gunakan untuk pengiraan adalah semua 1, kerana putih boleh ditulis sebagai RGB (255, 255, 255) atau sebagai RGB (100%, 100%, 100%).
Perhatikan bahawa di mana sahaja kita mempunyai ketelusan penuh (alpha sama dengan 0), hasilnya sama dengan lapisan lain.
Nama mod campuran ini mungkin memberikan petunjuk tentang apa fungsi penggabungan F B (). Hasilnya adalah nilai mutlak perbezaan antara nilai saluran yang sepadan untuk kedua -dua lapisan.
Ch = f <sub>b</sub> (ch <sub>s</sub> , ch <sub>d</sub> ) = | ch s - ch d |
Mula -mula, ini bermakna jika piksel yang sepadan dalam kedua -dua lapisan mempunyai nilai RGB yang sama (iaitu Ch S = Ch D untuk setiap satu daripada tiga saluran), maka piksel lapisan yang dihasilkan adalah hitam kerana perbezaan untuk ketiga -tiga saluran adalah 0.
Ch <sub>s</sub> = ch <sub>d</sub> Ch = f <sub>b</sub> (ch <sub>s</sub> , ch <sub>d</sub> ) = | ch <sub>s</sub> - ch <sub>d</sub> | = 0
Kedua, kerana nilai mutlak perbezaan antara mana -mana nombor positif dan 0 daun nombor tidak berubah, ia menghasilkan piksel hasil yang sama yang mempunyai nilai RGB yang sama seperti piksel lapisan lain jika piksel lapisan hitam (semua saluran sama 0).
Jika piksel hitam berada di lapisan atas (sumber), menggantikan nilai salurannya dengan 0 dalam formula kami memberi kami:
Ch = f <sub>b</sub> (0, ch <sub>d</sub> ) = | 0 - ch <sub>d</sub> | = | -Ch <sub>D</sub> | = Ch <sub>d</sub>
Jika piksel hitam berada di lapisan bawah (destinasi), menggantikan nilai salurannya dengan 0 dalam formula kami memberi kami:
Ch = f <sub>b</sub> (ch <sub>s</sub> , 0) = | ch <sub>s</sub> - 0 | = | Ch <sub>s</sub> | = Ch <sub>s</sub>
Akhirnya, kerana nilai mutlak perbezaan antara mana -mana nombor subuniter positif dan 1 memberi kita pelengkap nombor itu, ia mengakibatkan bahawa jika piksel lapisan berwarna putih (mempunyai semua saluran 1), piksel hasil yang sama adalah piksel lapisan lain yang terbalik sepenuhnya (penapis apa: terbalik (1) akan dilakukan kepadanya).
Jika piksel putih berada di lapisan atas (sumber), menggantikan nilai salurannya dengan 1 dalam formula kami memberi kami:
CH = F <sub>B</sub> (1, CH <sub>D</sub> ) = | 1 - CH <sub>D</sub> | = 1 - ch <sub>d</sub>
Jika piksel putih berada di lapisan bawah (destinasi), menggantikan nilai salurannya dengan 1 dalam formula kami memberi kami:
Ch = f <sub>b</sub> (ch <sub>s</sub> , 1) = | ch <sub>s</sub> - 1 | = 1 - ch <sub>s</sub>
Ini dapat dilihat dalam tindakan dalam pen interaktif di bawah, di mana anda boleh bertukar -tukar antara melihat lapisan yang dipisahkan dan melihat mereka bertindih dan dicampur. Memandangkan tiga lajur dalam kes bertindih juga mendedahkan apa yang berlaku untuk setiap.
Untuk mod campuran kedua dan terakhir yang kita lihat hari ini, hasilnya adalah dua kali produk dari dua nilai saluran, dikurangkan dari jumlah mereka:
Ch = f <sub>b</sub> (ch <sub>s</sub> , ch <sub>d</sub> ) = ch s ch d - 2 · ch s · ch d
Oleh kerana kedua -dua nilai berada dalam selang [0, 1], produk mereka selalu sama dengan yang terkecil dari mereka, jadi dua kali produk selalu sama dengan jumlah mereka.
Jika kita menganggap piksel hitam di lapisan atas (sumber), kemudian gantikan Ch S dengan 0 dalam formula di atas, kita mendapat hasil berikut untuk saluran Pixel yang sama:
CH = F <sub>B</sub> (0, CH <sub>D</sub> ) = 0 CH <sub>D</sub> - 2 · 0 · CH <sub>D</sub> = CH <sub>D</sub> - 0 = CH <sub>D D</sub>
Jika kita menganggap piksel hitam di lapisan bawah (destinasi), kemudian gantikan Ch D dengan 0 dalam formula di atas, kita mendapat hasil berikut untuk saluran Pixel yang sama:
Ch = f <sub>b</sub> (ch <sub>s</sub> , 0) = ch <sub>s</sub> 0 - 2 · ch <sub>s</sub> · 0 = ch <sub>s</sub> - 0 = ch <sub>s</sub>
Jadi, jika piksel lapisan hitam, ia menyebabkan piksel hasil yang sama adalah sama dengan piksel lapisan lain.
Jika kita menganggap piksel putih di lapisan atas (sumber), kemudian gantikan Ch S dengan 1 dalam formula di atas, kita mendapat hasil berikut untuk saluran Pixel yang sama:
Ch = f <sub>b</sub> (1, ch <sub>d</sub> ) = 1 ch <sub>d</sub> - 2 · 1 · ch <sub>d</sub> = 1 ch <sub>d</sub> - 2 · ch <sub>d</sub> = 1 - ch <sub>d</sub>
Jika kita menganggap piksel putih di lapisan bawah (destinasi), kemudian gantikan Ch D dengan 1 dalam formula di atas, kita mendapat hasil berikut untuk saluran Pixel yang sama:
Ch = f <sub>b</sub> (ch <sub>s</sub> , 1) = ch <sub>s</sub> 1 - 2 · ch <sub>s</sub> · 1 = ch <sub>s</sub> 1 - 2 · ch <sub>s</sub> = 1 - ch <sub>s</sub>
Oleh itu, jika piksel lapisan berwarna putih, ia mengakibatkan piksel hasil yang sama adalah sama dengan piksel lapisan lain yang terbalik.
Ini semua ditunjukkan dalam demo interaktif berikut:
Perhatikan bahawa selagi sekurang -kurangnya satu lapisan hanya mempunyai piksel hitam dan putih, perbezaan dan pengecualian menghasilkan hasil yang sama.
Di sini datang bahagian yang menarik - contohnya!
Katakan kita mempunyai perenggan dengan pautan:
<p> Hello, <a href="'#'"> dunia </a>! </p>
Kami mulakan dengan menetapkan beberapa gaya asas untuk meletakkan teks kami di tengah-tengah skrin, merangkul saiz fonnya, menetapkan latar belakang pada badan dan warna pada kedua-dua perenggan dan pautan.
badan {
paparan: grid;
Kandungan Tempat: Pusat;
Ketinggian: 100VH;
Latar Belakang: #222;
Warna: #ddd;
saiz font: pengapit (1.25em, 15VW, 7EM);
}
A {Warna: Emas; }Tidak kelihatan seperti setakat ini, tetapi kami akan segera mengubahnya!
Langkah seterusnya adalah untuk mewujudkan elemen pseudo yang benar-benar diposisikan yang meliputi keseluruhan pautan dan mempunyai latar belakang yang ditetapkan kepada CurrentColor.
{
Kedudukan: Relatif;
Warna: Emas;
& :: selepas {
Kedudukan: Mutlak;
Atas: 0;
Bawah: 0;
Kanan: 0;
Kiri: 0;
Latar Belakang: CurrentColor;
Kandungan: '';
}
}Di atas kelihatan seperti kita telah merosakkan perkara ... tetapi adakah kita benar -benar? Apa yang kita ada di sini adalah segi empat tepat emas di atas teks emas. Dan jika anda telah memberi perhatian kepada bagaimana kedua-dua mod campuran yang dibincangkan di atas kerja, maka anda mungkin sudah menebak apa yang akan datang-kami menggabungkan dua nod saudara dalam pautan (segi empat tepat pseudo-elemen dan kandungan teks) menggunakan perbezaan, dan kerana mereka berdua emas, ia menghasilkan apa yang mereka miliki-teks-menjadi hitam.
p {pengasingan: mengasingkan; }
{
/ * sama seperti sebelum */
& :: selepas {
/ * sama seperti sebelum */
Mix-Blend-Mode: Perbezaan;
}
}Perhatikan bahawa kita perlu mengasingkan perenggan untuk mengelakkan pengadunan dengan latar belakang badan. Walaupun ini hanya masalah di Firefox (dan diberikan kita mempunyai latar belakang yang sangat gelap di badan, ia tidak terlalu ketara) dan baik -baik saja di Chrome, ingatlah bahawa, menurut spec, apa yang Firefox tidak betul. Ia adalah krom yang berkelakuan dengan cara kereta di sini, jadi kita harus mempunyai harta pengasingan yang ditetapkan sekiranya pepijat itu diperbaiki.
Baiklah, tetapi kami mahu ini hanya berlaku jika pautan itu difokuskan atau melayang. Jika tidak, pseudo-elemen tidak dapat dilihat-katakan ia diturunkan kepada apa-apa.
{
/ * sama seperti sebelum */
Teks-penyerapan: Tiada;
& :: selepas {
/ * sama seperti sebelum */
Transform: Skala (0);
}
&: fokus {garis besar: tiada}
&: fokus, &: hover {& :: selepas {transform: none; }}
}Kami juga telah mengeluarkan garis bawah pautan dan garis besar fokus. Di bawah, kini anda dapat melihat kesan perbezaan pada: hover (kesan yang sama berlaku pada: fokus, yang merupakan sesuatu yang anda boleh menguji dalam demo langsung).
Kami kini mempunyai perubahan keadaan kita, tetapi ia kelihatan kasar, jadi mari kita tambahkan peralihan!
{
/ * sama seperti sebelum */
& :: selepas {
/ * sama seperti sebelum */
Peralihan: Transform .25s;
}
}Jauh lebih baik!
Ia akan kelihatan lebih baik jika pseudo kami tumbuh bukan dari apa -apa di tengah, tetapi dari garis nipis di bahagian bawah. Ini bermakna kita perlu menetapkan asal transformasi di tepi bawah (pada 100% secara menegak dan apa jua nilai secara mendatar) dan pada mulanya skala pseudo kita kepada sesuatu yang sedikit lebih daripada apa-apa di sepanjang paksi Y.
{
/ * sama seperti sebelum */
& :: selepas {
/ * sama seperti sebelum */
Transform-Origin: 0 100%;
transform: scaley (.05);
}
}Sesuatu yang saya ingin lakukan di sini adalah menggantikan fon perenggan dengan yang lebih menarik secara estetika, jadi mari kita jaga juga! Tetapi kita kini mempunyai masalah yang berbeza: akhir 'd' melekat dari segi empat tepat pada: fokus/: hover.
Kami boleh membetulkannya dengan padding mendatar pada pautan kami.
{
/ * sama seperti sebelum */
Padding: 0 .25em;
}Sekiranya anda tertanya-tanya mengapa kami menetapkan padding ini di kedua-dua kanan dan sebelah kiri dan bukan hanya menetapkan padding-kanan, sebabnya digambarkan di bawah. Apabila teks pautan kami menjadi "Alien World," permulaan keriting 'A' akan berakhir di luar segi empat tepat kami jika kami tidak mempunyai padding-kiri.
Demo ini dengan pautan berbilang kata di atas juga menyoroti isu lain apabila kita mengurangkan lebar viewport.
Satu pembetulan cepat di sini adalah untuk menetapkan paparan: blok sebaris pada pautan. Ini bukan penyelesaian yang sempurna. Ia juga pecah apabila teks pautan lebih panjang daripada lebar viewport, tetapi ia berfungsi dalam kes ini, jadi mari kita tinggalkannya di sini sekarang dan kita akan kembali kepada masalah ini dalam seketika.
Mari kita pertimbangkan keadaan tema ringan. Oleh kerana tidak ada cara untuk mendapatkan putih dan bukannya hitam untuk teks pautan pada: hover atau: fokus dengan menggabungkan dua lapisan sorotan yang sama yang kedua -duanya tidak putih, kita memerlukan sedikit pendekatan yang berbeza di sini, yang tidak melibatkan hanya menggunakan mod campuran.
Apa yang kita lakukan dalam kes ini pertama kali menetapkan latar belakang, warna teks perenggan biasa, dan warna teks pautan kepada nilai yang kita mahu, tetapi terbalik . Saya pada mulanya melakukan penyongsangan ini secara manual, tetapi kemudian saya mendapat cadangan menggunakan fungsi Sass Invert (), yang merupakan idea yang sangat keren yang benar -benar memudahkan perkara. Kemudian, selepas kita mempunyai tema gelap ini pada dasarnya tema cahaya yang kita mahu terbalik, kita mendapat hasil yang diinginkan dengan membalikkan segala -galanya sekali lagi dengan bantuan fungsi penapis CSS ().
Kaveat kecil di sini: Kami tidak dapat menetapkan penapis: Invert (1) pada elemen badan atau HTML kerana ini tidak akan berkelakuan seperti yang kami harapkan dan kami tidak akan mendapat hasil yang diinginkan. Tetapi kita boleh menetapkan kedua -dua latar belakang dan penapis pada pembalut di sekitar perenggan kita.
<section> <p> hello, <a href="'#'"> alien dunia </a>! </p> </section>
badan {
/* Sama seperti sebelumnya,
Tanpa Kandungan Tempat, Latar Belakang dan Perisytiharan Warna,
yang kita bergerak di bahagian */
}
Bahagian {
paparan: grid;
Kandungan Tempat: Pusat;
Latar Belakang: Invert (#DDD) / * Sass Invert (<solor>) Fungsi * /;
Warna: Invert (#222); / * Sass invert <tolor>) fungsi */;
Penapis: Invert (1); / * CSS penapis invert (<nombor peratusan>) fungsi */
}
{
/ * sama seperti sebelum */
warna: terbalik (ungu); / * Sass invert (<olor>) fungsi */
}</olor></nombor></tolor></solor>Berikut adalah contoh bar navigasi yang menggunakan kesan ini (dan sekumpulan helah pintar lain, tetapi mereka berada di luar skop artikel ini). Pilih pilihan yang berbeza untuk melihatnya dalam tindakan:
Sesuatu yang lain yang kita perlu berhati -hati adalah yang berikut: semua keturunan seksyen kita terbalik apabila kita menggunakan teknik ini. Dan ini mungkin bukan apa yang kita mahu dalam kes elemen IMG - saya pasti tidak mengharapkan untuk melihat imej dalam catatan blog terbalik apabila saya beralih dari gelap ke tema cahaya. Akibatnya, kita harus membalikkan penyongsangan penapis pada setiap keturunan IMG seksyen kami.
Bahagian {
/ * sama seperti sebelum */
&, & img {penapis: invert (1); }
}Meletakkannya bersama -sama, demo di bawah menunjukkan kedua -dua kes tema gelap dan ringan dengan imej:
Sekarang mari kita kembali ke isu teks pautan pembalut dan lihat jika kita tidak mempunyai pilihan yang lebih baik daripada membuat unsur-unsur yang menyekat.
Nah, kita lakukan! Kita boleh menggabungkan dua lapisan latar belakang dan bukannya menggabungkan kandungan teks dan pseudo. Satu lapisan dipotong ke teks, manakala yang lain dipotong ke kotak sempadan dan saiz menegaknya menghidupkan antara 5% pada mulanya dan 100% dalam kes-kes yang berlegar dan terfokus.
{
/ * sama seperti sebelum */
-WebKit-Teks-Fill-warna: telus;
-Moz-Text-Fill-warna: telus;
--Full: Linear-Gradient (CurrentColor, CurrentColor);
Latar Belakang:
var (-penuh),
var (-penuh) 0 100%/1%var (-sy, 5%) REPET-X;
-WebKit-Background-Clip: Teks, kotak sempadan;
Klip latar belakang: teks, kotak sempadan;
Latar Belakang-Mod: Perbezaan;
Peralihan: Latar Belakang .25S;
&: fokus, &: hover {--sy: 100%; }
}Perhatikan bahawa kami tidak mempunyai elemen pseudo lagi, jadi kami telah mengambil beberapa CSS di atasnya, memindahkannya ke pautan itu sendiri, dan tweakednya untuk memenuhi teknik baru ini. Kami telah beralih daripada menggunakan mod campuran campuran untuk menggunakan mod latar belakang-mod; Kami kini beralih saiz latar belakang transformasi dan, dalam: fokus dan: hover states; Dan kita kini tidak mengubah transformasi, tetapi harta tersuai yang mewakili komponen menegak saiz latar belakang.
Lebih baik, walaupun ini bukan penyelesaian yang sempurna sama ada.
Masalah pertama adalah yang anda perhatikan jika anda menyemak pautan demo langsung kapsyen di Firefox: ia tidak berfungsi sama sekali. Ini disebabkan oleh bug Firefox yang saya dilaporkan kembali pada tahun 2018, kemudian terlupa sehingga saya mula bermain dengan mod campuran dan memukulnya lagi.
Masalah kedua adalah yang ketara dalam rakaman. Pautan kelihatan agak pudar. Ini kerana, atas sebab tertentu, Chrome menggabungkan unsur-unsur dalam talian seperti pautan (perhatikan bahawa ini tidak akan berlaku dengan unsur-unsur blok seperti Divs) dengan latar belakang nenek moyang mereka yang terdekat (bahagian dalam kes ini) jika unsur-unsur inline ini mempunyai mod latar belakang yang ditetapkan kepada apa-apa tetapi normal.
Malah lebih pelik, menetapkan pengasingan: mengasingkan pada pautan atau perenggan induknya tidak menghentikan ini daripada berlaku. Saya masih mempunyai perasaan yang membingungkan ia mesti ada kaitan dengan konteks, jadi saya memutuskan untuk terus membuang hacks yang mungkin, dan berharap mungkin ada sesuatu yang akhirnya berfungsi. Nah, saya tidak perlu menghabiskan banyak masa di atasnya. Menetapkan kelegapan ke subuniter (tetapi masih cukup dekat dengan 1 jadi ia tidak ketara bahawa ia tidak sepenuhnya legap) nilai membetulkannya.
{
/ * sama seperti sebelum */
Opacity: .999; / * hack untuk membetulkan isu pengadun ¯_ (ツ) _/¯ */
}Masalah terakhir adalah satu lagi yang dapat dilihat dalam rakaman. Jika anda melihat 'R' pada akhir "Amur", anda dapat melihat hujung kanannya dipotong kerana ia jatuh di luar segi empat tepat latar belakang. Ini amat ketara jika anda membandingkannya dengan 'R' dalam "Leopard."
Saya tidak mempunyai harapan yang tinggi untuk membetulkannya, tetapi melemparkan soalan kepada Twitter. Dan apa yang anda tahu, ia boleh diperbaiki! Menggunakan kotak-penyerapan-break dalam kombinasi dengan padding yang telah kami tetapkan dapat membantu kami mencapai kesan yang diingini!
{
/ * sama seperti sebelum */
BOX-Decoration-Break: Clone;
}Ambil perhatian bahawa break box-decoration masih memerlukan awalan -webkit- untuk semua pelayar WebKit, tetapi tidak seperti dalam kes sifat seperti klip latar belakang di mana sekurang-kurangnya satu nilai adalah teks, alat-alat prefixing automatik boleh menjaga masalah dengan baik. Itulah sebabnya saya tidak memasukkan versi prefixed dalam kod di atas.
Satu lagi cadangan yang saya dapat ialah menambah margin negatif untuk mengimbangi padding. Saya akan berulang -alik - saya tidak boleh memutuskan sama ada saya suka hasilnya lebih baik dengan atau tanpa itu. Dalam apa jua keadaan, ia adalah pilihan yang patut disebut.
$ p: .25em;
{
/ * sama seperti sebelum */
margin: 0 (-$ p); / * Kami memasukkannya dalam kurungan sehingga sass tidak cuba melakukan penolakan */
Padding: 0 $ p;
}Namun, saya harus mengakui bahawa menghidupkan hanya kedudukan latar belakang atau saiz latar belakang kecerunan agak membosankan. Tetapi terima kasih kepada Houdini, kini kita boleh mendapatkan kreatif dan menghidupkan apa jua komponen kecerunan yang kami kehendaki, walaupun ini hanya disokong dalam Chromium pada masa ini. Sebagai contoh, jejari radial-gradien () seperti di bawah atau kemajuan gradien conic ().
Ini adalah jenis kesan yang sering saya lihat dicapai dengan menggunakan duplikasi elemen-kedua-dua salinan berlapis satu di atas yang lain, di mana salah satu daripada mereka mempunyai penapis terbalik dan laluan klip digunakan di bahagian atas untuk menunjukkan kedua-dua lapisan. Laluan lain adalah berlapis elemen kedua dengan alpha yang cukup rendah anda tidak dapat memberitahu ia ada dan penapis latar belakang.
Kedua-dua pendekatan ini mendapat pekerjaan yang dilakukan jika kita mahu membalikkan sebahagian daripada seluruh elemen dengan semua kandungan dan keturunannya, tetapi mereka tidak dapat membantu kita apabila kita mahu membalikkan hanya sebahagian daripada latar belakang-kedua-dua penapis dan penapis latar belakang mempengaruhi seluruh elemen, bukan hanya latar belakang mereka. Dan sementara fungsi penapis baru () (sudah disokong oleh safari) mempunyai kesan semata -mata pada lapisan latar belakang, ia mempengaruhi seluruh kawasan latar belakang, bukan hanya sebahagian daripadanya.
Di sinilah pengadunan masuk. Teknik ini cukup mudah: kita mempunyai lapisan latar belakang, sebahagiannya kita mahu membalikkan dan satu atau lebih lapisan kecerunan yang memberi kita kawasan putih di mana kita mahu penyongsangan lapisan lain dan ketelusan (atau hitam) sebaliknya. Kemudian kami menggabungkan menggunakan salah satu daripada dua mod campuran yang dibincangkan hari ini. Untuk tujuan penyongsangan, saya lebih suka pengecualian (ia adalah satu watak yang lebih pendek daripada perbezaan).
Inilah contoh pertama. Kami mempunyai elemen persegi yang mempunyai latar belakang dua lapisan. Kedua -dua lapisan adalah gambar kucing dan kecerunan dengan peralihan tajam antara putih dan telus.
div {
Latar Belakang:
Linear-Gradient (45deg, putih 50%, telus 0),
URL (CAT.JPG) 50%/ COVER;
}Ini memberi kita hasil berikut. Kami juga menetapkan dimensi, radius sempadan, bayang-bayang, dan mempersembahkan teks dalam proses itu, tetapi semua perkara itu tidak begitu penting dalam konteks ini:
Seterusnya, kami hanya memerlukan satu lagi perisytiharan CSS untuk membalikkan separuh kiri bawah:
div {
/ * sama seperti sebelum */
Latar Belakang-Mod: Pengecualian; / * atau perbezaan, tetapi ia lebih lama */
}Perhatikan bagaimana teks itu tidak terjejas oleh penyongsangan; Ia hanya digunakan untuk latar belakang.
Anda mungkin tahu slider imej sebelum dan selepas interaktif. Anda mungkin telah melihat sesuatu yang baik di sini di CSS-Tricks. Saya telah melihatnya di compressor.io, yang sering saya gunakan untuk memampatkan imej, termasuk yang digunakan dalam artikel -artikel ini!
Matlamat kami adalah untuk mencipta sesuatu yang menggunakan elemen HTML tunggal, di bawah 100 bait JavaScript - dan tidak banyak CSS!
Unsur kami akan menjadi input pelbagai. Kami tidak menetapkan atribut Min atau Max, jadi mereka lalai kepada 0 dan 100, masing -masing. Kami tidak menetapkan atribut nilai sama ada, jadi ia mungkir kepada 50, yang juga nilai yang kami berikan harta tersuai, --K, yang ditetapkan dalam atribut gayanya.
<input type="'range'" style="'-k:">
Dalam CSS, kita mulakan dengan penetapan semula asas, maka kita membuat input kita elemen blok yang menduduki seluruh ketinggian viewport. Kami juga memberikan dimensi dan latar belakang dummy ke trek dan ibu jari supaya kita dapat melihat barangan di skrin dengan segera.
$ Thumb-W: 5EM;
@mixin track () {
Sempadan: Tiada;
Lebar: 100%;
Ketinggian: 100%;
Latar Belakang: URL (Flowers.jpg) 50%/ Cover;
}
@mixin thumb () {
Sempadan: Tiada;
lebar: $ thumb-w;
Ketinggian: 100%;
Latar Belakang: Ungu;
}
* {
Margin: 0;
Padding: 0;
}
[type = 'range'] {
&, & ::-WebKit-Slider-Thumb,
& ::-WebKit-Slider-Runnable-Track {-WebKit-appearance: none; }
paparan: blok;
lebar: 100VW; Ketinggian: 100VH;
& ::-WebKit-Slider-Runnable-Track {@include track; }
& ::-moz-range-track {@include track; }
& ::-WebKit-Slider-Thumb {@include thumb; }
& ::-moz-range-thumb {@include thumb; }
}Langkah seterusnya adalah untuk menambah satu lagi lapisan latar belakang di trek, satu gradien linear di mana garis pemisahan antara telus dan putih bergantung pada nilai input jarak semasa, --K, dan kemudian campuran kedua-duanya.
@mixin track () {
/ * sama seperti sebelum */
Latar Belakang:
URL (flowers.jpg) 50%/ penutup,
linear-gradient (90deg, var telus (-p), putih 0);
Latar Belakang-Mod: Pengecualian;
}
[type = 'range'] {
/ * sama seperti sebelum */
--p: calc (var (-k) * 1%);
}Perhatikan bahawa perintah dua lapisan latar belakang trek tidak penting kerana kedua -dua pengecualian dan perbezaan adalah komutatif.
Ia mula kelihatan seperti sesuatu, tetapi menyeret ibu jari tidak melakukan apa -apa untuk menggerakkan garis pemisahan. Ini berlaku kerana nilai semasa, --K (di mana kedudukan garis pemisahan kecerunan, --P, bergantung), tidak dapat dikemas kini secara automatik. Mari kita selesaikan dengan sedikit javascript yang mendapat nilai slider apabila ia berubah kemudian ditetapkan --K ke nilai ini.
addEventListener ('input', e => {
Let _t = e.Target;
_t.style.setProperty ('-k', _t.value)
})Sekarang semua nampaknya berfungsi dengan baik!
Tetapi adakah ia benar -benar? Katakan kita melakukan sesuatu yang lebih menarik untuk latar belakang ibu jari:
$ thumb-r: .5*$ thumb-w;
$ thumb-l: 2px;
@mixin thumb () {
/ * sama seperti sebelum */
-list: #FFF 0% 60deg, telus 0%;
Latar Belakang:
Conic-Gradient (dari 60deg, var (-senarai)) 0/37.5%/ * Arrow kiri */,
Conic-Gradient (dari 240deg, var (-senarai)) 100%/37.5%/ * anak panah kanan */,
Radial-Gradient (Circle,
Calc telus ( #{$ thumb -r} - #{$ thumb -l} - 1px) / * di dalam bulatan * /,
#fff calc (#{$ thumb-r}-#{$ thumb-l}) calc (#{$ thumb-r}-1px) / * circle line * /,
telus $ thumb-r / * lingkaran luar * /),,
Linear-Gradient (
#fff calc (50%- #{$ thumb-r} .5* #{$ thumb-l}) /*baris atas* /,
telus 0 calc (50% #{$ thumb-r}-.5* #{$ thumb-l}) /*jurang di belakang bulatan* /,
#fff 0/ * garis bawah */) 50% 0/ #{$ thumb-l};
Latar Belakang berulang: tidak berulang;
}Linear-gradient () mewujudkan garis pemisahan menegak nipis, gradien radial () mencipta bulatan, dan dua lapisan conic-gradient () membuat anak panah.
Masalahnya kini jelas apabila menyeret ibu jari dari satu hujung ke yang lain: garis pemisahan tidak tetap ditetapkan ke garis tengah menegak ibu jari.
Apabila kami menetapkan --P ke Calc (var (-k)*1%), garis pemisahan bergerak dari 0%hingga 100%. Ia sepatutnya bergerak dari titik permulaan yang separuh lebar ibu jari, $ ibu jari, sehingga separuh lebar ibu jari sebelum 100%. Iaitu, dalam julat yang 100% tolak lebar ibu jari, $ Thumb-W. Kami tolak separuh dari setiap hujung, jadi itulah lebar jempol yang akan ditolak. Mari Betulkan Itu!
--p: calc ( #{$ thumb-r} var (-k) * (100%- #{$ thumb-w}) / 100);Jauh lebih baik!
Tetapi cara input cara berfungsi, kotak sempadan mereka bergerak dalam had kotak kandungan trek (Chrome) atau dalam batas kotak kandungan input sebenar (Firefox) ... ini masih tidak terasa betul. Ia akan kelihatan lebih baik jika garis tengah ibu jari (dan, akibatnya, garis pemisahan) pergi ke tepi Viewport.
Kita tidak boleh mengubah cara input pelbagai berfungsi, tetapi kita boleh membuat input dilanjutkan di luar viewport dengan separuh lebar ibu jari ke kiri dan dengan separuh lagi lebar ibu jari ke kanan. Ini menjadikan lebarnya sama dengan Viewport, 100VW, ditambah lebar jempol keseluruhan, $ Thumb-W.
badan {limpahan: tersembunyi; }
[type = 'range'] {
/ * sama seperti sebelum */
margin-kiri:-$ thumb-r;
lebar: calc (100VW #{$ thumb-w});
}Beberapa tweak yang lebih baik yang berkaitan dengan kursor dan itu sahaja!
Versi fancier ini (diilhamkan oleh laman web pemampat.io) adalah untuk meletakkan input dalam kad yang putaran 3D juga berubah apabila tetikus bergerak ke atasnya.
Kami juga boleh menggunakan gelangsar menegak. Ini sedikit lebih kompleks kerana cara penyemak imbas kami yang boleh dipercayai untuk mewujudkan slider menegak gaya tersuai adalah untuk memohon putaran pada mereka, tetapi ini juga akan memutar latar belakang. Apa yang kita lakukan ialah menetapkan nilai --P dan latar belakang ini pada bekas slider (tidak diputar), kemudian simpan input dan treknya sepenuhnya telus.
Ini dapat dilihat dalam tindakan dalam demo di bawah, di mana saya membalikkan gambar saya memamerkan hoodie Kreator yang dikasihi saya.
Kami sememangnya menggunakan radial-gradien () untuk kesan yang sejuk juga:
Latar Belakang:
Radial-Gradient (bulatan di var (-x, 50%) var (-y, 50%),
#000 calc (var (-card-r)-1px), #fff var (-card-r)) kotak sempadan,
$ img 50%/ cover;Dalam kes ini, kedudukan yang diberikan oleh sifat -sifat tersuai --x dan -dikira dari gerakan tetikus ke atas kad.
Kawasan terbalik latar belakang tidak semestinya perlu dicipta oleh kecerunan. Ia juga boleh menjadi kawasan di belakang teks tajuk, seperti yang ditunjukkan dalam artikel yang lebih lama ini mengenai teks yang berbeza terhadap imej latar belakang.
Teknik penggabungan untuk penyongsangan lebih kuat daripada menggunakan penapis dalam lebih dari satu cara. Ia juga membolehkan kita menggunakan kesan secara beransur -ansur sepanjang kecerunan. Sebagai contoh, bahagian kiri tidak terbalik sama sekali, tetapi kemudian kita maju ke kanan sepanjang jalan ke penyongsangan penuh.
Untuk memahami bagaimana untuk mendapatkan kesan ini, kita mesti terlebih dahulu memahami bagaimana untuk mendapatkan kesan invert (p), di mana P boleh menjadi nilai dalam selang [0%, 100%] (atau dalam selang [0, 1] jika kita menggunakan perwakilan perpuluhan).
Kaedah pertama, yang berfungsi untuk kedua -dua perbezaan dan pengecualian adalah menetapkan saluran alpha putih kami kepada p. Ini dapat dilihat dalam tindakan dalam demo di bawah, di mana menyeret gelangsar mengawal kemajuan invrsion:
Sekiranya anda tertanya -tanya tentang notasi HSL (0, 0%, 100% / 100%), ini kini merupakan cara yang sah untuk mewakili putih dengan alpha 1, menurut spec.
Tambahan pula, disebabkan oleh cara penapis: invert (p) berfungsi dalam kes umum (iaitu, skala setiap nilai saluran ke selang [min (p, q), max (p, q)]), di mana q adalah pelengkap p (atau q = 1 - p)
1 - (q ch · (p - q)) = = 1 - (1 - p ch · (p - (1 - p))) = = 1 - (1 - p ch · (2 · p - 1)) = = 1 - (1 - p 2 · ch · p - ch) = = 1 - 1 p - 2 · ch · p ch = = CH P - 2 · CH · P
Apa yang kita dapat ialah betul -betul formula untuk pengecualian di mana saluran lain adalah p! Oleh itu, kita boleh mendapatkan kesan yang sama seperti penapis: invert (p) untuk mana -mana p dalam selang [0%, 100%] dengan menggunakan mod campuran pengecualian apabila lapisan lain adalah RGB (P, P, P).
Ini bermakna kita boleh mempunyai penyongsangan secara beransur-ansur di sepanjang gradien linear () yang tidak ada dari penyongsangan di sepanjang tepi kiri, ke penyongsangan penuh di sepanjang tepi kanan), dengan yang berikut:
Latar Belakang:
URL (butterfly_blues.jpg) 50%/ penutup,
Linear-Gradient (90deg,
#000 / * bersamaan dengan RGB (0%, 0%, 0%) dan HSL (0, 0%, 0%) * /,
#FFF / * bersamaan dengan RGB (100%, 100%, 100%) dan HSL (0, 0%, 100%) * /);
Latar Belakang-Mod: Pengecualian;Perhatikan bahawa menggunakan kecerunan dari hitam ke putih untuk penyongsangan secara beransur -ansur hanya berfungsi dengan mod campuran pengecualian dan bukan dengan perbezaannya. Hasilnya yang dihasilkan oleh perbezaan dalam kes ini, memandangkan formulanya, adalah penyongsangan secara beransur -ansur pseudo yang tidak melalui kelabu 50% di tengah, tetapi melalui nilai RGB yang mempunyai setiap tiga saluran sifar di pelbagai titik di sepanjang kecerunan. Itulah sebabnya kontras kelihatan lebih kuat. Ia juga mungkin sedikit lebih artistik, tetapi itu bukan sesuatu yang saya layak untuk mempunyai pendapat.
Mempunyai tahap penyongsangan yang berbeza di latar belakang tidak semestinya perlu datang dari kecerunan hitam ke putih. Ia juga boleh datang dari imej hitam dan putih kerana kawasan hitam imej akan memelihara warna latar belakang, kawasan putih akan sepenuhnya membalikkannya dan kami akan mempunyai penyongsangan separa untuk segala-galanya di antara apabila menggunakan mod campuran pengecualian. Perbezaan sekali lagi akan memberi kita hasil duoton yang lebih tinggi.
Ini dapat dilihat dalam demo interaktif berikut di mana anda boleh mengubah warna latar belakang dan menyeret garis pemisahan antara hasil yang dihasilkan oleh dua mod campuran.
Idea asas di sini ialah kita mempunyai dua lapisan dengan hanya piksel hitam dan putih.
Mari kita pertimbangkan elemen dengan dua pseudos, masing -masing mempunyai latar belakang yang mengulangi kecerunan CSS dengan perhentian tajam:
$ D: 15EM;
$ u0: 10%;
$ u1: 20%;
div {
& :: sebelum ini, & :: selepas {
paparan: blok sebaris;
lebar: $ d;
ketinggian: $ d;
Latar Belakang: REPEATING-RADIAL-GRADIENT ( #000 0 $ u0, #FFF 0 2*$ u0);
Kandungan: '';
}
& :: selepas {
Latar Belakang: Ulang-Conic-Gradient ( #000 0% $ U1, #FFF 0% 2*$ u1);
}
}Bergantung pada penyemak imbas dan paparan, tepi antara hitam dan putih mungkin kelihatan bergerigi ... atau tidak.
Hanya untuk berada di sisi yang selamat, kita boleh tweak kecerunan kita untuk menyingkirkan isu ini dengan meninggalkan jarak kecil, $ e, antara hitam dan putih:
$ u0: 10%;
$ e0: 1px;
$ u1: 5%;
$ e1: .2%;
div {
& :: sebelum {
Latar Belakang:
mengulang-radial-gradien (
#000 0 calc ( #{$ u0} - #{$ e0}),
#fff $ u0 calc ( #{2*$ u0} - #{$ e0}),
#000 2*$ u0);
}
& :: selepas {
Latar Belakang:
mengulang-ke-gradien (
#000 0% $ u1 - $ e1,
#fff $ u1 2*$ u1 - $ e1,
#000 2*$ u1);
}
}Kemudian kita boleh meletakkannya di atas yang lain dan menetapkan mod campuran campuran untuk pengecualian atau perbezaan, kerana kedua-duanya menghasilkan hasil yang sama di sini.
div {
& :: sebelum ini, & :: selepas {
/ * Sama gaya lain tolak paparan yang berlebihan sekarang */
Kedudukan: Mutlak;
Mix-Blend-Mode: Pengecualian;
}
}Di mana pun lapisan atas hitam, hasil operasi pengadunan adalah sama dengan lapisan lain, sama ada itu hitam atau putih. Jadi, hitam di atas hitam menghasilkan hitam, manakala hitam di atas putih menghasilkan putih.
Di mana pun lapisan atas putih, hasil operasi pengadunan adalah sama dengan lapisan lain yang terbalik. Oleh itu, putih di atas hitam menghasilkan putih (hitam terbalik), manakala putih di atas putih menghasilkan hitam (terbalik putih).
Walau bagaimanapun, bergantung kepada penyemak imbas, hasil sebenar yang kita lihat mungkin kelihatan seperti yang dikehendaki (kromium) atau seperti :: Sebelum dicampur dengan latar belakang kelabu yang kami tetapkan pada badan dan kemudian hasilnya dicampur dengan :: selepas (Firefox, safari).
Cara kromium berkelakuan adalah pepijat, tetapi itulah hasil yang kita mahu. Dan kita boleh mendapatkannya di Firefox dan Safari juga, sama ada dengan menetapkan harta pengasingan untuk mengasingkan pada div induk (demo) atau dengan mengeluarkan perisytiharan mod campuran-mod dari :: sebelum ini (kerana ini akan memastikan operasi pengadunan di antaranya dan badan tetap normal lalai, yang bermaksud tidak ada campuran) dan hanya menetapkannya pada:: selepas demo).
Sudah tentu, kita juga boleh memudahkan perkara dan membuat dua lapisan dicampur menjadi lapisan latar belakang pada elemen dan bukannya pseudosnya. Ini juga bermakna beralih dari mod campuran-mod ke latar belakang-mod.
$ D: 15EM;
$ u0: 10%;
$ e0: 1px;
$ u1: 5%;
$ e1: .2%;
div {
lebar: $ d;
ketinggian: $ d;
Latar Belakang:
mengulang-radial-gradien (
#000 0 calc ( #{$ u0} - #{$ e0}),
#fff $ u0 calc ( #{2*$ u0} - #{$ e0}),
#000 2*$ u0),
mengulang-ke-gradien (
#000 0% $ u1 - $ e1,
#fff $ u1 2*$ u1 - $ e1,
#000 2*$ u1) ;;
Latar Belakang-Mod: Pengecualian;
}Ini memberi kita hasil visual yang sama, tetapi menghapuskan keperluan untuk unsur-unsur pseudo, menghapuskan kesan sampingan campuran campuran yang tidak diingini di Firefox dan Safari, dan mengurangkan jumlah CSS yang perlu kita tulis.
Idea asas ialah kita mempunyai adegan yang setengah hitam dan separuh putih, dan item putih bergerak dari satu sisi ke yang lain. Lapisan item dan lapisan adegan kemudian dicampur menggunakan perbezaan atau pengecualian (kedua -duanya menghasilkan hasil yang sama).
Apabila item itu, sebagai contoh, bola, cara paling mudah untuk mencapai hasil ini adalah dengan menggunakan gradien radial untuknya dan gradien linear untuk tempat kejadian dan kemudian menghidupkan kedudukan latar belakang untuk membuat bola berayun.
$ D: 15EM;
div {
lebar: $ d;
ketinggian: $ d;
Latar Belakang:
Radial-Gradient (bahagian paling dekat, #FFF Calc (100%-1px), telus)
0/25% 25% tidak berulang,
Linear-Gradient (90Deg, #000 50%, #FFF 0);
Latar Belakang-Mod: Pengecualian;
Animasi: MOV 2S Ease-In-Out Infinite Alternate;
}
@KeyFrames Mov {to {latar belakang-kedudukan: 100%; }}Kita juga boleh membuat :: Sebelum pseudo tempat kejadian dan :: Selepas item yang bergerak:
$ D: 15EM;
div {
paparan: grid;
lebar: $ d;
ketinggian: $ d;
& :: sebelum ini, & :: selepas {
grid-kawasan: 1/1;
Latar Belakang: Linear-Gradient (90Deg, #000 50%, #FFF 0);
Kandungan: '';
}
& :: selepas {
Tempat-diri: Pusat Mula;
Padding: 12.5%;
Radius sempadan: 50%;
Latar Belakang: #FFF;
Mix-Blend-Mode: Pengecualian;
Animasi: MOV 2S Ease-In-Out Infinite Alternate;
}
}
@KeyFrames Mov {to {transform: translate (300%); }}Ini mungkin kelihatan seperti kita terlalu rumit dengan memandangkan kita mendapat hasil visual yang sama, tetapi sebenarnya apa yang perlu kita lakukan jika item yang bergerak bukan hanya cakera, tetapi bentuk yang lebih kompleks, dan gerakan itu tidak hanya terhad kepada ayunan, tetapi ia juga mempunyai putaran dan komponen skala.
$ D: 15EM;
$ t: 1s;
div {
/ * sama seperti sebelum */
& :: selepas {
/ * sama seperti sebelum */
/* mencipta bentuk, tidak terperinci di sini sebagai
ia berada di luar skop artikel ini */
@include poly;
/ * animasi */
Animasi:
T $ t kemudahan alternatif tak terhingga,
r 2*$ t kemudahan yang tidak terhingga,
s .5*$ t mudah dalam alternatif tak terhingga;
}
}
@keyFrames t {to {translate: 300%}}
@keyframes r {
50% {berputar: .5turn; }
100% {berputar: 1Turn ;; }
}
@keyFrames s {to {scale: .75 1.25}}Perhatikan bahawa, sementara Safari kini telah menyertai Firefox dalam menyokong sifat transform individu yang kami animasi di sini, ini masih di belakang platform web eksperimen mempunyai bendera di Chrome (yang boleh didayakan dari Chrome: // bendera seperti yang ditunjukkan di bawah).
Kami tidak akan menjadi butiran mengenai "bagaimana" di belakang demo ini sebagai idea asas kesan pengadunan menggunakan pengecualian atau perbezaan adalah sama seperti sebelumnya dan bahagian geometri/animasi berada di luar skop artikel ini. Walau bagaimanapun, bagi setiap contoh di bawah, terdapat pautan ke demo codepen dalam kapsyen dan banyak pen ini juga datang dengan rakaman saya mengodkannya dari awal.
Berikut adalah animasi bar lintasan yang baru saya buat selepas lebah & bom gif:
Dan inilah animasi bulan gelung dari beberapa tahun yang lalu, juga dikodkan selepas lebah & bom gif:
Kami tidak semestinya terhad kepada hanya hitam dan putih. Menggunakan penapis kontras dengan nilai subuniter (penapis: kontras (.65) Dalam contoh di bawah) pada pembungkus, kita boleh menjadikan hitam menjadi kelabu gelap dan putih menjadi kelabu muda:
Berikut adalah satu lagi contoh teknik yang sama:
Jika kita mahu menjadikannya kelihatan seperti kita mempunyai kesan XOR antara bentuk hitam pada latar belakang putih, kita boleh menggunakan penapis: Invert (1) pada pembungkus bentuk, seperti dalam contoh di bawah:
Dan jika kita mahu sesuatu yang lebih ringan seperti bentuk kelabu gelap pada latar belakang kelabu muda, kita tidak pergi untuk penyongsangan penuh, tetapi hanya untuk sebahagiannya. Ini bermakna menggunakan nilai subuniter untuk penapis invert seperti dalam contoh di bawah di mana kita menggunakan penapis: Invert (.85):
Ia tidak semestinya harus menjadi seperti animasi gelung atau loading. Kita juga boleh mempunyai kesan XOR antara latar belakang elemen dan bingkai offsetnya. Sama seperti dalam contoh sebelumnya, kami menggunakan penyongsangan penapis CSS jika kita mahu latar belakang dan bingkai menjadi hitam dan persimpangan mereka menjadi putih.
Satu lagi contoh ialah mempunyai kesan XOR untuk melayang/ memfokuskan dan mengklik butang Tutup. Contoh di bawah menunjukkan kes -kes tema malam dan ringan:
Perkara -perkara boleh kelihatan sedikit sedih hanya dalam warna hitam dan putih, jadi ada beberapa perkara yang boleh kita lakukan untuk meletakkan kehidupan dalam demo sedemikian.
Taktik pertama adalah menggunakan penapis. Kita boleh bebas dari kekangan hitam dan putih dengan menggunakan sepia () selepas menurunkan kontras (kerana fungsi ini tidak mempunyai kesan ke atas hitam atau putih tulen). Pilih warna menggunakan hue-rotate () dan kemudian haluskan hasil dengan menggunakan kecerahan () dan tepu () atau kontras ().
Sebagai contoh, mengambil salah satu demo hitam dan putih sebelumnya, kita boleh mempunyai rantaian penapis berikut pada pembungkus:
Penapis: kontras (.65) / * putar hitam dan putih ke kelabu * / Sepia (1) / * Tint berwarna kuning-coklat retro * / Hue-rotate (215deg) / * Tukar warna dari kuning-coklat ke ungu * / Blur (.5px)/ * Jauhkan tepi daripada mendapatkan kasar/ bergerigi */ kontras (1.5) / * Meningkatkan ketepuan * / kecerahan (5) / * benar -benar mencerahkan latar belakang * / kontras (.75); / * Buat segitiga kurang terang (putar kotor putih terang) */
Untuk lebih banyak kawalan ke atas hasilnya, selalu ada pilihan untuk menggunakan penapis SVG.
Taktik kedua adalah untuk menambah lapisan lain, yang tidak hitam dan putih. Sebagai contoh, dalam demo pai radioaktif ini saya buat untuk cabaran codepen pertama Mac, saya menggunakan ungu :: Sebelum pseudo-elemen pada badan yang saya dicampur dengan pembungkus pai.
badan, div {paparan: grid; }
/ * menyusun semuanya dalam satu sel grid */
div, :: sebelum {grid-area: 1/1; }
body :: sebelum {latar belakang: #7a32ce; } / * lapisan ungu * /
/ * terpakai untuk kedua -dua kepingan pai dan pembalut */
Div {Mix-Blend-Mode: Exclusion; }
.a2d {latar belakang: #000; } / * pembungkus hitam * /
.pie {
Latar Belakang: / * Urutan pai putih saiz berubah * /
conic-gradient (dari calc (var (-p)*(90deg-.5*var (-sa))-1deg),
telus,
#fff 1deg calc (var (-sa) var (-q)*(1turn-var (-sa))),
calc telus (var (-sa) var (-q)*(1turn-var (-sa)) 1deg));
}Ini menjadikan pembungkus hitam ungu dan bahagian putih hijau (yang terbalik ungu).
Pilihan lain akan menggabungkan keseluruhan pembalut lagi dengan lapisan lain, kali ini menggunakan mod campuran yang berbeza dari perbezaan atau pengecualian. Melakukannya akan membolehkan kami lebih banyak mengawal hasilnya sehingga kami tidak terhad kepada pelengkap (seperti hitam dan putih, atau ungu dan hijau). Walau bagaimanapun, itu adalah sesuatu yang perlu kita sampaikan dalam artikel masa depan.
Akhirnya, terdapat pilihan untuk menggunakan perbezaan (dan bukan pengecualian) supaya kita mendapat hitam di mana dua lapisan yang sama (tidak semestinya putih) bertindih. Sebagai contoh, perbezaan antara karang dan karang sentiasa menjadi 0 pada ketiga -tiga saluran, yang bermaksud hitam. Ini bermakna kita boleh menyesuaikan demo seperti bingkai Offset dan XOR untuk mendapatkan hasil berikut:
Dengan beberapa sempadan telus dan keratan latar belakang yang betul, kita juga boleh membuat kerja ini untuk latar belakang kecerunan:
Begitu juga, kita juga boleh mempunyai imej dan bukan kecerunan!
Perhatikan bahawa ini bermakna kita juga perlu membalikkan latar belakang imej apabila kita membalikkan elemen dalam senario tema kedua. Tetapi itu tidak sepatutnya menjadi masalah, kerana dalam artikel ini kita juga belajar bagaimana untuk melakukan itu: dengan menetapkan warna latar belakang putih dan menggabungkan lapisan imej dengan menggunakan mod latar belakang-mod: pengecualian!
Hanya kedua -dua mod campuran ini boleh membantu kami mendapatkan beberapa hasil yang sangat sejuk tanpa menggunakan kanvas, SVG atau lapisan yang diduplikasi. Tetapi kami hampir tidak menggaru permukaan di sini. Dalam artikel masa depan, kami akan menyelam bagaimana mod campuran lain berfungsi dan apa yang dapat kami capai dengan mereka sahaja atau digabungkan dengan yang sebelumnya atau dengan kesan visual CSS lain seperti penapis. Dan percayalah, semakin banyak helah yang anda ada lengan anda, lebih sejuk hasil yang dapat anda capai!
Atas ialah kandungan terperinci Taming Modes Modes: `Perbezaan` dan` Pengecualian`. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Apakah yang berlaku apabila saya tidak dapat menyambung ke rangkaian?
connectionresetSolution
Bagaimana untuk mengoptimumkan satu halaman
Bagaimana untuk membeli dan menjual Bitcoin di Huobi.com
Bagaimana untuk menyelesaikan 500 ralat pelayan dalaman
tekan sebarang kekunci untuk memulakan semula
Bagaimana untuk melaksanakan fungsi paging jsp
Pengenalan kepada perisian pemodelan parametrik
Bagaimana untuk melaksanakan skrip shell
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
