Share
I dag tar vi en PSD-porteføljelayout fra ThemeForest, og kopierer den helt i HTML og CSS, samtidig som den gjør den adaptiv. Vi vil da gå videre og integrere isotop-jQuery-pluginet for å gjøre det til en fullt funksjonell filtrerbar portefølje.
Vi starter med å lage en enkel prosjektstruktur slik at alt holdes organisert. Vi lager tre mapper:
Før vi sitter fast i kodingen, oppretter vi index.html-filen som kan plasseres i roten til prosjektet. Vi kaster inn en grunnleggende HTML5-mal, som kobler til vår CSS-fil i hode. I tillegg må vi koble til flere filer:
Hipstar Tutorial
Vi trenger nå noen generelle stiler i vår CSS-fil. Dette vil innebære bare en enkel tilbakestilling som du kan legge til toppen av CSS-filen din.
html, kropp, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, en, abbr, og, adresse, sitere, kode, del, DFN, em, img, ins, kbd, q, s, samp, liten, streik, sterk, sub, sup, tt, Var, b, u, i, dl, dt, dd, ol, ul, li, feltsett, form, etikett, legende, bord, bildetekst, tbody, TFOOT thead, st, th, td, artikkel, side, lerret, detaljer, embed, figur, figcaption, bunntekst, header, hgroup, meny, nav, utgang, rubin, seksjon, sammendrag, tid, mark, lyd, video, inngang, tekstfelt velg bakgrunn: gjennomsiktig; kant: 0; font-size: 100%; margin: 0; omriss: 0; padding: 0; vertical-align: baseline artikkel, bortsett detaljer, figcaption, figur, footer, header, hgroup, meny, nav, del display: block body linjehøyde: 1 abbr [tittel], dfn [title] border-bottom: 1px dotted; cursor: hjelpe formatering for blokksitat, q anføres: ingen innrykket tekst: før, innrykket tekst: etter, q: før, q: etter innhold: none del tekst-dekorasjon: linje-through hr bakgrunn: gjennomsiktig; kant: 0; klar: begge, farge: gjennomsiktig; høyde: 1 px; margin: 0; padding: 0 mark bakgrunnsfarge: # ffffb3; font-type: kursiv inngang velg vertikal-Justering: middel ins backgro und-farge: rød; farge: hvit; tekst-dekorasjon: ingen ol, ul listestil: ingen tabell grensekollaps: kollaps; grenseavstand: 0 a tekstdekorasjon: ingen;. klar klar : begge; display: block; høyde: 0; overløp: skjult; synlighet: skjult, bredde: 0 .clearfix: etter klar: begge, innhold: "; display: block; font-size: 0; høyde : 0; linjehøyde: 0; synlighet: skjult; bredde: 0 * html .clearfix,: første barn + html .clearfix zoom: 1
Nå begynner vi å bygge opp strukturen på nettstedet! Vi starter med overskriften og gjør det ved å bruke HTML5 Header-elementet.
Deretter legger vi til noen CSS for vår overskrift. Vi bruker noen grunnleggende stiler her, men det viktigste aspektet å ta hensyn til er plasseringen. Her bruker vi en posisjon av faste og deretter 0 på toppen, til venstre og høyre. Dette sikrer at toppteksten forblir øverst i vinduet når du ruller - og at den fyller hele høyden på nettleseren.
.header høyde: 69px; bakgrunn: url (... /images/header.png) gjenta; grensebunn: 1px solid #fff; -webkit-boks-skygge: 0 0 7px rgba (0,0,0, .25); -moz-boks-skygge: 0 0 7px rgba (0,0,0, .25); boks-skygge: 0 0 7px rgba (0,0,0, .25); stilling: fast; topp: 0; venstre: 0; høyre: 0; z-index: 101;
For enkelhets skyld vil begge deler bli utført ved hjelp av bilder, men vi vil også pakke dem inn i ankeretiketter og gi dem en klasse slik at vi kan sette noen stiler for posisjonering.
Begge disse bruker lignende styling, begge posisjoneres absolutt (toppteksten er foreldrene) med en 0 topp. Logoen har forlatt 0 for å holde den til venstre og leiet-meg-merket har en rett på 20px for å skyve den litt av fra høyre.
.logo posisjon: absolutt; topp: 0; venstre: 0; .hire-meg posisjon: absolutt; topp: 0; høyre: 20px;
Du bør ha noe som ser slik ut:
Igjen vil vi dra nytte av HTML5s oppslag og opprette sidebjelken ved hjelp av side element.
På CSS for sidebjelken vil du legge merke til at vi har brukt posisjonen fast igjen, teknisk sett gjelder dette ikke her da skyveknappen skal fylle høyden på siden.
.sidebar bredde: 149px; stilling: fast; top: 70 piksler; venstre: 0; bottom: 0; høyre: 0; z-indeks: 1; float: venstre; border-right: 1px solid # a13d36; margin-right: -1px; -webkit-boks-skygge: innsett -1px 0 0 # ff786b; -moz-box-shadow: insert -1px 0 0 # ff786b; boks-skygge: innspill -1px 0 0 # ff786b;
Du vil legge merke til at vi ikke har definert en bakgrunn ... Vi bruker sidebarbakgrunnen, men ikke til sidefeltet. Vi bruker den på kroppen og gjentar den på y-aksen, slik at den går fra topp til bunn. En posisjon av venstre Vil også brukes til å sikre at bakgrunnen er plassert på venstre side av siden for sidefeltet.
Å se ettersom dette er en kroppsstil, kan det være fornuftig å bla opp CSS-filen din og plassere den nærmere toppen. Jeg gikk også videre og la til en skriftlig jevnegenskap for webkit-nettlesere.
kropp bakgrunn: # f8faf4 url (... /images/sidebar_body.png) fast venstre repetisjon-y; -webkit-font-glatting: antialiased;
Vi har nå fullført basisen til sidelinjen!
Nå er sidebaret gjort, vi kan legge til navigasjonen til den. Vi lager en uordnet liste og pakker den sammen med HTML5 Nav-elementet.
Nå er noen grunnleggende styling for navigasjonen, legge til en bakgrunn, skrifttypestiler og også skrifttypefamilien fra Google Web Fonts - PT Sans.
nav.primary ul li a bakgrunn: url (... /images/nav.png) repeat-x center top; høyde: 39px; bredde: 149px; display: block; border-bottom: 1px solid # ba4b42; font-familie: 'PT Sans Narrow', Helvetica, Arial, sans-serif; font-size: 18 piksler; farge: #fff; text-indent: 20px; tekstskygge: 0 -1px 0 # BA1E1A; text-decoration: none; linje-høyde: 39px; nav.primary ul li a: hover color: # E9EBE5; bakgrunnsposisjon: midtbunn;
Vi må nå opprette en innpakningsbeholder som holder porteføljepostene. Også, vi må legge til noen marginer og paddinger for å sikre at oppføringene vises på riktig sted. Dette kan gjøres ved først å flytte hele elementet bort fra topptekst og sidebjelke.
Hvis vi ser på toppteksten som er 70px høy, trenger vi 70px margin-top. Sidebjelken er 150px bred, så vi bruker 150px margin-left. Den endelige tingen er 20px polstring på toppen og igjen for å skyve oppføringene vekk fra topptekst og sidebjelke.
.main polstring: 20px 20px 0; margin: 70px 0 0 150px;
Tid til å starte med porteføljens oppføringer. Gå videre og opprett en div med en klasse av portefølje innenfor vårt hovedområde, vil dette holde porteføljepostene våre sammen. Vår porteføljeoppføring består av en figur (igjen et HTML5-element) som brukes til å betegne en container for media av noe slag.
Vi vil da få et bilde med to spenner; en for båndet og en for svingeren. Du kan også bruke pseudo-elementer for disse, noe som vil lette oppmerkningen, men redusere sidens kompatibilitet på siden.
Styling for porteføljen er grunnleggende ting. Vi flyter til venstre og legger 20px av margen høyre og nederst. For å lage den hvite grensen legger vi ganske enkelt til noe polstring og deretter en bakgrunn, disse blir avrundet ved hjelp av en enkel grense-radius på 5px (mens du husker prefiksene). Endelig vil en boksskygge bli brukt.
.oppføring posisjon: relativ; float: venstre; margin-right: 20px; margin-bottom: 20 piksler; Markøren: pekeren; bakgrunn: #fff; padding: 10px; bredde: 440px; -webkit-border-radius: 5 px; -moz-border-radius: 5 px; border-radius: 5 px; -webkit-boks-skygge: 0 0 7px rgba (0,0,0, .1); -moz-boks-skygge: 0 0 7px rgba (0,0,0, .1); boks-skygge: 0 0 7px rgba (0,0,0, .1);
Når vi bruker 20px av margin til høyre for oppføringene, må vi trekke det fra foreldrebeholderen (porteføljens div).
.portefølje margin-right: -20px;
Vi opprettet båndmarkeringen når du legger til porteføljeposten (selv om du igjen har brukt et pseudo-element), må vi nå stile den ved hjelp av CSS.
.bånd bakgrunn: url (... /images/camera_ribbon.png) no-repeat; bredde: 31px; høyde: 47px; stilling: absolutt; top: -4px; høyre: 11px; z-indeks: 9999;
Den siste tingen å gjøre for porteføljen er å legge til sveverstaten. Dette vil bli oppnådd med det spekteret vi opprettet tidligere, alt vi trenger nå er styling. Vi bruker et bilde og en svart bakgrunn med en alfagasitet på 70%. Vi har også lagt til noen CSS3-overganger for å muliggjøre en jevn sveveffekt. Det siste er å legge til opacity: 1; for når du svinger over inngangen, som vil forsvinne i hoverdelen.
.hover bakgrunn: rgba (0,0,0, .7) url (... /images/hover.png) no-repeat center; stilling: absolutt; top: 10px; venstre: 10px; bunn: 13 piksler; høyre: 10px; opacity: 0; -webkit-overgang: alle .3s brukervennlige -moz-overgang: alle .3s lett-i-ut; -ms-overgang: alle .3s lett-i-ut; -o-overgang: alle .3s lett-i-ut; overgang: alle .3s lett-i-ut; .entry: hover .hover opacity: 1;
Nå er vårt porteføljeobjekt ferdig, du er fri til å legge til egen og endre bildene!
Nå som vi har kopiert PSD til en fungerende design, vil vi fortsette og gjøre den tilpasningsdyktig. Vi bruker ikke et rent fleksibelt rutenett, og derfor er det vi ikke praktiserer det vi praktiserer mottakelig. Vi bruker CSS3 Media Queries for å endre og redigere oppsettet når det er i forskjellige visningsmoduser. Vi bruker grove dimensjoner, og gir oss det som mer eller mindre kan oppfattes som Tablet Portrait Orientation, Tablet Landscape Orientation, Orientering for mobilportrett og endelig Mobile Landscape Orientation.
Før vi begynner å redigere oppsettet, må vi gjøre to ting. For det første må vi legge til metadag for visningsport, som gjør at nettstedet vårt kan vises korrekt på mobiler og nettbrett. Hvis du vil vite mer om dette, må du sjekke ut denne artikkelen av Ian Yates. Det siste er å legge til en kort bit av CSS for å tillate bildene våre til å være flytende:
img maksimal bredde: 100%;
Vi starter med å målrette tabletter med stående orientering. Det er bare nødvendig med en liten redigering for å tilpasse oppsettet. Den viktigste for å legge merke til er inngangen; Det blir gjort mindre for å imøtekomme flere oppføringer på hver linje.
@media bare skjerm og (min bredde: 768px) og (maksimal bredde: 959px) .content padding: 20px 0 0 20px; .entry width: 258px;
Vanligvis ville du ikke målrette landskapsretningen til en nettbrett, med mindre du virkelig trenger det, men på grunn av utformingen av denne siden vil det sikkert hjelpe oss. Vi vil ikke bruke min og maks bredder for å bestemme visningsportstørrelsen - vi målretter den mot orientering. Denne gangen bruker vi enda mindre kode ved ganske enkelt å endre bredden på porteføljens oppføring.
@media bare skjerm og (maksimal enhetbredde: 1024px) og (orientering: landskap) .entry bredde: 386px;
Vi beveger oss på mobiler nå, med utgangspunkt i stående orientering. Denne gangen må vi gjøre litt mer redigering. Vi skal justere oppsettet nå, på grunn av at skjermen blir mindre, er vi ikke lenger i stand til å få plass til sidelinjen til venstre med oppføringer til høyre. Vi flytter sidebjelken før oppføringene og har den fylt hele bredden på skjermen.
På grunn av at overskriften har en stor størrelse med sidebar / navigasjon under det, kan du kanskje ikke se så mange av oppføringene. Vi fjerner posisjon: fast og endre den til absolutte så overskriften vil nå bla i stedet for å holde seg øverst på siden.
@media bare skjerm og (maks bredde: 767px) kropp bakgrunnsbilde: ingen; .header posisjon: absolutt; float: venstre; bredde: 100%; .logo float: left; .hire-me float: right; #wrapper float: left; bredde: 100%; .sidebar bredde: 100%; stilling: i forhold; z-indeks: 1; float: venstre; border-right: 1px solid # a13d36; margin-right: -1px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; nav.primary li float: left; bredde: 100%; bakgrunn: url (... /images/sidebar.png); nav.primary ul li a bredde: 100%; nav.primary ul li a: aktiv, nav.primary ul li a.selected background: url (... /images/mobile_nav_active.png); .page float: left; bredde: 100%; .main float: left; polstring: 20px 20px 0; margin: 70px 0 0 0; .entry width: 260px;
Ok, nå har vi løpt inn i noen problemer. Sidebjelken har justert seg pent på skjermoppsettet, men porteføljeposter er posisjonert feil. Vi må gå tilbake til vårt oppslag og legge til to ekstra divs, en med et id for wrapper som vil pakke alt annet enn toppteksten og en annen med en klasseside som vil pakke inn hovedinnholdsområdet.
Etter å ha lagt til i nødvendig merking, må vi legge til noen stiler. Rull tilbake på toppen av CSS-filen din og legg til følgende:
#wrapper høyde: auto; margin: 0; flow: hidden; padding: 0; .page posisjon: relative; flow: hidden; top: 0px; margin: 0 px; padding: 0 px; border-left: 1px solid # a13d36;
Ok, endelig landskapsretningen for mobil. Hvis du plasserer dette etter det mobile portrett CSS vi nettopp har opprettet, vil det arve disse stilene, .g.g den komplette bredden sidebar etc. Alt vi trenger å gjøre nå, er å endre inngangsbredden.
@media bare skjerm og (min bredde: 480px) og (maks bredde: 767px) .entry bredde: 190px;
Nå har vi dekket å skape designet vi kan begynne å gi den litt funksjonalitet! Vi bruker den strålende isotopen plugin av David DeSandro. Isotop brukes til å lage oppsett, filtrering og sortering. Det brukes ofte på porteføljer for å filtrere arbeidsstykker i ulike kategorier - for eksempel Webdesign, fotografi og illustrasjon. På det notatet, la oss få det installert!
Før vi kan legge den til i vårt design, må vi laste den ned. Gå videre til http://isotope.metafizzy.co/jquery.isotope.min.js. Du vil nå se isotop-javascriptfilen, bare gå til Arkiv> Lagre og lagre den i js-mappen vi opprettet i begynnelsen. Vi må da koble til skriptet i HTML-filen din.
For å tillate at våre porteføljeposter blir filtrert, må vi endre merkingen vår igjen. Vi starter med navigasjonen som vil filtrere for oss. Isotop bruker spesifikt HTML5-tilpassede dataattributter data-filter = "". Vi setter en verdi avhengig av kategorien; Webdesign bruker .web (merk at vi må legge til en periode før kategoriverdien). Ankermerket for Alle kategorier bruker ikke .alle men det bruker en stjerne.
Den siste delen av filterprosessen er å redigere porteføljepostene. Etter å ha lagt til data-filteret verdier må du legge til de tilsvarende verdiene for hver oppføring. Hvis arbeidsoppføringen er i videokategorien, må du legge til en klasse med video. Vær oppmerksom på at hvis din data-filteret verdiene er små bokstaver, du må bruke små bokstaver for oppføringsklassene.
Det er på tide å aktivere isotop som vi skal gjøre i to deler. Først må vi koble den delen som vil sortere porteføljens oppføringer. Start med å opprette en ny fil kalt "custom.js" og legg den i js-mappen din.
Accentsconagua
$ window .load (function () var $ container = $ ('.portefølje'); $ container.isotope (filter: '*', animationOptions: duration: 750, easing: 'linear' falsk, ); ); Den andre delen vil koble navigasjonen for å tillate filtreringen til å skje.
$ window .load (function () var $ container = $ ('.portefølje'); $ container.isotope (filter: '*', animationOptions: duration: 750, easing: 'linear' false,); $ ('nav.primary ul a'). klikk (funksjon () varvelger = $ (dette) .attr ('datafilter'); $ container.isotope (filter: animationOptions: duration: 750, easing: 'lineær', kø: false,); return false;);); Vist i PSD er en aktiv tilstand for det gjeldende valgte navigasjonsanker. Vi må legge til noe mer markup, litt mer CSS og til slutt litt mer jQuery. Start med å gå tilbake til HTML-filen din og legge til class = "selected" til den første ankermerket.
Deretter må du legge til noe mer CSS, så legg til dette like under navigasjonsstilene.
nav.primary ul li a: aktiv, nav.primary ul li a.selected background: url (... /images/nav_active.png); border-bottom: 1px solid # 9e3f38;
Den endelige delen er noe jQuery, dette vil legge til klasser når du klikker for å vise den aktive knappen / kategorien.
var $ optionSets = $ ('nav.primary ul'), $ optionLinks = $ optionSets.find ('a'); $ optionLinks.click (funksjon () var $ this = $ (dette); // ikke fortsett hvis allerede valgt hvis ($ this.hasClass ('selected')) return false; var $ optionSet = $ dette .parents ('nav.primary ul'); $ optionSet.find ('.valgt'). removeClass ('valgt'); $ this.addClass ('valgt');); Hvis du går videre og klikker nav-knappene, ser du at filteret fungerer! Men vent, det er ikke en jevn overgang! Vel, det er fordi vi fortsatt må legge til noen CSS-overganger.
.isotop-element z-indeks: 2; .isotope-hidden.isotope-item pointer-events: none; z-indeks: 1; .isotope .isotope .isotop-item -webkit-overgangsperiode: 0.8s; -moz-overgangs-varighet: 0,8s; Overgangsperiode: 0.8s; .isotope -webkit-overgangseiendom: høyde, bredde; -moz-overgangseiendom: høyde, bredde; overgangseiendom: høyde, bredde; .isotope .isotop-item -webkit-transition-property: -webkit-transform, opacity; -moz-overgangsegenskap: -moz-transform, opacity; overgangseiendom: transformere, opacity;
Og der går vi, en annen nyttig opplæring ferdig! Du er fri til å bruke denne metoden i alle design du har. Gå og ha det gøy med det.
Jeg håper du likte denne opplæringen, takk for å lese!
