De inherente visuele aantrekkingskracht van filtreerbare portfolio's (zoals de Tuts + hub) heeft hen erg populair gemaakt. Vandaag zullen we er een maken met behulp van eenvoudige opmaak, CSS3 en een klein beetje jQuery.
Stap 1: de bestandsstructuur
We zullen de volgende bestandsstructuur gebruiken voor ons project:
Trek een project samen op basis van deze bestanden (u moet HTML5 Shiv pakken) en laten we aan de slag gaan met de HTML-markup in index.html.
Stap 2: HTML-kop
Laten we het tempo hoog houden en een lijst afronden van dingen die we moeten doen om het te creëren :
Declareer het mediatype en de tekenset van de pagina.
Stel de breedte van onze viewport in op de breedte van het apparaat en stel de eerste zoomlens in op 1 (Lees hier meer hierover)
Geef onze pagina een titel.
Een favicon bijvoegen (geïnteresseerd in retina-bestendige favicons?)
Voeg onze hoofdstijlpagina bij (style.css)
Voeg een stijlblad toe voor het afhandelen van mediaquery's (mediaqueries.css)
Link naar de nieuwste versie van jQuery.
Voeg een HTML5 Shiv toe voor het omgaan met HTML5-compatibiliteitsproblemen met oude browsers.
En hier is wat we krijgen:
Portfolio van John Doe
Stap 3: HTML Basic Markup
In het hoofdgedeelte voegen we eerst een 'container' toe om al onze elementen binnen een ingestelde breedte te houden, gecentreerd op de pagina. Daaraan voegen we toe (maak je klaar voor een nieuwe snelle vuurlijst):
EEN voor onze rubriek ('John Doe').
Een eenvoudige navigatie () bestaande uit een
menu, met vijf items, elk met zijn respectievelijke ID.
EEN voor de miniaturen met de klasse 'werk'.
EEN met alle copyright-dingen.
John Doe
Stap 4: HTML-figuur en afbeelding
We zullen de gebruiken tag voor onze miniaturen en past de klasse toe van de respectieve categorie waartoe het behoort. In de figuur voegen we een toe tag die de afbeelding bevat () voor de achtergrond van de miniatuur en a beschrijvingslijst (
) voor het bijschrift.
Stap 5: HTML-bijschrift (DL, DT, DD)
Zoals hierboven vermeld, gebruiken we een beschrijvingslijst voor onze bijschriften. Onze beschrijving termen () zullen onze kleine kopjes zijn - Klant en Rol, voor onze beschrijvingen () - Envato en Illustratie, respectievelijk.
Cliënt
Envato
Rol
Illustratie
Stap 6: De volledige HTML
Dit is wat onze voltooide HTML-opmaak eruit ziet als:
Portfolio van John Doe
John Doe
Cliënt
Envato
Rol
Illustratie
Cliënt
Envato
Rol
Afdrukken
Cliënt
Envato
Rol
Logo
Cliënt
Envato
Rol
Web
Cliënt
Envato
Rol
Afdrukken
Cliënt
Envato
Rol
Web
Cliënt
Envato
Rol
Afdrukken
Cliënt
Envato
Rol
Web
Cliënt
Envato
Rol
Illustratie
Cliënt
Envato
Rol
Afdrukken
Cliënt
Envato
Rol
Web
Cliënt
Envato
Rol
Logo
Cliënt
Envato
Rol
Illustratie
Cliënt
Envato
Rol
Web
Cliënt
Envato
Rol
Logo
Cliënt
Envato
Rol
Afdrukken
Laten we nu verder gaan met het stylen.
Stap 7: CSS-selectie en schuifbalk
We beginnen met het behandelen van enkele speelse elementen; de selectiestatus en de schuifbalk (die geheel optioneel zijn) plus enkele lettertypen.
In de bovenstaande code hebben we twee webfonts geïmporteerd uit Google: Open Sans en PT Sans Narrow. Vervolgens stellen we eenvoudig een donkergrijze achtergrond en een witte tekstkleur in voor gebruikersselecties.
We hebben toen een breedte van 9 px ingesteld voor onze schuifbalk (in Webkit-browsers) en gaven de 'track' een lichtgrijze achtergrond, een dunne rand en een milde tussenbak schaduw. Vervolgens gaven we de donkergrijze achtergrond een donkergrijze achtergrond en voegden er een dunne rand aan toe.
Notitie: Zie het bericht van Chris Coyier voor meer informatie over webkit-schuifbalken.
Stap 8: CSS-instantie
We geven ons lichaam een lichtgrijze achtergrond en passen het lettertype 'Open Sans' toe dat we eerder hebben geïmporteerd. We voegen ook een rode bovenrand toe voor een verbeterde finesse.
Voor onze container stellen we nu een breedte in van 960 px, een boven- en ondermarge van 10 px en centreren deze op de pagina door de rechter- en linkermarge in te stellen op 'auto'. We zullen ook hardwareversnelling forceren op (sommige) mobiele apparaten door '-webkit-transform: translateZ (0);'.
We centreren de tekst horizontaal, voegen de boven- en ondermarges toe van elk 50px, stellen de tekstkleur in op grijs en plaatsen deze onder het gedeelte 'werk' door 'beiden opschonen'.
We zullen beginnen met het verwijderen van alle standaard styling van onze
. Vervolgens voegen we een boven- en ondermarge van 50 px toe en lijnt de tekst uit met het midden.
nav ul list-style: none; opvulling: 0; marge: 50px 0; text-align: center;
Nu, met behulp van 'weergeven: inline', we zullen al onze krijgen s om op één regel weer te geven. We plaatsen de cursor op 'pointer' en voegen een rechtermarge van 10 px toe aan elke muisaanwijzer . De standaardtekstkleur is een lichte grijstint die bij zweven zwart wordt.
We voegen ook een korte overgangstijd toe om de kleurwijzigingen te animeren.
nav ul li display: inline; cursor: pointer; margin-right: 10px; kleur: # 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;
Sinds de laatste is, umm, het laatste kind, het heeft geen rechtermarge nodig. Dus we zullen het verwijderen.
nav ul li: last-child margin-right: 0;
Laten we nu de schuine streepjes na de s. We zullen dit bereiken door de ':na'pseudo-selector. Door zijn 'inhoud'naar' / ', kleur naar lichtgrijs en een geschikte linkermarge, kunnen we een eenvoudig maar effectief systeem van verbindingsscheiding produceren. We zorgen er ook voor dat de schuine strepen tijdens het zweven niet van kleur veranderen door hun standaardkleur aan te zetten li: hover te.
nav ul li: na margin-left: 10px; inhoud: '/'; kleur: #bbb; nav ul li: hover: after color: #bbb;
Nogmaals, we zullen de schuine streep van de laatste moeten verwijderen .
nav ul li: last-child: after content: ";
Dat is alles voor de navigatie. Laten we nu naar de miniaturen gaan.
Stap 13: CSS-miniaturen
Eerst voegen we een 20px boven- en ondermarge toe aan het gedeelte '.work'.
.werk marge: 20px 0;
Vervolgens stylen we elk '.werk figuur'(dus al onze miniaturen). We zullen gebruiken 'zweven: linksom ze in de rij te krijgen. We voegen dan een marge van 20px toe, stellen een hoogte en breedte in van 200px en voegen een mild sepia-effect toe met behulp van '-webkit-filter: sepia (0.4)'. Vervolgens stellen we de positie naar familielid zodat we absoluut andere elementen kunnen positioneren (het bijschrift in dit geval) binnen de figuur. We voegen dan een milde toe box-shadow welke ook als onze grens zal werken. We voegen ook een korte overgangstijd toe om onze vakken te laten groeien en verkleinen.
We zorgen ervoor dat onze afbeelding altijd op de miniatuur past door de hoogte en breedte in te stellen op 100%.
.werk figuur een img hoogte: 100%; breedte: 100%;
Dat is alles voor onze standaardminiaturen. Laten we nu aan hun bijschriften werken.
Stap 14: CSS-ondertitels
Beschrijving Lijst
Omdat we niet willen dat ons bijschrift in eerste instantie zichtbaar is, stellen we het in ondoorzichtigheid naar 0. Vervolgens plaatsen we het absoluut (binnen de figuur) en vullen we het figuur volledig aan door alle 4 eigenschappen in te stellen - top, rechts, bodem, en links - naar 0.
We zullen dan zijn lijnhoogte naar 2.5 en geef het een donkere, doorschijnende achtergrond. Omdat we een donkere achtergrond gebruiken, stellen we de tekstkleur in op wit. We voegen ook een korte overgangstijd toe om de transparantie van de animatie aan te zetten cijfer: hover.
Zoals we willen dat het op de miniatuur verschijnt, zullen we het instellen ondoorzichtigheid naar 1 op cijfer: hover.
.werkcijfer: hover dl opacity: 1;
Beschrijving Voorwaarden
Eerst stellen we ze in font-family naar 'PT Sans Narrow'. Om ze een beetje kleiner te maken dan hun beschrijvingen, stellen we ze in lettertypegrootte tot 80%. Vervolgens converteren we onze beschrijvingsvoorwaarden (klant en functie) in hoofdletters met 'text-transform: uppercase'. We stellen ook een negatieve ondermarge in om te grote afstand tussen de termen en hun beschrijvingen te voorkomen.
.werk figuur dl dt text-transform: hoofdletters; font-family: 'PT Sans Narrow'; lettergrootte: 12px; margin-bottom: -16px;
Definitie Beschrijvingen
We hoeven hier niet veel te doen - we zullen alleen de marge naar 0. (Standaard, s hebben een kleine linkermarge.)
.werk figuur dl dd margin-left: 0;
Stap 15: CSS 'stroom'/'niet actueel'Miniaturen
.stroom
Wanneer de miniaturen van een bepaalde categorie de .stroom klasse (via JS), we willen dat ze groeien en hun normale toon terugkrijgen (dat wil zeggen, verwijder de sepia). We schalen ze op met behulp van 'transformeren: schaal (1.05)', dus schaal het naar 1,05 keer de oorspronkelijke grootte op zowel de x- als de y-as en verwijder de sepia die we eerder hadden toegevoegd door'-webkit-filter: sepia (0)'.
Hier doen we precies het tegenovergestelde van wat we met de hebben gedaan .stroom miniaturen - we schalen ze tot 75% met behulp van 'transformeren: schaal (0,75)en maak ze zwart en wit met behulp van-webkit-filter: grijswaarden (1)'.
Dit is wat we gaan doen via ons Javascript (in chronologische volgorde):
opsporen nav> li druk op.
Verklein alle miniaturen door ze de .niet actueel klasse.
Voeg de toe .stroom-li klasse om overeen te komen met de geselecteerde categorie .
Verwijder de .niet actueel alleen klasse uit de miniaturen van de geselecteerde categorie.
Voeg de toe .stroom klasse voor alle miniaturen van de geselecteerde categorie.
# 2 hier zal worden gedaan met behulp van de scaleDown () functie en # 3, # 4 en # 5 zullen worden gedaan met behulp van de Show (categorie) functie.
Stap 18: JS The scaleDown () Functie
De ... gebruiken removeClass en addClass methoden, we zullen de .stroom class van de elementen die het hebben en voeg de .niet actueel klasse voor allemaal. We zullen ook de .stroom-li klasse van om het even welk welke heeft het op dit moment.
Deze functie wordt elke keer geïmplementeerd als een is geklikt. Eerst bellen we de scaleDown () functie om alle miniaturen te verkleinen. Vervolgens voegen we de .stroom-li klasse voor de die overeenkomt met de geselecteerde categorie. We zullen dan de klasse van de miniaturen van de categorie wijzigen van .niet actueel naar .stroom (we hadden de .niet actueel class voor alle miniaturen in de scaleDown () functie). Ten slotte, als de geselecteerde categorie is 'allemaal', zullen we de dynamisch toegevoegde klassen (d.w.z.. .stroom en .niet actueel) uit alle miniaturen.
Notitie: Sinds de naam van de ID kaart (van de ) en klasse (van de figuurs) van elke categorie is hetzelfde, we zullen eenvoudig verwijzen naar de als '# + categorie' en de figuurs als '. + categorie'.
Stap 20: JS Klikken detecteren en de Show (categorie) Functie
Eindelijk, via de document.ready methode, we zullen de .stroom-li les naar li # alle en detecteren nav> li klikken. We zullen dan de ID kaart van de aangeklikte en implementeer de Show (categorie) functie waar de 'categorie' zal zijn 'this.id'd.w.z. ID van de aangeklikte . Dus bijvoorbeeld als de met de id #afdrukken is geklikt, weer te geven ( 'print') zal worden geïmplementeerd.
Nu onze site volledig functioneel is, laten we hem responsive maken.
Stap 22: CSS Het responsiever maken
Laten we 'mediaqueries.css' openen en van start gaan. Hoe u ervoor kiest om uw mediaquery's te implementeren, is geheel aan u. Misschien hebt u liever mediaquery's binnen uw hoofdstijlblad, misschien wilt u ze zelfs modulair en inline bij elke stijlverklaring - het is aan u!
Veranderingen in de stijl vereist voor elk breekpunt worden hier beschreven.
965 px of minder
Verlaag de breedte van de container tot 840px
Verlaag de hoogte en breedte van de miniaturen tot 170px elk om plaats te bieden aan 4 miniaturen in elke rij [(170px + 40px) x 4 = 210px x 4 = 840px]
/ * Kleine viewports - Oude monitors, netbooks, tablets (liggend), etc. * / @media only screen en (max-width: 965px) .container width: 840px; .werk figuur width: 170px; hoogte: 170 px;
860 px of minder
Verlaag de breedte van de container tot 720px
Vergroot de hoogte en breedte van de miniaturen terug tot 200px elk om plaats te bieden aan 3 in elke rij [(200px + 40px) x 3 = 240px x 3 = 720px]
/ * Kleinere viewports - meer tablets, oude monitors * / @media only screen en (max-width: 860px) .container width: 720px; .work figure width: 200px; hoogte: 200 px;
740 px of minder
Verlaag de breedte van de container tot 600px
Verlaag de dekking van de .niet actueel tot 50% (aangezien we nu voornamelijk voor mobiele apparaten werken)
Verlaag de hoogte en breedte van de miniaturen tot 160px elk om plaats te bieden aan 3 in elke rij [(160px + 40px) x 3 = 200px x 3 = 600px]
/ * Nog kleinere viewports - meer tablets, etc. * / @media only screen en (max-width: 740px) .container width: 600px; .werk figuur breedte: 160px; hoogte: 160 px; .niet-huidige dekking: 0,5;
610 px of minder
Verlaag de breedte van de container tot 460px
Stel de bovenste en onderste marge van de miniaturen in op 20px en de linker- en rechtermarge op 60px
Vergroot de hoogte en breedte van de miniaturen terug tot 200px elk om plaats te bieden aan 1 in elke rij [(200px + 120px) x 1 = 320px x 1 = 320px]
/ * Mobiele telefoons (liggend) en tablets (staand) * / @media alleen scherm en (max. Breedte: 610px) .container width: 460px; header font-size: 400%; nav ul li .werk figuur margin-left: 40px; margin-bottom: 60px; .werk figuur dl hoogte: 40px; top: 200px; onderkant: 0px;
480 px of minder
Verlaag de breedte van de container tot 320px
Stel de bovenste en onderste marge van de miniaturen in op 20px en de linker- en rechtermarge op 60px
Vergroot de hoogte en breedte van de miniaturen terug tot 200px elk om plaats te bieden aan 1 in elke rij [(200px + 120px) x 1 = 320px x 1 = 320px]
/ * Mobiele telefoons (portret) * / @media alleen scherm en (max. Breedte: 480px) .container width: 320px; .work figure width: 200px; hoogte: 200 px; marge: 20px 60px;
Browsercompatibiliteit
De basisschaalfunctionaliteit (CSS-transformaties) werkt perfect in de meeste grote browsers, waaronder:
IE 9+ (gebruik http://www.useragentman.com/IETransformsTranslator/ voor lagere versies)
Firefox 14+
Chrome 21+
Safari 5.1+
De filtereffecten (sepia en grijswaarden) werken alleen in Webkit-browsers.
jsFiddles
Ik heb drie jsFiddles voor je gemaakt om uit te proberen en te experimenteren met:
Caption Split-effect (verticaal)
Caption Split-effect (horizontaal)
Diagonale gemaskeerde miniatuurafbeeldingen
Conclusie
Dat is het! We hebben met succes een werkende, filterbare en responsieve portfolio gemaakt. Ik hoop dat je deze tutorial nuttig hebt gevonden. Bedankt voor het lezen!
Share
Accentsconagua
