Den iboende visuelle appellen av filtrerbare porteføljer (som Tuts + hub) har gjort dem svært populære. I dag skal vi lage en ved hjelp av straight-forward markup, CSS3 og litt jQuery.
Trinn 1: Filstrukturen
Vi bruker følgende filstruktur for prosjektet vårt:
Trekk et prosjekt sammen basert på disse filene (du må ta tak i HTML5 Shiv) og la oss komme i gang med HTML-oppslaget i index.html.
Trinn 2: HTML-hodet
La oss holde tempoet høyt og rattle av en liste over ting vi må gjøre for å opprette :
Erklære medietypen og tegnsettet på siden.
Sett visningsportens bredde for å være den samme som enhetens bredde og sett inn initial zoom til 1 (Les mer om dette her)
Gi vår side en tittel.
Fest en favicon (interessert i retina-proof favicons?)
Fest vårt hoved stilark (style.css)
Fest stilarket vårt for å behandle medieforespørsler (media-queries.css)
Link til den nyeste versjonen av jQuery.
Legg til en HTML5 Shiv for å håndtere HTML5-kompatibilitetsproblemer med gamle nettlesere.
Og her er hva vi får:
John Does portefølje
Trinn 3: HTML Basic Markup
I kroppen legger vi først en "container" for å holde alle elementene våre innenfor en angitt bredde, sentrert på siden. Innenfor det legger vi til (gjør deg klar for en annen rask brannliste):
EN for vår overskrift ('John Doe').
En grunnleggende navigasjon () omfattende a
meny, med fem elementer, hver med sin respektive ID.
EN for miniatyrbildene med klassen 'arbeid'.
EN med alle opphavsrettene.
John Doe
Trinn 4: HTML-bilde og bilde
Vi skal bruke tag for våre miniatyrbilder og vil bruke klassen av den respektive kategorien som den tilhører. Innenfor figuren legger vi til en tag som omfatter bildet () for bakgrunnen til miniatyrbildet og a beskrivelse liste (
) for bildeteksten.
Trinn 5: HTML-bildetekst (DL, DT, DD)
Som nevnt ovenfor bruker vi en beskrivelsesliste for bildeteksten vår. Våre beskrivelsesbetingelser () vil være våre små overskrifter - Klient og rolle, for våre beskrivelser () - Envato og Illustrasjon, henholdsvis.
Klient
Envato
rolle
Illustrasjon
Trinn 6: Den komplette HTML
Her ser det ut som vår fullførte HTML-oppslag ser ut som:
John Does portefølje
John Doe
Klient
Envato
rolle
Illustrasjon
Klient
Envato
rolle
Skrive ut
Klient
Envato
rolle
logo
Klient
Envato
rolle
web
Klient
Envato
rolle
Skrive ut
Klient
Envato
rolle
web
Klient
Envato
rolle
Skrive ut
Klient
Envato
rolle
web
Klient
Envato
rolle
Illustrasjon
Klient
Envato
rolle
Skrive ut
Klient
Envato
rolle
web
Klient
Envato
rolle
logo
Klient
Envato
rolle
Illustrasjon
Klient
Envato
rolle
web
Klient
Envato
rolle
logo
Klient
Envato
rolle
Skrive ut
La oss gå videre til stylingen nå.
Trinn 7: CSS-valg og rullegardin
Vi begynner med å håndtere noen lekende elementer; valgstatus og rullebjelke (som er helt valgfrie) pluss vi vil hente inn noen fonter.
I koden ovenfor importerte vi to webfonter fra Google - Open Sans og PT Sans Narrow. Deretter setter vi bare en mørk grå bakgrunn og en hvit tekstfarge for brukervalg.
Vi stiller da en bredde på 9px for rullebjelken vår (i Webkit-nettlesere) og ga sporet en lysegrå bakgrunn, en tynn kant og en mild innsatsboksskygge. Deretter ga vi en mørk grå bakgrunn til rullefeltet og la en tynn kant til den.
Merk: For mer informasjon om webkit-rullestenger, se Chris Coyiers innlegg.
Trinn 8: CSS Body
Vi gir kroppen vår en lys grå bakgrunn og bruker "Open Sans" -typen vi importerte tidligere. Vi legger også til en rød toppgrense for en forbedret finesse.
Nå, for vår container, setter vi en bredde på 960px, en topp og bunnmargin på 10px, og senter den på siden ved å sette høyre og venstre marginer til 'auto'. Vi vil også tvinge maskinvareakselerasjon på (noen) mobile enheter ved å bruke '-webkit-transform: translateZ (0);'.
Vi senterer juster teksten horisontalt, legger til topp- og bunnmarginaler på 50px hver, sett tekstfargen til grå, og plasser den under arbeidsområdet ved å bruke 'klare: begge deler'.
Vi begynner med å fjerne all standard styling fra vår
. Deretter legger vi til en topp og bunnmargin på 50px og justerer teksten til midten.
nav ul listestil: none; polstring: 0; margin: 50px 0; tekst-align: center;
Nå, ved å bruke 'skjerm: inline', får vi alle våre s som skal vises i en linje. Vi stiller markøren til «peker» og legger til en 10px høyre margin for hver . Standard tekstfargen vil være en lys gråton som vil bli svart på hover.
Vi legger også til en liten overgangstid for å animere fargeendringene.
nav ul li display: inline; markør: pointer; margin-høyre: 10px; farge: # 666; overgang: 0,3s; -webkit-overgang: 0,3s; -moz-overgang: 0,3s; -o-overgang: 0,3s; -ms-overgang: 0,3s; nav ul li: hover color: # 000;
Siden sist er, umm, siste barn, det trenger ikke noen rett margin. Så, vi fjerner den.
nav ul li: siste barn margin-right: 0;
La oss nå legge til skråstrekkene etter s. Vi oppnår dette ved å bruke ':etter'pseudo-velger. Ved å sette sin "innhold'til' / ', farger til lysegrå, og en passende venstre margin, kan vi produsere et enkelt, men effektivt system for koblingsseparering. Vi vil også sørge for at skråstrekene ikke endrer farge på hover ved å tvinge standardfargen sin på li: hover også.
nav ul li: etter margin-left: 10px; innhold: '/'; farge: #bbb; nav ul li: svever: etter farge: #bbb;
Igjen må vi fjerne skråstreket fra det siste .
nav ul li: siste barn: etter innhold: ";
Det er alt for navigasjonen, la oss komme til miniatyrbildene nå.
Trinn 13: CSS Miniatyrbilder
Først legger vi til en 20px topp- og bunnmargin til '.work' -delen.
.arbeid margin: 20px 0;
Deretter stiler vi hver '.arbeidsfigur'(dvs. alle våre miniatyrer). Vi bruker "flyte: venstre'for å få dem lined up. Vi legger da til en 20px-margin, angi en høyde og bredde på 200px, og legg til en mild sepia-effekt ved å bruke '-webkit-filter: sepia (0.4)'. Så setter vi inn stilling til slektning slik at vi kan absolutt posisjonere andre elementer (bildeteksten i dette tilfellet) i figur. Vi vil da legge til en mild box-shadow som også vil fungere som vår grense. Vi legger også til en liten overgangstid for at boksene våre skal vokse og skalere ned.
Vi sikrer at bildet vårt alltid passer til miniatyrbildet ved å sette høyde og bredde til 100%.
.Arbeidsfigurer a img høyde: 100%; bredde: 100%;
Det er alt for våre grunnleggende miniatyrer. La oss jobbe med bildetekster nå.
Trinn 14: CSS-bildetekster
Beskrivelse liste
Som vi ikke vil at vår bildetekst skal være synlig i utgangspunktet, setter vi det opasitet til 0. Da vil vi absolutt posisjonere det (innenfor figuren) og få det til å fylle figuren fullt ut ved å sette inn alle de 4 egenskapene - topp, Ikke sant, bunn, og venstre - til 0.
Vi vil da sette den linjehøyde til 2.5 og gi den en mørk, gjennomsiktig bakgrunn. Siden vi bruker en mørk bakgrunn, setter vi tekstfargene til hvite. Vi vil også legge til en liten overgangstid for å animere dens opasitet på figur: hover.
Som vi vil at den skal vises på sving på miniatyrbildet, setter vi det opasitet til 1 på figur: hover.
.arbeidsfigur: hover dl opacity: 1;
Beskrivelse Vilkår
Først skal vi sette deres font-family å 'PT Sans Narrow'. For å få dem til å virke litt mindre enn deres beskrivelser, setter vi deres skriftstørrelse til 80%. Deretter konverterer vi våre beskrivelsesbetingelser (klient og rolle) til store bokstaver ved hjelp av "text-transform: store bokstaver'. Vi stiller også en negativ bunnmargin for å unngå overdreven avstand mellom vilkårene og beskrivelsene deres.
.arbeidsfelt dl dt text-transform: store bokstaver; font-familie: 'PT Sans Narrow'; skriftstørrelse: 12px; margin-bunn: -16px;
Definisjon Beskrivelser
Vi trenger ikke å gjøre mye her - vi skal bare sette margin til 0. (Som standard, s har en liten venstre margin.)
Når miniatyrbildene i en bestemt kategori er gitt .nåværende klasse (gjennom JS), vi vil at de skal vokse og få sin normale tone tilbake (jeg fjerner sepiaen). Vi skaler dem opp ved å bruke 'transformere: skala (1.05)', og dermed skalere den til 1,05 ganger den opprinnelige størrelsen på både x- og y-aksene og fjern sepiaen vi hadde lagt til tidligere ved å bruke'-webkit-filter: sepia (0)'.
Her skal vi gjøre det motsatte av det vi gjorde med .nåværende miniatyrer - vi skaler dem ned til 75% ved å bruke 'transformere: skala (0,75)'og gjør dem svart og hvitt ved hjelp av'-webkit-filter: gråtoner (1)'.
Her er hva vi skal gjøre gjennom Javascript (i kronologisk rekkefølge):
oppdage nav> li trykk.
Skal ned alle miniatyrbildene ved å gi dem .ikke-strøm klasse.
Legg til .strøm-li klassen til den valgte kategorien er tilsvarende .
Fjern .ikke-strøm kun klasse fra miniatyrbildene til den valgte kategorien.
Legg til .nåværende klasse til alle miniatyrer av den valgte kategorien.
# 2 her vil bli gjort ved hjelp av nedskalere() funksjon og # 3, # 4 og # 5 vil bli gjort ved hjelp av Showet (kategori) funksjon.
Trinn 18: JS The nedskalere() Funksjon
Bruker removeClass og addClass metoder, fjerner vi .nåværende klasse fra elementene som har det og legg til .ikke-strøm klasse til dem alle. Vi fjerner også .strøm-li klasse fra noen som for tiden har det.
Denne funksjonen vil bli implementert hver gang en er klikket. Først vil vi ringe til nedskalere() funksjon for å skalere ned alle miniatyrbilder. Deretter legger vi til .strøm-li klasse til som tilsvarer den valgte kategorien. Vi endrer deretter klassen av kategorienes miniatyrbilder fra .ikke-strøm til .nåværende (vi hadde brukt .ikke-strøm klasse til alle miniatyrer i nedskalere() funksjon). Til slutt, hvis den valgte kategorien er 'alle', fjerner vi de dynamisk lagt klassene (dvs.. .nåværende og .ikke-strøm) fra alle miniatyrer.
Merk: Siden navnet på id (av ) og klasse (av figurs) i hver kategori er det samme, vi vil bare henvise til som '# + kategori' og figurs som '. + kategori'.
Trinn 20: JS Registrere klikk og Implementere Showet (kategori) Funksjon
Til slutt, gjennom document.ready metode, legger vi til .strøm-li klasse til li # alle og oppdage nav> li klikk. Vi får da id av den klikket og implementere Showet (kategori) funksjon hvor "kategori' vil være 'this.id'dvs. ID for den klikket . Så, for eksempel, hvis med id #skrive ut er klikket, vise ( 'print') vil bli implementert.
Nå som vår side er fullt funksjonell, la oss gjøre det lydhør.
Trinn 22: CSS Gjør det Responsive
La oss åpne "media-queries.css" og gå. Hvordan du velger å gjennomføre mediesøkene dine, er helt opp til deg. Du kan foretrekke å ha medieforespørsler i ditt hovedformatark, du kan til og med foretrekke å ha dem modulære og inline med hver stildeklarasjon - det er opp til deg!
Stilendringer som kreves for hvert bruddpunkt er beskrevet her.
965 px eller mindre
Reduser beholderens bredde til 840px
Reduser høyde og bredde på miniatyrbildene til 170px hver for å imøtekomme 4 miniatyrer i hver rad [(170px + 40px) x 4 = 210px x 4 = 840px]
/ * Small viewports - Gamle skjermer, netbooks, tabletter (landskap), etc. * / @media bare skjerm og (maks bredde: 965px) .container width: 840px; .work figur bredde: 170px; høyde: 170px;
860px eller mindre
Reduser beholderens bredde til 720px
Øk høyden og bredden på miniatyrbildene tilbake til 200px hver for å imøtekomme 3 i hver rad [(200px + 40px) x 3 = 240px x 3 = 720px]
/ * Mindre visningsporte - flere tabletter, gamle skjermer * / @media bare skjerm og (maksimal bredde: 860px) .container width: 720px; .work figur bredde: 200px; høyde: 200px;
740px eller mindre
Reduser beholderens bredde til 600px
Reduser opaciteten til .ikke-strøm til 50% (siden vi jobber hovedsakelig for mobile enheter nå)
Reduser høyde og bredde på miniatyrbildene til 160px hver for å imøtekomme 3 i hver rad [(160px + 40px) x 3 = 200px x 3 = 600px]
/ * Selv mindre visninger - flere tabletter, etc. * / @media bare skjerm og (maks bredde: 740px) .container width: 600px; .work figur bredde: 160px; høyde: 160px; .not-current opacity: 0.5;
610px eller mindre
Reduser beholderens bredde til 460px
Sett topp- og bunnmarginalen på miniatyrbildene til 20px og venstre og høyre margin til 60px
Øk høyden og bredden på miniatyrbildene tilbake til 200px hver for å imøtekomme 1 i hver rad [(200px + 120px) x 1 = 320px x 1 = 320px]
/ * Mobiltelefoner (Landskap) og Tablets (Portrett) * / @media bare skjerm og (maksimal bredde: 610px) .container width: 460px; header font-size: 400%; nav ul li .work figur margin-left: 40px; margin-bunn: 60px; .work figur dl høyde: 40px; topp: 200px; bunn: 0px;
480px eller mindre
Reduser beholderens bredde til 320px
Sett topp- og bunnmarginalen på miniatyrbildene til 20px og venstre og høyre margin til 60px
Øk høyden og bredden på miniatyrbildene tilbake til 200px hver for å imøtekomme 1 i hver rad [(200px + 120px) x 1 = 320px x 1 = 320px]
/ * Mobiltelefoner (Portrett) * / @media bare skjerm og (maksimal bredde: 480px) .container width: 320px; .work figur bredde: 200px; høyde: 200px; margin: 20px 60px;
Nettleserkompatibilitet
Grunnleggende skaleringsfunksjonalitet (CSS-transformasjoner) fungerer perfekt i de fleste større nettlesere, som inkluderer:
IE 9+ (bruk http://www.useragentman.com/IETransformsTranslator/ for lavere versjoner)
Firefox 14+
Chrome 21+
Safari 5.1+
Filtereffektene (sepia og gråtoner) fungerer bare i Webkit-nettlesere.
jsFiddles
Jeg har laget tre jsFiddles for deg å prøve og eksperimentere med:
Overskrift Split Effect (Vertikal)
Skrift Split Effect (Horisontal)
Diagonal maskerte miniatyrbilder
Konklusjon
Det er det! Vi har skapt en fungerende, filtrerbar og responsiv portefølje. Jeg håper du fant denne opplæringen nyttig. Takk for at du leste!
Share
Accentsconagua
