Cum să faci un efect de „slit” de folder cu CSS

Când pui ceva - să zicem o foaie obișnuită de hârtie - într-un folder manila, o parte din acel lucru s-ar putea să iasă puțin din dosar. Același gen de lucru cu un portofel și carduri de credit. Cărțile ies doar o smidge, astfel încât să puteți vedea rapid ce cărți porți.

Eu numesc acest gen de lucruri o „fantă”. O fantă este locul în care creăm iluzia unei deschideri prin care putem tachina un element vizual care iese din ea. Și putem face asta în CSS!

Partea esențială a designului este umbra, care dă indiciul vizual al existenței unei fante. Apoi există capacul pentru fantă care oferă spațiu pentru ca elementul expus să se uite de dedesubt.

Iată ce vom face împreună:

Să începem cu crearea umbrei

S-ar putea să fii surprins că umbra din exemplu nu este creată cu o umbră CSS reală, cum ar fi box-shadow sau un drop-shadow() filtru. În schimb, umbra este un element separat în sine, întunecat și estompat. Acest lucru este important pentru a face designul mai adaptabil, atât în ​​starea implicită, cât și în cea animată.

Coperta este celălalt element al designului. Coperta este ceea ce eu numesc elementul care se suprapune umbra. Iată o figură care descrie modul în care umbra și acoperirea se unesc.

Umbra este realizată dintr-un mic dreptunghi vertical care are un fundal degradat. Gradientul este mai întunecat în mijloc. Deci, atunci când elementul este încețoșat, creează o umbră care este mai întunecată în mijloc; deci mai dimensional.

Acum, jumătatea stângă a umbrei recreate este acoperită cu un dreptunghi deasupra, colorat exact la fel ca fundalul recipientului său.

Atât capacul, cât și umbra sunt apoi mutate la stânga foarte ușor, astfel încât să pară stratificate

Se lucrează la coperta

Pentru ca coperta să se îmbine cu fundalul designului, culoarea de fundal este moștenită de la elementul care o conține. Alternativ, puteți încerca, de asemenea, să amestecați coperta cu fundal folosind standarde precum Măști CSS și moduri de amestecare, în funcție de alegerile și cerințele dvs. de design.

Pentru a afla câteva elemente de bază despre cum ar putea fi aplicate aceste standarde, puteți consulta aceste articole: Sarah Drasner's „Mascarea vs. tăierea: când să folosiți fiecare” oferă un primer excelent pentru măști. Am mai scris despre modurile de amestec CSS în acest articol unde poti perfectiona subiectul.

În codul sursă al exemplului meu, veți observa că am aliniat și stivuit elementele în interiorul

element folosind CSS Grid, care este un standard de aspect pe care îl folosesc adesea în demonstrațiile mele. Dacă recreați un design similar, utilizați o metodă de aspect care se potrivește cel mai bine aplicației dvs. pentru a alinia diferitele părți ale designului. În acest caz, am configurat o grilă cu o singură coloană pe

element care îmi permite să aliniez în centru coperta, umbra și imaginea.

Ceea ce îmi permite și CSS Grid să le fac este să le setez pe toate cele trei divs, astfel încât acestea sunt toate la lățime completă în

container:

main > div {
  grid-area: 1 / 1;
}

Acest lucru face ca totul să se stivuească unul peste altul. În mod normal, lucrăm din greu pentru a evita acoperirea elementelor cu alte elemente dintr-o grilă. Dar acest exemplu se bazează pe el. Am dat .slit-cover la lățime de 50%, ceea ce dezvăluie în mod natural imaginea de dedesubt. De acolo, am stabilit un transform pe ea care o deplasează cu 50% în direcția negativă, la care se adauga cantitatea mică pe care am mutat umbra mai devreme (25px) pentru a vă asigura că este dezvăluit, de asemenea.

.slit-cover {
  width: 50%;
  transform: translatex(calc(-50% - 25px));
  /* etc. */
}

Și iată-l avem! O fantă destul de naturală care imită ceva care iese cu ochiul dintr-un dosar, portofel sau orice altceva.

Există mai multe moduri de a face asta! În primul rând, Flexbox poate face ca elementele să se alinieze într-un rând și să se alinieze în centru astfel. Există o mulțime de moduri de a pune lucrurile unul lângă altul. Și poate aveți o modalitate de a folosi box-shadow proprietate, drop-shadow() filtru, sau chiar filtre SVG pentru a obține același tip de efect de umbră care vinde cu adevărat iluzia.

Și poți să-ți faci o discuție completă pentru a obține propriul aspect și senzație. De exemplu, încercați să schimbați poziția umbrei și a imaginii. Sau jucați-vă cu combinațiile de culori și schimbați blur() filtru valoare. Forma copertei și a umbrei pot fi, de asemenea, modificate — pun pariu că poți crea o umbră curbă în loc de una dreaptă și să o împărtășești cu noi în comentarii!