# 92: Yksittäisten galleriasivujen luominen - CSS-temppuja

Anonim

Meillä on vähän Photoshop-mallia toimiakseen täältä jatkaessamme mallipohjaa yksittäiselle galleriasivulle.

Ensinnäkin muotoilimme Seuraava- ja Edellinen-linkit. Ne ovat ehdottomasti sijoitettu laatikkopalkkipalkkiin, jotta voimme keskittää ne sivulle huolimatta muista baarissa olevista painikkeista. He ottavat saman luokan kuin Lähetä yksi -painike, joten siellä on pysyvyyttä.

Seuraavaksi meillä on tämä erittäin ohut vasen sarake, josta saat tekstiä. Aloitamme 1/8 7/8 -verkolla, mutta 1/8 on vain hieman liian ohut. Vaihdamme sen arvoon 1/4 3/4, mutta se on liikaa. Joten kuten taruinen vauvan karhu, 1/6 5/6 oli juuri oikea.

Teemme joitain typografiatöitä kapeassa sarakkeessa lisäämällä otsikkoon (

tietysti, koska se on sivun tärkein otsikko), kuvaus ja muut osiot. Suurin osa typografiasta vain paikoilleen perustuu yksinkertaiseen ja tukevaan typografia-asetukseemme.

5/6-ruudukko on kaikki kuvalle. Mukava ja iso, mikä on hienoa. Sillä on vaaleanharmaa tausta, aivan kuten kuvien blogikirjoituksissa (esim

).

Ajattelemme saada hieman hienoa siitä, miten tyylitämme tunnisteita. Katsomme ympärillämme CodePenissä (tässä on linkki “tagit” -tagiin, META ALERT). Loppujen lopuksi ajattelemme, että se on ylivoimaista, ja jätämme ne normaaliksi linkiksi.

Teemme "täysikokoinen" -painikkeen toimimaan yhdellä yksinkertaisimmilla tavoilla, jotka voimme mahdollisesti avata uuden ikkunan, joka on täysikokoisen kuvan kokoinen, ja näyttää kuvan siinä. Se on kuin 2000-luvun alun modaalilaatikko! Mutta pidän siitä. Se on yksinkertainen, se ei tarvitse joukkoa koodia (kuten lightbox tarvitsisi), ja on ilmeistä vuorovaikutuksessa. Se on vielä parempi, jos kysyt minulta.