Kui paned midagi – näiteks tavalise paberilehe – manillakausta, võib osa sellest asjast kaustast veidi välja piiluda. Samamoodi rahakoti ja krediitkaartidega. Kaardid torkavad veidi välja, nii et saate kiire pilgu, milliseid kaarte teil on.
Ma nimetan sellist asja "piluks". Pilu on koht, kus loome illusiooni avast, mille kaudu saame sealt välja piiluvat visuaalset elementi kiusata. Ja me saame seda teha CSS-is!
Kujunduse oluline osa on vari, mis annab visuaalse vihje pilu olemasolust. Seejärel on pilu kate, mis annab eksponeeritavale elemendile ruumi alt läbi piiluda.
Siin on see, mida me koos teeme:
Alustame varju loomisega
Võite olla üllatunud, et näites olev vari pole loodud tegeliku CSS-i varjuga, näiteks box-shadow või drop-shadow() filter. Selle asemel on vari omaette element, tume ja udune. See on oluline, et muuta disain paremini kohandatavaks nii vaike- kui ka animeeritud olekus.
Kate on kujunduse teine element. Kate on see, mida ma nimetan elemendiks, mis kattub varjuga. Siin on joonis, mis kujutab, kuidas vari ja kate kokku saavad.
Vari on tehtud väikesest püstisest ristkülikust, millel on gradient taust. Gradient on keskel tumedam. Nii et kui element on hägune, loob see keskelt tumedama varju; seega mõõtmelisem.
Nüüd on taasloodud varju vasak pool kaetud peal oleva ristkülikuga, mis on täpselt sama värvi kui selle konteineri taust.
Seejärel nihutatakse nii katet kui ka varju nii veidi vasakule, et see näib olevat kihiline
Töö kaanel
Selleks, et kaas sulanduks kujunduse taustaga, on selle taustavärv päritud seda sisaldavalt elemendilt. Teise võimalusena võite proovida katet taustaga segada, kasutades selliseid standardeid nagu CSS maskid ja segamisrežiimid, olenevalt teie disainivalikutest ja -nõuetest.
Nende standardite rakendamise põhitõdede õppimiseks võite vaadata neid artikleid: Sarah Drasner's „Maskeerimine vs. lõikamine: millal neid kasutada” annab maskidele suurepärase kruntvärvi. Olen kirjutanud ka CSS-i segamisrežiimidest selles artiklis kus saate teemat värskendada.
Minu näite lähtekoodis märkate, et joondasin ja virnastasin elemendid
CSS Grid võimaldab mul ka määrata kõik kolm divNii et nad on kõik täislaiuses
main > div {
grid-area: 1 / 1;
}Nii saab kõik üksteise peale laduda. Tavaliselt töötame kõvasti, et vältida elementide katmist ruudustiku teiste elementidega. Kuid see näide tugineb sellele. Olen andnud .slit-cover 50% laiusega, mis paljastab loomulikult selle all oleva pildi. Sealt seadsin a transform sellel, mis liigutab seda 50% negatiivses suunas, pluss väike kogus, mida ma varju varem nihutasin (25px), et ka see välja tuleks.
.slit-cover {
width: 50%;
transform: translatex(calc(-50% - 25px));
/* etc. */
}Ja siin see meil on! Päris loomuliku välimusega pilu, mis jäljendab kaustast, rahakotist või millest iganes välja piiluvat.
Selleks on rohkem võimalusi! Esiteks saab Flexbox panna elemendid ritta ja joondada niimoodi keskele. Asjade kõrvutamiseks on palju võimalusi. Ja võib-olla on teil võimalus seda kasutada box-shadow vara, drop-shadow() filter või isegi SVG filtrid et saada samasugune varjuefekt, mis müüb illusiooni.
Ja saate seda täielikult riffida, et saada oma välimust ja tunnet. Näiteks proovige varju ja pildi asukohta vahetada. Või mängige värvikombinatsioonidega ja muutke neid blur() filtreerida väärtus. Kaane ja varju kuju saab ka näpistada — Vean kihla, et saad sirge varju asemel luua kumera varju ja jagada seda meiega kommentaarides!
