bygge en imødekommende, filterable portefølje med css3 drejninger,,,,,,, den iboende visuelle appel af filterable porteføljer (som tuts + hub) har gjort dem meget populær.i dag vil vi lave en ved hjælp af straight - forward avance, css3 og en lille smule af jquery.,,,, trin 1: filens struktur, vi vil bruge følgende dossier struktur for vores projekt, til et projekt, som er baseret på disse filer (du skal tage html5 kniv) og lad er i gang med en avance på http: //index.html.,, trin 2: http: //hoved, lad os holde tempoet højt og ikke ud fra en liste af ting, vi skal gøre for at skabe, < head >:, erklærer de medier, type og karakter af side., vores viewport bredde skal være den samme som den bredde og den oprindelige zoom - 1 (læs mere om det her, giver vores side en titel, vedlægges en favicon (interesseret i retina bevis favicons?)tillægger vores vigtigste stil status (stil. css), tillægger vores stil blad for håndtering af medier forespørgsler (media forespørgsler. css), link til den seneste udgave af jquery., tilføje en html5 kniv til håndtering af html5 forenelighed spørgsmål med gamle browsere.,, og her er, hvad vi får:, <!doctype html> <html lang="en"> \t<head> \t\t<meta http-equiv="content-type" content="text/html; charset=utf-8" /> \t\t<meta name="viewport" content="width=device-width, initial-scale=1.0"> \t\t<title>John Doe's Portfolio</title> \t\t<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"> \t\t<link rel="stylesheet" href="css/style.css" media="screen"> \t\t<link rel="stylesheet" href="css/media-queries.css" media="screen"> \t\t<script src="http://code.jquery.com/jquery-latest.min.js"></script> \t\t<script src="js/js.js"></script> \t\t<!- hvis det er [9] > < manuskript src = "js /html5shiv. er" > < /manuskript > <![endif] - > < /head >,, trin 3: http: //grundlæggende avance, i kroppen, vi tilføje en beholder til at holde alle elementer inden for en fastsat bredde centreret på den side.Within that we add (get ready for another rapid fire list):, ,A ,<header>, for our heading (‘John Doe’).,A basic navigation (,<nav>,) comprising a ,<ul>, menu, with five items, each with its respective ID.,A ,<section>, for the thumbnails with the class ‘work’.,A ,<footer>, with all the copyright stuff., , <body> \t<div class="container"> \t\t<header> \t\t\t<h1 class="title"> \t\t\t\tJohn Doe \t\t\t</h1> \t\t</header> \t\t<nav> \t\t\t<ul> \t\t\t\t<li id="all">All</li> \t\t\t\t<li id="web">Web</li> \t\t\t\t<li id="print">Print</li> \t\t\t\t<li id="illustration">Illustration</li> \t\t\t\t<li id="logo">Logo</li> \t\t\t</ul> < /nav > < afsnit klasse = "arbejde" > < /afsnit > < fod > & kopi; 2012 john doe.gyldig html5. < /fod > < /organ >,, trin 4: http: //tal, og det image, vi vil bruge den, < figur >, tag til vores thumbnails og vil anvende den klasse af den pågældende kategori, som det hører til.i tal, vil vi tilføje en, < en >, et omfattende billede (< img >,) med henblik på baggrund af virksomhed beskrevet og en beskrivelse liste (< dl >) for den post, < tal. klasse = "eksempel" > < en href = "#" > < img src = "billeder /1. men heller ikke dér er menneskene sikre" alat = "/> < dl > < /dl > < /a > < /figur >,, løntrin 5: http: //post (dl, dt, dd), som nævnt ovenfor, vi vil bruge en beskrivelse liste for vores legende.Our description terms (,<dt>,) will be our small headings — Client and Role, for our descriptions (,<dd>,) — Envato and Illustration, respectively., <figure class="illustration"> \t<a href="#"> \t\t<img src="images/1.png" alt="" /> \t\t<dl> \t\t\t<dt>Client</dt> \t\t\t\t<dd>Envato</dd> \t\t\t<dt>Role</dt> \t\t\t\t<dd>Illustration</dd>\t \t\t</dl> \t</a>\t </figure>, , Step 6: The Complete HTML,Here’s what our completed HTML markup looks like:, <!doctype html> <html lang="en"> \t<head> \t\t<meta http-equiv="content-type" content="text/html; charset=utf-8" /> \t\t<meta name="viewport" content="width=device-width, initial-scale=1.0"> \t\t<title>John Doe's Portfolio</title> \t\t<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"> \t\t<link rel="stylesheet" href="css/style.css" media="screen"> \t\t<link rel="stylesheet" href="css/media-queries.css" media="screen"> \t\t<script src="http://code.jquery.com/jquery-latest.min.js"></script> \t\t<script src="js/js.js"></script> \t\t<!- hvis det er [9] > < manuskript src = "js /html5shiv. er" > < /manuskript > <![endif]--> \t</head> \t<body> \t\t<div class="container"> \t\t\t<header> \t\t\t\t<h1 class="title"> \t\t\t\t\tJohn Doe \t\t\t\t</h1> \t\t\t</header> \t\t\t<nav> \t\t\t\t<ul> \t\t\t\t\t<li id="all">All</li> \t\t\t\t\t<li id="web">Web</li> \t\t\t\t\t<li id="print">Print</li> \t\t\t\t\t<li id="illustration">Illustration</li> \t\t\t\t\t<li id="logo">Logo</li> \t\t\t\t</ul> \t\t\t</nav> \t\t\t<section class="work"> \t\t\t\t<figure class="illustration"> \t\t\t\t\t<a href="#"> \t\t\t\t\t\t<img src="images/1.png" alt="" /> \t\t\t\t\t\t<dl> \t\t\t\t\t\t\t<dt>Client</dt> \t\t\t\t\t\t\t\t<dd>Envato</dd> \t\t\t\t\t\t\t<dt>Role</dt> \t\t\t\t\t\t\t\t<dd>Illustration</dd>\t \t\t\t\t\t\t</dl> \t\t\t\t\t</a>\t \t\t\t\t</figure>\t \t\t\t\t<figure class="print"> \t\t\t\t\t<a href="#"> \t\t\t\t\t\t<img src="images/2.png" alt="" /> \t\t\t\t\t\t<dl> \t\t\t\t\t\t\t<dt>Client</dt> \t\t\t\t\t\t\t\t<dd>Envato</dd> \t\t\t\t\t\t\t<dt>Role</dt> \t\t\t\t\t\t\t\t<dd>Print</dd>\t \t\t\t\t\t\t</dl> \t\t\t\t\t</a>\t \t\t\t\t</figure>\t \t\t\t\t<figure class="logo"> \t\t\t\t\t<a href="#"> \t\t\t\t\t\t<img src="images/3.png" alt="" /> \t\t\t\t\t\t<dl> \t\t\t\t\t\t\t<dt>Client</dt> \t\t\t\t\t\t\t\t<dd>Envato</dd> \t\t\t\t\t\t\t<dt>Role</dt> \t\t\t\t\t\t\t\t<dd>Logo</dd>\t \t\t\t\t\t\t</dl> \t\t\t\t\t</a>\t \t\t\t\t</figure>\t \t\t\t\t<figure class="web"> \t\t\t\t\t<a href="#"> \t\t\t\t\t\t<img src="images/4.png" alt="" /> \t\t\t\t\t\t<dl> \t\t\t\t\t\t\t<dt>Client</dt> \t\t\t\t\t\t\t\t<dd>Envato</dd> \t\t\t\t\t\t\t<dt>Role</dt> \t\t\t\t\t\t\t\t<dd>Web</dd>\t \t\t\t\t\t\t</dl> \t\t\t\t\t</a>\t \t\t\t\t</figure>\t \t\t\t\t<figure class="print"> \t\t\t\t\t<a href="#"> \t\t\t\t\t\t<img src="images/5.png" alt="" /> \t\t\t\t\t\t<dl> \t\t\t\t\t\t\t<dt>Client</dt> \t\t\t\t\t\t\t\t<dd>Envato</dd> \t\t\t\t\t\t\t<dt>Role</dt> \t\t\t\t\t\t\t\t<dd>Print</dd>\t \t\t\t\t\t\t</dl> \t\t\t\t\t</a>\t \t\t\t\t</figure>\t \t\t\t\t<figure class="web"> \t\t\t\t\t<a href="#"> \t\t\t\t\t\t<img src="images/6.png" alt="" /> \t\t\t\t\t\t<dl> \t\t\t\t\t\t\t<dt>Client</dt> \t\t\t\t\t\t\t\t<dd>Envato</dd> \t\t\t\t\t\t\t<dt>Role</dt> \t\t\t\t\t\t\t\t<dd>Web</dd>\t \t\t\t\t\t\t</dl> \t\t\t\t\t</a>\t \t\t\t\t</figure>\t \t\t\t\t<figure class="print"> \t\t\t\t\t<a href="#"> \t\t\t\t\t\t<img src="images/7.png" alt="" /> \t\t\t\t\t\t<dl> \t\t\t\t\t\t\t<dt>Client</dt> \t\t\t\t\t\t\t\t<dd>Envato</dd> \t\t\t\t\t\t\t<dt>Role</dt> \t\t\t\t\t\t\t\t<dd>Print</dd>\t \t\t\t\t\t\t</dl> \t\t\t\t\t</a>\t \t\t\t\t</figure>\t \t\t\t\t<figure class="web"> \t\t\t\t\t<a href="#"> \t\t\t\t\t\t<img src="images/8.png" alt="" /> \t\t\t\t\t\t<dl> \t\t\t\t\t\t\t<dt>Client</dt> \t\t\t\t\t\t\t\t<dd>Envato</dd> \t\t\t\t\t\t\t<dt>Role</dt> \t\t\t\t\t\t\t\t<dd>Web</dd>\t \t\t\t\t\t\t</dl> \t\t\t\t\t</a>\t \t\t\t\t</figure>\t \t\t\t\t<figure class="illustration"> \t\t\t\t\t<a href="#"> \t\t\t\t\t\t<img src="images/9.png" alt="" /> \t\t\t\t\t\t<dl> \t\t\t\t\t\t\t<dt>Client</dt> \t\t\t\t\t\t\t\t<dd>Envato</dd> \t\t\t\t\t\t\t<dt>Role</dt> \t\t\t\t\t\t\t\t<dd>Illustration</dd>\t \t\t\t\t\t\t</dl> \t\t\t\t\t</a>\t \t\t\t\t</figure>\t \t\t\t\t<figure class="print"> \t\t\t\t\t<a href="#"> \t\t\t\t\t\t<img src="images/10.png" alt="" /> \t\t\t\t\t\t<dl> \t\t\t\t\t\t\t<dt>Client</dt> \t\t\t\t\t\t\t\t<dd>Envato</dd> \t\t\t\t\t\t\t<dt>Role</dt> \t\t\t\t\t\t\t\t<dd>Print</dd>\t \t\t\t\t\t\t</dl> \t\t\t\t\t</a>\t \t\t\t\t</figure>\t\t \t\t\t\t<figure class="web"> \t\t\t\t\t<a href="#"> \t\t\t\t\t\t<img src="images/11.png" alt="" /> \t\t\t\t\t\t<dl> \t\t\t\t\t\t\t<dt>Client</dt> \t\t\t\t\t\t\t\t<dd>Envato</dd> \t\t\t\t\t\t\t<dt>Role</dt> \t\t\t\t\t\t\t\t<dd>Web</dd>\t \t\t\t\t\t\t</dl> \t\t\t\t\t</a>\t \t\t\t\t</figure>\t \t\t\t\t<figure class="logo"> \t\t\t\t\t<a href="#"> \t\t\t\t\t\t<img src="images/12.png" alt="" /> \t\t\t\t\t\t<dl> \t\t\t\t\t\t\t<dt>Client</dt> \t\t\t\t\t\t\t\t<dd>Envato</dd> \t\t\t\t\t\t\t<dt>Role</dt> \t\t\t\t\t\t\t\t<dd>Logo</dd>\t \t\t\t\t\t\t</dl> \t\t\t\t\t</a>\t \t\t\t\t</figure>\t \t\t\t\t<figure class="illustration"> \t\t\t\t\t<a href="#"> \t\t\t\t\t\t<img src="images/13.png" alt="" /> \t\t\t\t\t\t<dl> \t\t\t\t\t\t\t<dt>Client</dt> \t\t\t\t\t\t\t\t<dd>Envato</dd> \t\t\t\t\t\t\t<dt>Role</dt> \t\t\t\t\t\t\t\t<dd>Illustration</dd>\t \t\t\t\t\t\t</dl> \t\t\t\t\t</a>\t \t\t\t\t</figure>\t \t\t\t\t<figure class="web"> \t\t\t\t\t<a href="#"> \t\t\t\t\t\t<img src="images/14.png" alt="" /> \t\t\t\t\t\t<dl> \t\t\t\t\t\t\t<dt>Client</dt> \t\t\t\t\t\t\t\t<dd>Envato</dd> \t\t\t\t\t\t\t<dt>Role</dt> \t\t\t\t\t\t\t\t<dd>Web</dd>\t \t\t\t\t\t\t</dl> \t\t\t\t\t</a>\t \t\t\t\t</figure>\t \t\t\t\t<figure class="logo"> \t\t\t\t\t<a href="#"> \t\t\t\t\t\t<img src="images/15.png" alt="" /> \t\t\t\t\t\t<dl> \t\t\t\t\t\t\t<dt>Client</dt> \t\t\t\t\t\t\t\t<dd>Envato</dd> \t\t\t\t\t\t\t<dt>Role</dt> \t\t\t\t\t\t\t\t<dd>Logo</dd>\t \t\t\t\t\t\t</dl> \t\t\t\t\t</a>\t \t\t\t\t</figure>\t \t\t\t\t<figure class="print"> \t\t\t\t\t<a href="#"> \t\t\t\t\t\t<img src="images/16.png" alt="" /> \t\t\t\t\t\t<dl> \t\t\t\t\t\t\t<dt>Client</dt> \t\t\t\t\t\t\t\t<dd>Envato</dd> \t\t\t\t\t\t\t<dt>Role</dt> \t\t\t\t\t\t\t\t<dd>Print</dd>\t \t\t\t\t\t\t</dl> \t\t\t\t\t</a>\t \t\t\t\t</figure>\t \t\t\t</section> \t\t\t \t\t\t<footer>© 2012 John Doe. gyldig html5. < /fod > < /div > < /organ > < /html > lad os gå videre til style.,, trin 7: css udvælgelses - og scrollbar, begynder vi med at håndtere en legesyg elementer; udvælgelse og scrollbar (som er valgfrit) plus, vi kører i en skrifttyper, @ import url (http://fonts.googleapis.com/css?familie = åbne + sans: 400300); @ import url (http://fonts.googleapis.com/css?familie = pt + sans + snævre);:: udvælgelse (baggrund:ō, farve:&#fff;}: - webkit scrollbar (bredde: 9px;}: - webkit scrollbar spor {baggrund:&#eee grænse: tynd fast lightgray; rubrik skygge: 0px 0px 3px rgba (0, 0, 0 0, 1) indpresningsdybde;}: - webkit scrollbar tommelfinger {baggrund:ϧ, grænse: tynd fast gray.}, i ovennævnte kode importerede vi to webfonts fra google - sans og pt sans snævre.så vi bare en mørkegrå baggrund og en hvid tekst farve til brugervalgte. vi så en bredde på 9px for vores scrollbar (i webkit browsere) og gav den »spor« en lysegrå baggrund, en tynd grænse og en mild indpresningsdybde rubrik skygge.så gav vi en mørkegrå baggrund for scrollbar tommelfinger og tilføjede en tynd grænse til det.,, note: yderligere oplysninger om webkit scrollbars, se, chris coyier stilling.,, trin 8: css organ, vi giver vores krop en lysegrå støj baggrund og anvendelse "åben sans" font vi indførte tidligere.vi vil også gerne tilføje en rød øverste grænse for en forbedret finesse.,,, lav noget larm.organ (font familie: "åben" sans, uden serif; baggrund: url ("... /images /bg. gif '); polstring: 0; margen: 0; grænseoverskridende top: 10px fast d2e2c;}, trin 9: forskning i container, for vores container, vi sætter en bredden af 960px, en 10px øverste og nederste margen, og placerer det på side med højre og venstre margener, auto,".vi vil også tvinge hardware acceleration (nogle) mobile udstyr ved hjælp af ", - webkit omdanne: translatez (0),.,. container (bredde: 960px; margen: 10px auto - webkit omdanne: translatez (0)}, gå 10: css header, vi vil blot øge vores pos, skriftstørrelse, center teksten og give det en, skrifttype vægt af 300, for en sleeker se., header {tekst tilpasse: center; skrifttype vægt: 300; skriftstørrelsen: 700%}, trin 11: css fod, vil vi center bringe teksten horisontalt, tilføje højeste og laveste dumpingmargener, 50px hver, der er teksten farve grå og holdning, som det under" arbejde "med" klart, at begge,., - fods {tekst tilpasse: center, højde: 100px; linje højde: 100px; farve: grå, klart, at begge;}lad os arbejde på sejlads.,, trin 12: css navigation, begynder vi med at fjerne enhver misligholdelse på vej fra vores, < ul >,.så vil vi tilføje en 50px øverste og nederste margen og tilpasse teksten til midten., nav ul (liste stil: ingen; polstring: 0; margen: 50px 0; tekst tilpasse: center;}, ved hjælp af "display: overensstemmelse, får vi alle vores, < li >, er at vise i en linje.vi sætter markøren "point" og tilføje en 10px højre margen for hver enkelt < li >,.misligholdelse tekst farve, vil være en lys farve grå, der bliver sort på svæv. vi vil også tilføje en lille overgang til ret farveændringer., nav ul li (display: overensstemmelse; markør: point; margen: 10px; farve:ʚ overgangen: 0.3s; - webkit overgang. 0.3s; - moz overgang 0.3s; - o-transition: 0.3s; - ms overgang 0.3s;} nav ul li: svævning (farve:�}, siden den sidste, < li > er, hmm, det sidste barn, det behøver ikke nogen ret margen.så vi kan fjerne det, nav ul li: sidste barn (margen: 0}, lad os tilføje slår ud efter, < li >, s. vi vil opnå dette ved at bruge den, efter "pseudo - vælgeren.ved fastsættelsen af sine "indhold" til "/" farve til lys grå og en passende venstre margen, vi kan producere et enkelt, men effektivt system af link adskillelse.vi vil også sørge for, at det her ikke ændrer farve på den ved at tvinge deres misligholdelse farve, li: svæv,., nav ul li: efter {margen: 10px; indhold: "/"; farve:&#bbb;} nav ul li: svæv: efter (farve:&#bbb)} igen, vi er nødt til at fjerne de snit fra den sidste, < li >,., nav ul li: sidste barn: efter (indhold: "'}, det er alt for sejlads, lad os komme til thumbnails.,, css thumbnails, første trin 13: vi vil tilføje en 20px øverste og nederste margen til." arbejde ".,. arbejde (margen: 20px 0}, næste, vil vi stil hver, arbejde," (dvs. alle vores thumbnails).vi bruger, flyde: venstre, for at få dem stillet op.vi kan tilføje en 20px margen, fastsætte en højde og bredde af 200px, og tilføje en mild sepia virkning ved hjælp af ", - webkit filter: sepia (0, 4).så sætter vi den holdning, at forhold, så vi kan absolut position, andre elementer (den post i dette tilfælde) i tal.vi kan tilføje en mild, rubrik skygge, som også vil fungere som vores grænse.vi vil også gerne tilføje en lille overgang til vores kasser til at vokse og nedtone.,. figur {flyde: venstre margen: 20px; bredde: 200px. højde: 200px; baggrund: d2e2c; linje højde: 200px; - webkit filter: sepia (0, 4); position: relativ; polstring: 0!vigtige; rubrik skygge: 0 0 5px 0 rgba (0, 0 0, 0, 5); overgangen: 0.6s; - webkit overgang 0.6s; - moz overgang 0.6s; - o-transition: 0.6s; - ms overgang 0.6s;}, skal vi sikre, at vores billede passer altid den virksomhed beskrevet ved at fastsætte dens højde, og bredde på 100%, arbejde en img (højde: 100%; bredde: 100%}, det er alt for vores grundlæggende thumbnails.lad os arbejde på deres tekst nu. gå 14: css rubrikkerne, beskrivelse liste, som vi ikke ønsker, at vores overskrift for at være synlige i første omgang, vi sætter sine, uklarhed, til 0.så vil vi absolut position (i tal) og gøre det fylde det fuldt ud ved at alle 4 egenskaber - top,,,, bunden, og til venstre, - 0,. vil vi så fastlægge sin linje højde, at 2,5, og give den en mørk, gennemsigtig baggrund.da vi er ved hjælp af en mørk baggrund, vi sætter sin tekst farve hvid.vi vil også gerne tilføje en lille overgangsperiode animere sine uklarhed om, figur: svæv,.,. figur dl {uklarhed: 0. position: absolut; tilbage: 0: 0; nederst: 0; top: 0; polstring: 20px; margen: 0; linjehøjde: 2; baggrund: rgba (0, 0 0, 0, 8); farve: hvid; overgang 0.6s; - webkit overgang 0.6s; - moz overgang 0.6s; - o-transition: 0.6s; - ms overgang 0.6s;}, som vi ønsker, at det skal anføres på svæver på virksomhed beskrevet, vi sætter sine, uklarhed, 1, figur: svæv,.,. tal: den dl {uklarhed: 1}, beskrivelse, først skal vi fastsætte deres, skrifttype, familie, til pt sans snævre.for at få dem til at være lidt mindre end deres beskrivelser, vil vi fastsætte skriftstørrelsen, til 80%.så vil vi gøre vores beskrivelse vilkår (kunde og rolle) i store ved hjælp af "tekst omdanne: store".vi vil også skabe en negativ bunden margen at undgå uforholdsmæssigt store afstand mellem de vilkår og deres beskrivelser,.,. figur dl dt (tekst omdanne: store; skrifttype familie: pt sans snævre; skriftstørrelsen: 12px; margen nederst: - 16px;}, definition beskrivelser, vi har ikke brug for at gøre meget her. – vi sætter den margen, til 0.(som standard < dd >, har en lille venstre margen.). figur dl dd (margen: 0}, gå 15: css, nuværende, "/", ikke en aktuel, thumbnails,,. gældende, når thumbnails af visse kategori er givet,. nuværende, klasse (er), vi vil have dem til at vokse og få deres normale tone tilbage (dvs. fjern sepia).vi vil forcere dem op ved at anvende, ændre: skala (05), og dermed skære det til 1,05 gange den oprindelige størrelse på både x - og y - akse og fjerne sepia, vi havde lagt tidligere ved hjælp af ", - webkit filter: sepia (0),.,. nuværende {- webkit filter: sepia (0).vigtigt. - webkit omdanne: skala (05); - - ændre: skala (05); - o-transform: skala (05); - ms omdanne: skala (05) og omdanne: skala (05); - webkit backface synlighed: skjult, - - backface synlighed: skjult, - o-backface-visibility: skjulte, - fru backface synlighed: skjulte; backface synlighed: skjult.},,. ikke nuværende her, så gør vi det stik modsatte af, hvad vi gjorde,. nuværende, thumbnails - vi vil forcere dem ned til 75% af ", ændre: skala (75), og gøre dem sorte og hvide. ved", - webkit filter: grayscale (1),.,. ikke nuværende {- webkit omdanne: skala (75); - - ændre: skala (75); - o-transform: skala (75); - ms omdanne: skala (75); omdanne: skala (0.75); - webkit filter: grayscale (1).vigtige;},,. nuværende li, vil vi nøjes med at gøre teksten farve af den. nuværende li er sort.,. nuværende li (farve:�}, trin 16: komplet ccs, her er, hvad vores afsluttet css ligner: /* * /@ import. url (http://fonts.googleapis.com/css?familie = åbne + sans: 400300); @ import url (http://fonts.googleapis.com/css?familie = pt + sans + snævre);:: udvælgelse (baggrund:ō, farve:&#fff;}: - webkit scrollbar (bredde: 9px;}: - webkit scrollbar spor {baggrund:&#eee grænse: tynd fast lightgray; rubrik skygge: 0px 0px 3px rgba (0, 0, 0 0, 1) indpresningsdybde;}: - webkit scrollbar tommelfinger {baggrund:ϧ, grænse: tynd fast grå;} /* -------------------------- organ ----------------------------- * /organ {skrifttype familie: "åben" sans, uden serif; baggrund: url ("... /images /bg. gif '); polstring. 0; margen: 0, grænse top: 10px fast d2e2c;} /* -------------------------- beholder ----------------------------- * /. container (bredde: 960px; margen: 10px auto - webkit omdanne: translatez (0)} {tekst en- brug: ingen;} /* -------------------------- header ----------------------------- * /header {tekst tilpasse: center; skrifttype vægt: 300; skriftstørrelsen: 700%} /* -------------------------- fod ----------------------------- * /meter (tekst tilpasse: center, højde: 100px; linje højde: 100px; farve: grå, klart, at begge;} /* -------------------------- navigation ----------------------------- * /nav ul (liste stil: ingen; polstring: 0; margen: 50px 0; tekst tilpasse: center;} nav ul li (display: overensstemmelse; markør: point; margen: 10px; farve:ʚ overgangen: 0.3s; - webkit overgang 0.3s; - - overgang 0.3s; - o-transition: 0.3s; - ms overgang 0.3s;} nav - ul -li: sidste barn (margen: 0} nav ul li: svævning (farve:�} nav ul li: svæv: efter (farve:&#bbb;} nav ul li: efter {margen: 10px; indhold: "/"; farve:&#bbb;} nav ul li: sidste barn: efter (indhold: "';) /* -------------------------- vigtigste image rubrik ----------------------------- * /. arbejde (margen: 20px 0}. figur {flyde: venstre margen: 20px; bredde: 200px. højde: 200px; baggrund: d2e2c; linje højde: 200px; - webkit filter: sepia (4); position: relativ; polstring: 0.vigtige; rubrik skygge: 0 0 5px 0 rgba (0, 0 0, 0, 5); overgangen: 0.6s; - webkit overgang 0.6s; - moz overgang 0.6s; - o-transition: 0.6s; - ms overgang 0.6s;}. arbejde finder en img (højde: 100%; bredde: 100%.}. figur dl {uklarhed: 0. position: absolut; tilbage: 0: 0; nederst: 0; top: 0; polstring: 20px; margen: 0; linjehøjde: 2; baggrund: rgba (0, 0 0, 0, 8); farve: hvid; overgang 0.6s; - webkit overgang 0.6s; - moz overgang 0.6s; - o-transition: 0.6s; - ms overgang 0.6s;}. tal: den dl {uklarhed: 1}. figur dl dt (tekst omdanne: store; skrifttype familie: pt sans snævre; skriftstørrelsen: 12px; margen nederst: - 16px;}. figur dl dd (margen: 0}. nuværende li (farve:�}. nuværende {- webkit filter: sepia (0).vigtigt. - webkit omdanne: skala (05); - - ændre: skala (05); - o-transform: skala (05); - ms omdanne: skala (05) og omdanne: skala (05); - webkit backface synlighed: skjult, - - backface synlighed: skjult, - o-backface-visibility: skjulte, - fru backface synlighed: skjulte; backface synlighed: skjult.}. ikke nuværende {- webkit omdanne: skala (75); - - ændre: skala (75); - o-transform: skala (75); - ms omdanne: skala (75); omdanne: skala (75); - webkit filter: grayscale (1).vigtigt.}. ikke nuværende: svæv dl {uklarhed: 0.vigtige;}, lad os begynde på det nu, skridt 17: er den algoritme, her er hvad vi gør med vores javascript (i kronologisk rækkefølge):,, opdage, nav > li, presse. og omfanget af alle de thumbnails ved at give dem den. nuværende, klasse, tilføje,. nuværende li, klasse til de udvalgte kategori er tilsvarende, < li >,., fjernes, ikke kun fra de nuværende, klasse thumbnails af udvalgte kategori. tilføje,. nuværende, klasse til alle thumbnails af udvalgte kategori.,, her vil ske gennem, scaledown(), funktion og, 4 og 5 #,&#vil ske gennem, vis (kategori), funktion, gå 18: er de, scaledown(), funktion, idet den, removeclass, og addclass, metoder, skal vi fjerne nuværende, cl,.ud fra de elementer, der har det, og tilføje, ikke nuværende, klasse til dem alle.vi skal også fjerne den. nuværende li, klasse i, < li, som i øjeblikket har det., funktion scaledown() {$(. arbejde > figur). removeclass ('current '). addclass ('not-current) $('nav > ul > li'). removeclass ('current-li)}, skridt 19: er de, vis (kategori), funktion, denne funktion vil blive gennemført, hver gang en, < li >, er faldet.først skal vi kalde det, scaledown(), funktion at nedjustere alle thumbnails.så vil vi tilføje,. nuværende li, klasse i, < li, som svarer til de udvalgte kategori.skal vi så ændre den klasse af kategori er thumbnails fra. ikke nuværende,,. nuværende, vi havde gennemført, ikke nuværende, klasse til alle thumbnails i, scaledown(), funktion).endelig, hvis de udvalgte kategori er ",", skal vi fjerne dynamisk ekstra klasser (dvs. nuværende og. ikke nuværende) fra alle thumbnails.,, note: siden navn, id, (af, < li,) og klasse (i tal er) for hver kategori er den samme, vil vi blot henvise til, < li, som&#+ kategori, og det tal er som ".+ kategori,., funktion viser (kategori) (scaledown(). $('# + kategori). addclass ('current-li) $(. + kategori). removeclass ('not-current) $(. + kategori). addclass ('current'); hvis (kategori = = "alle") ($('nav > ul > li '). removeclass ('current-li) $('&#al '). addclass ('current-li) $(. arbejde > figur). removeclass ('current, ikke nuværende)), skridt, 20: er påvisning af kilometer og gennemføre, vis (kategori), funktion, og endelig ved, document.ready, metode, vil vi tilføje,. nuværende li, klasse, li #, og opdage, nav > li klik.vi vil så få, id, af klik < li, og gennemføre den, vis (kategori), funktion, når den kategori, vil være det. id, dvs. id af klik < li >,.So, for example, if the ,<li>, with the id ,#print, is clicked,show(‘print’), will be implemented., $(document).ready(function(){ \t$('#all').addClass('current-li'); \t$("nav > ul > li").click(function(){ \t\tshow(this.id); \t}); });,This completes our Javascript., , Step 21: The Complete JS,Our completed JS looks like this:, function scaleDown() { \t$('.work > figure').removeClass('current').addClass('not-current'); \t$('nav > ul > li').removeClass('current-li'); } function show(category) { \tscaleDown(); \t$('#' + category).addClass('current-li'); \t$('.' + category).removeClass('not-current'); \t$('.' + category).addClass('current'); \tif (category == "all") { \t\t$('nav > ul > li').removeclass ('current-li) $('# al'). addclass ('current-li) $(. arbejde > figur). removeclass ('current, ikke nuværende)}} $(dokument). klar (function() {$('# al'). addclass ('current-li "); $(" nav > ul > li "). klik (function() {(se dette. id)})}), nu hvor vores hjemmeside er fuldt funktionsdygtigt, lad os gøre det der, skridt 22: css gør det der, lad os åbne medier forespørgsler. css og komme af sted.hvordan du vælger at gennemføre deres medier, er helt op til dig.du foretrækker måske at have medier forespørgsler inden for deres vigtigste stylesheet, kan du selv foretrækker at have dem modulopbygget og i overensstemmelse med hver og stil erklæring - det er op til dig.stil ændringer, der kræves for hver grænse er beskrevet her. 965px eller derunder, fald i bredden af den beholder, 840px, mindske højde og bredde af thumbnails til 170px hver for at imødekomme 4 thumbnails i hver række [(170px + 40px) x 4 = 210px x 4 = 840px], /* små viewports - gamle monitorer, netbooks, tabletter (landskab). * /@ medier kun skærm og max bredde: 965px) {. container (bredde: 840px;}. figur (bredde: 170px. højde: 170px;}}, 860px eller derunder, fald i bredden af beholderen 720px, øge højde og bredde af thumbnails tilbage til 200px hver til at rumme 3 i hver række [(200px + 40px) x 3 = 240px x 3 = 720px], /* mindre viewports - flere tabletter, gamle overvågningsenheder* /@ medier kun skærm og max bredde: 860px) {. container (bredde: 720px;}. figur (bredde: 200px. højde: 200px;}}, 740px eller derunder, fald i bredden af den beholder, 600px, mindske forureningen af, ikke er gældende, til 50%. siden vi er hovedsagelig arbejder for mobilt udstyr nu), fald i den højde og bredde af thumbnails til 160px hver til at rumme 3 i hver række [(160px + 40px) x 3 = 200px x 3 = 600px], /* endnu mindre viewports - flere tabletter osv. * /@ medier kun skærm og (max bredde: 740px) {. container (bredde: 600px;}. figur (bredde: 160px. højde: 160px;}. ikke nuværende {uklarhed: 0, 5;}}, 610px eller derunder, fald i bredden af den beholder, 460px, fastsat tilp og den laveste margen for thumbnails til 20px og venstre og højre margen til at 60px, øge højde og bredde af thumbnails tilbage til 200px hver til at rumme 1 i hver række [(200px + 120px) x 1 = 320px x 1 = 320px], /* mobiltelefoner (landskab) og tabletter (portræt) * /@ medier kun skærm og max bredde: 610px) {. container (bredde: 460px;} header (skriftstørrelse: 400%} nav ul li {}. figur {margen: 40px; margen nederst: 60px;}. figur dl (højde: 40px; top: 200px; nederst: 0px;}}, 480px eller derunder, fald i bredden af den beholder, 320px, sæt den øverste og nederste margen for thumbnails til 20px og venstre og højre margen til at 60px, øge højde og bredde af fingersøm tilbage til 200px hver til at rumme 1 i hver række [(200px + 120px) x 1 = 320px x 1 = 320px], /* mobiltelefoner (portræt) * /@ medier kun skærm og max bredde: 480px) {. container (bredde: 320px;}. figur (bredde: 200px. højde: 200px; margen: 20px 60px;}},, om forenelighed, grundlæggende afskalning funktioner (css omdanner) fungerer perfekt i de fleste browsere, der omfatter:,, dvs. 9 + (anvendelse http://www.useragentman.com/ietransformstranslator/for lavere udgaver), firefox 14 + 21 +, krom, safari 1 +, filtereffekter (sepia - og grayscale) arbejde kun i webkit browsere.,, jsfiddles, jeg har lavet tre jsfiddles for dig at prøve og eksperimentere med:,, beskrive delt virkning (vertikale), dele af tekstenland (horisontale), diagonalt maskerede virksomhed beskrevet billeder, konklusion, det er det!vi har fået skabt et arbejde, filterable, og deres portefølje.jeg håber, du fandt det pædagogiske nyttige.tak for det!,
