# 92: Izgradnja pojedinačnih stranica galerije - CSS-trikovi

Anonim

Odavde ćemo raditi malo makete Photoshopa dok nastavljamo izrađivati ​​predložak za pojedinu stranicu galerije.

Prvo smo oblikovali veze Sljedeće i Prethodno. Nalaze se u apsolutno pozicioniranom okviru na traci galerije, kako bismo ih mogli usredsrediti na stranicu, unatoč ostalim gumbima i ostalim stvarima u baru. Oni pohađaju istu klasu kao i gumb Submit One, tako da tamo postoji postojanost.

Dalje imamo ovaj vrlo tanki lijevi stupac u kojem ćemo dobiti tekst. Započinjemo s 1/8 7/8 rešetkom, ali 1/8 je malo previše tanka. Mijenjamo ga u 1/4 3/4, ali to je previše. Tako je poput bajkovitog medvjedića 1/6 5/6 bio u pravu.

U tom uskom stupcu radimo neke tipografske radove, dodajući naslov (u

oznaka, naravno, jer je to najvažniji naslov na stranici), opis i drugi odjeljci. Većina tipografije jednostavno sjeda na svoje mjesto na temelju naše jednostavne i čvrste postavke tipografije.

Rešetka 5/6 je samo za sliku. Lijepo i veliko, što je super. Ima svijetlo sivu pozadinu, baš poput slika u blogovima (npr

).

Razmišljamo o tome da se malo zavolimo kako stiliziramo oznake. Razgledavamo CodePen (ovdje je veza do oznake "tags", META ALERT). Na kraju mislimo da je to pretjerano i ostavljamo ih kao normalne poveznice.

Gumb „pune veličine“ radimo na jedan od najjednostavnijih načina koje možemo, otvorimo novi prozor dimenzija slike pune veličine i prikazujemo sliku na njemu. To je poput modalne kutije s početka 2000-ih! Ali ja to volim. Jednostavno je, ne treba hrpa koda (kao što bi to trebao lightbox), a očito je i komunicirati s njim. Još je bolje ako mene pitate.