Sărim înainte doar puțin. Aceasta este o serie de screencast destul de cuprinzătoare, dar durează aproximativ 40 de ore și, desigur, acest proiect real seamănă mai degrabă cu câteva sute. În acest caz, saltul înainte a fost de a modela puțin două pagini. Parcurgem aceste schimbări la început.
Paginile din stânga și din dreapta au un nume de clasă comun și unul diferit. Acest lucru este foarte obișnuit, îl găsesc în multe scenarii diferite în designul web. În acest caz, paginile au același gradient și aceeași dimensiune. Dar diferă atunci când aplicăm o skew()transformare CSS3 . Acest lucru ne oferă un efect de „carte deschisă” cam îngrijit. Deoarece toate aceste efecte sunt create cu CSS, ele se scalează frumos (într-un mod în care o imagine aproape sigur nu ar face-o).
Aveam la dispoziție o soluție inteligentă la înălțimi egale, dar, din păcate, din cauza lucrurilor noastre inteligente de carte deschisă, aceasta se rupe. În schimb, folosim doar o notă de JavaScript.
Mai întâi, în timp ce ne uităm la JavaScript, scriem o linie care va ascunde oricare dintre „literele” care nu au copii. De exemplu, nu există selectoare care încep cu „Z”, dar avem o pagină publicată numită doar pentru a fi cuprinzătoare. Le descoperim (și apoi le ascundem) cu :has()selectorul ultra-util jQuery .
Pentru înălțimi egale, măsurăm ambele două coloane, decidem care este cea mai înaltă și apoi le setăm pe ambele la cea mai înaltă. Trebuie să folosim un setTimeout ușor hacky pentru ca acesta să funcționeze corect, deoarece încărcarea @ font-face durează puțin și afectează înălțimile. Am putea folosi în cele din urmă un fel de apel de apelare a încărcătorului de fonturi. (Sau ar putea fi exagerat).
Apoi trecem la pagini de almanah unic. Camionează rapid acum! Am făcut astfel de lucruri de atâtea ori acum, nu este de mirare că ne mișcăm mai repede. În esență, bătem acest șablon în formă în același mod în care am amenajat o singură postare de blog sau o pagină generică sau ceva de genul acesta.
Folosim o „bară neagră” pentru pesmet, cimentând acest model de design ca pe ceva ce îl vom folosi iar și iar pentru navigarea în secțiunea site-ului.