Share
De uniek ontworpen portfoliosite van Paul J Noble heeft veel mensen in het oog gekregen, en niet alleen klanten. Vandaag gaat hij de ontwerpfase van deze tutorial opvolgen en laten zien hoe deze is gecodeerd.
Voor deze zelfstudie wordt de uitstekende ROA (Zweden) -website gebruikt als een voorbeeld van een portfolio-item. Deze site is onlangs in Creattica opgenomen en de auteur is niet gelieerd aan ROA. Voel je vrij om je eigen werk als portfolio-items te gebruiken.
We gaan een online portfoliosite maken met een raster van afbeeldingen, een vaste header, tekst en interface-elementen. De mark-up wordt zodanig gestyled dat de inhoud past zonder te scrollen in bijna alle gebruikersweergaven en schaalt mooi naar grotere schermafmetingen terwijl het sierlijk valt met lagere resoluties. Het afbeeldingsraster geeft alleen het huidige actieve beeld weer en bevat nog veel meer verborgen afbeeldingen die kunnen worden bekeken via navigatie op paginaniveau.
Het maken van de HTML-sjabloon en CSS zal ons voorbereiden op het volgende deel van deze tutorial, waar we de interactielaag met Javascript zullen toevoegen en het ontwerp tot leven brengen.
Maak een nieuw html-document in de teksteditor van uw voorkeur. Voeg jQuery (1.4.2+) en een nieuw leeg CSS-bestand bij.
De eerste markup die we zullen maken, zal een div zijn die al onze inhoud bevat. We zullen later de minimale hoogte- en breedtewaarden voor deze div ('#page') instellen om ervoor te zorgen dat het ontwerp bij lage resoluties wordt geschaald. Maak wat meer divs voor de belangrijkste elementen van de hieronder geïllustreerde pagina.
Uw naam - digitale portfolio
Voor sites waar geen verticaal scrollen vereist is, is het vaak minder opdringerig om navigatie- en header-elementen onder aan het scherm te plaatsen. Hierdoor wordt extra ruimte vrijgemaakt bij de vaker bekeken ruimte bij de bovenkant van het venster. We willen dat dit element over de gehele breedte van het display van de gebruiker wordt uitgerekt en altijd onder aan het scherm wordt geplaatst.
Hoewel dit visueel onderaan het scherm wordt geplaatst, verschijnt het feitelijk bovenaan de opmaak van het document. We zullen een div maken met de ID 'header' en dan een geneste div met de klasse 'innerlijk'. Een binnenverpakking vereenvoudigt de positionering van de interne items.
In de verpakking maken we drie divs; '#logo', '#social' en '#nav'.
Voor het logo zullen we een afbeeldingsbestand met de naam 'images_26 / build-an-innovative-portfolio-site-using-alternative-uiux.png' nesten en een alternatieve tekst toevoegen. Maak het logo-afbeeldingsbestand door uw logo uit de PSD te knippen. Aangezien dit absoluut wordt gepositioneerd, is de exacte grootte niet van cruciaal belang - zorg er echter voor dat uw logo in de navigatiebalk in het ontwerp past.
Voor de sociale knoppen hebben we drie ankers nodig - één voor Facebook, Flickr en LinkedIn. Hierin worden achtergrondafbeeldingen toegepast als afbeeldingen, maar we gebruiken nog steeds tekst voor semantische doeleinden en verbergen dit met CSS. Voor deze externe links gebruiken we het kenmerk target = "_ blank" zodat de pagina's worden geopend in een nieuw tabblad of venster.
Voor de navigatie gebruiken we opnieuw drie ankers en kennen deze hun eigen klassen en id-waarden toe.
Vind mij op Facebook Bekijk mijn Flickr Vind mij op LinkedInOver Fotografie Werk
Onze grafische objecten voor de resterende items zijn niet zo eenvoudig als het logo. Omdat ze interactief zijn, hebben ze zweeftoestanden nodig en hebben de navigatieknoppen actieve statussen nodig.
Voor de navigatieknoppen maken we een afbeeldingssprite. Ga terug naar Photoshop en maak een selectie rond de knoppen in de PSD. Selecteer Bewerken> Samengevoegd kopiëren.
Selecteer vervolgens Bestand> Nieuw. Er verschijnt een dialoogvenster met de breedte en hoogte van de eerder geselecteerde rechthoek. Verander de hoogte naar 3 keer de standaardwaarde. Hiermee wordt een nieuw canvas gemaakt dat in drie versies van de navigatieafbeelding past, één voor elke vereiste staat; actief, zwevend en uit.
Beweeg nu de map met knoppen van de PSD en kloneer deze groep twee keer om drie groepen te maken. Pas de tekstkleuren enigszins aan zodat ze voor elke groep uniform zijn om de verschillende knoptoestanden te creëren. Hieronder ziet u een voorbeeld van een definitieve afbeelding. Sla de voltooide versie op als een PNG (24-bit) in 'img / icons / nav.png' en zorg ervoor dat de achtergrond transparant is.
Voor de sociale mediaknoppen hebben we slechts twee toestanden nodig ('zweven' en 'uit'). Herhaal het bovenstaande proces om een afbeeldingsjabloon voor een sociale mediatieknop te maken. Sla de afbeelding op als 'img / icons / social-media.png'.
Maak ten slotte een nieuwe afbeelding 'img / bg / header.png'.
Nu we de structuur en het beeldmateriaal hebben ontwikkeld, kunnen we een aantal CSS maken om deze pagina te gaan stylen.
Bovenaan het CSS-bestand zullen we een CSS-reset opnemen om ervoor te zorgen dat er geen browserspecifieke standaardwaarden zijn die onze lay-out verpesten.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acroniem, adres, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dd, ol, ul, li, fieldset, vorm, label, legenda margin: 0; opvulling: 0; rand: 0; overzicht: 0; tekengrootte: 100%; vertical-align: basislijn; achtergrond: transparant; body line-height: 1.2em; font-family: arial, sans-serif; ol, ul lijststijl: geen; blockquote, q quotes: none; blockquote: before, blockquote: after, q: before, q: after content: "; content: none;: focus outline: 0; ins text-decoration: none; del text-decoration: line -door;
Vervolgens maken we enkele basisstijlen voor de belangrijkste pagina-elementen.
body, html height: 100%; body background: # 0f1219; #page height: 100%; minimale hoogte: 700 px; positie: relatief; minimale breedte: 1100 px; overloop verborgen; h1, h2, p, li, div font-family: "arial", "helvetica", sans-serif; li font-size: 12px;
Vervolgens stylen we de koptekst. We gebruiken absolute positionering voor het logo en andere elementen voor eenvoudige controle over het ontwerp.
Notitie: we gaan onze ankers stijlen als blokniveau-elementen ('display: block') en met een negatieve text-insent om te zorgen voor toegankelijke maar grafisch gebaseerde elementen. De breedte en hoogte kunnen worden aangepast als de spritebestanden van uw afbeelding op maat verschillen in hun afmetingen.
Accentsconagua
#header background: url ('? /img/bg/header.png') herhalen; hoogte: 60 px; z-index: 1200; overloop verborgen; positie: absoluut; onderkant: 0; breedte: 100%; #logo positie: absoluut; top: 0px; links: 30px; #header .inner width: auto; opvulling: 0 30px; positie: relatief; hoogte: 70 px; #nav positie: absoluut; rechts: 30px; top: 14px; hoogte: 31 px; breedte: 290 px; #nav a background: url ('? /img/icons/nav.png') no-repeat 0 0; text-indent: -9999px; zweven: rechts; weergave: blok; overzicht: geen; hoogte: 31 px; Nu zullen we de individuele stijlen voor elke navigatieknop definiëren door de verschillende spritelocaties van de afbeelding toe te wijzen aan de klassen van elke knop.
#nav a.work width: 95px; #nav a.work:hover background-position: 0 -62px; #nav a.about width: 93px; background-position: -188px 0; #nav a.about: hover background-position: -188px -62px; #nav a.workActive width: 95px; achtergrond-positie: -0px -31px; cursor: standaard; #nav a.over Active width: 93px; achtergrond-positie: -188 px-31px; cursor: standaard; #nav a.photos width: 93px; achtergrond-positie: -95px 0; #nav a.photos:hover background-position: -95px -62px; #nav a.photosActive width: 93px; achtergrond-positie: -95px -31px; cursor: standaard;
Vervolgens doen we hetzelfde voor de sociale mediaknoppen.
#social width: 88px; hoogte: 26px; positie: absoluut; top: 17px; rechts: 330 px; #social a display: block; achtergrond: url ('? /img/icons/social-media.png') no-repeat 0 0; zweven: links; hoogte: 26px; breedte: 26px; overzicht: geen; zweven: links; margin-right: 4px; text-indent: -9999px; overloop verborgen; #social a.fb background-position: 0 0; #social a.fb: hover background-position: 0 -26px; #social a.flickr background-position: -30px 0; #social a .flickr: hover background-position: -30px -26px; #social a.linkedin background-position: -60px 0; margin-right: 0; #social a.linkedin: hover background-position: -60px -26px; OK, ververs nu de pagina en je zou iets moeten zien dat lijkt op de afbeelding hieronder. Beweeg uw cursor over de knoppen om de verschillende statussen te bekijken. Als er quirks in de zweeftoestanden voorkomen, past u de eigenschap background-position aan in uw CSS.
Probeer het formaat van uw browservenster te wijzigen om schermen met een lagere resolutie te simuleren. Schuifbalken moeten worden weergegeven als het venster lager is dan de min-height- en min-width-waarden die zijn gedefinieerd voor de divine '#page'.
We gaan een spot-lichteffect gebruiken om de visuele aandacht op het actieve beeld te richten, terwijl er wordt gesuggereerd naar de omliggende inhoud. Om een sterkere scheiding tussen achtergrond en voorgrond te creëren, passen we ook een subtiel textuurpatroon toe op de achtergrond.
Om dit te bereiken, moeten we wat mark-up toevoegen. Maak de volgende nieuwe divs die zijn genest in de div '#main'.
Laten we eerst de schijnwerpersafbeelding maken ('images_26 / build-an-innovative-portfolio-site-using-alternative-uiux_2.png') die de galerij overlapt. Ga terug naar Photoshop en selecteer de laag in de 'vignette'-groep. Ga naar Selecteren> Alles en kopieer de geselecteerde regio. Maak een nieuw document aan (het moet minimaal 1400 x 900 zijn) en plak het klembord in het canvas.
Nu moeten we een aantal aanpassingen aan onze afbeelding aanbrengen. Breid eerst de canvasgrootte uit, zodat deze aan de bovenkant 100 pixels hoger is.
Breid vervolgens de linkerrand met 50 pixels uit.
Breid tot slot de onder- en rechterranden uit, zodat de totale canvasgrootte 1600 x 1600 is.
Neem nu de bucket-tool en met anti-aliasing 'off' en tolerantie ingesteld op '0', vult u het transparante gebied rond de randen met de achtergrondkleur van de pagina (# 0f1219). Het uiteindelijke resultaat moet er ongeveer zo uitzien als de afbeelding hieronder.
Selecteer Bestand> Opslaan voor web en sla deze afbeelding op als een 24-bits PNG ('images_26 / build-an-innovative-portfolio-site-using-alternative-uiux_2.png') met geactiveerde transparantie.
Keer nu terug naar onze oorspronkelijke bronafbeelding en selecteer de laag Patroonvulling 1 (dit is de laag met diagonale lijnen). Klik met de rechtermuisknop en selecteer 'Laag rasteriseren'. Zoom vervolgens in dichtbij en selecteer een gebied van de laag zoals hieronder. Kopieer dit (alleen de regels - kopieer de achtergrond niet) en plak in een nieuw document. Opslaan voor web, opnieuw een 24-bits PNG met transparantie met het pad 'img / bg / lines.png'.
Laten we nu de CSS toevoegen die onze nieuwe afbeeldingen zal integreren?
#horizon min-height: 700px; breedte: 100%; overloop verborgen; #main background: # 0f1219; breedte: 1300px; marge: automatisch; marge-top: -190 px; hoogte: 1000 pixels; overloop verborgen; positie: relatief; #main .inner width: 9000px; hoogte: 9000px; overloop verborgen; positie: absoluut; boven: 0; links: 0; .glowBg background: # 282d3f; hoogte: 100%; breedte: 100%; positie: absoluut; #glowTexture background: url ('? /img/bg/lines.png') herhalen; hoogte: 900 px; breedte: 1300px; positie: absoluut; boven: 0; links: 0; #glowShadow height: 1600px; positie: absoluut; breedte: 1500 px; top: 00px; overloop verborgen; z-index: 200; #glowShadow img display: block; position: relative; links: -100px; Sla op, vernieuw en je ziet nu de achtergrondkleur, textuur en schijnwerpers. Vervolgens beginnen we enkele afbeeldingen toe te voegen.
Voor de galerijafbeeldingen plaatsen we afbeeldingen per project in kolommen. Bij elk project kunnen meerdere afbeeldingen verticaal worden gerangschikt. Verschillende projecten zijn toegankelijk door de kolommen zijwaarts te verplaatsen.
Maak een nieuwe afbeelding 640x480 en plak een momentopname van een website of een deel van een werk dat je wilt weergeven. De donkere stijl van dit ontwerp werkt meestal het beste bij afbeeldingen die overwegend een lichte achtergrond hebben.
Om te beginnen voegen we wat mark-up toe.
U zult merken dat we een aantal inline stijlen op de tags hebben toegevoegd. Dit simuleert wat onze interactielaag later automatisch zal toepassen (we zullen zien hoe dit in het volgende deel van deze tutorial wordt gedaan). Voorlopig zullen we de stijlen echter moeilijk coderen. Opmerking: het opaciteitkenmerk werkt niet in Internet Explorer 8 en lager.
Voeg de volgende CSS toe voor de galerijafbeeldingen:
#gallery left: 285px; positie: absoluut; breedte: 100%; hoogte: 900 px; #gallery .col position: absolute; top: 80px; breedte: 640 px; .item height: 480px; breedte: 640 px; achtergrond: # 181a22; positie: absoluut; marge: automatisch; top: 320px; z-index: 100; overloop verborgen;
De belangrijkste eigenschap hier is de absolute positionering van de kolommen (dit zijn de divs met de klasse 'col'). Met absolute positionering kunnen we elke kolom onafhankelijk van elkaar verplaatsen of alle kolommen synchroon verplaatsen, waardoor we door het raster van afbeeldingen kunnen navigeren zodra de interactielaag is toegepast.
Ververs de pagina en je zou nu de galerij met afbeeldingen moeten zien. U zult echter opmerken dat de galerij statisch statisch is gepositioneerd. Idealiter willen we dat de inhoud zich centreert, afhankelijk van de venstergrootte. Om dit te bereiken, moeten we een beetje scripting toevoegen.
Maak een nieuwe scripttag vlak voor de afsluitende body-tag en voeg de volgende code in:
Zorg ervoor dat jQuery is toegevoegd aan de paginakoptekst anders zal dit script niet werken.
Dit script doet een paar dingen. De functie arrange () detecteert de vensterhoogte en past vervolgens de CSS-eigenschappen van de '# main'-elementen aan om de content verticaal te centreren. Dit gebeurt in gevallen waarin het venster van de gebruiker groter is dan 760 pixels hoog (zie voorwaardelijk op regel 541), voor raamhoogten lager dan dit worden de standaard CSS-eigenschappen toegepast. De $ (window) .resize () listener (regel 25) roept de adjust () -functie aan wanneer het venster van de gebruiker wordt aangepast.
In dit stadium zullen we wat tekstuele content toevoegen met betrekking tot het actieve project. Hiervoor hebben we een titel, een subtitel en een alinea van de tekst nodig om het actieve project uit te werken.
Voeg de volgende mark-up toe aan de '#leftCol' div:
Demoproject
WEBSITE 2011
Demoproject
WEBSITE 2011
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing. Etiam neque augue, tristique eget malesuada et, luctus sed felis. In dignissim lacus eu justo tempus ut tincidunt nisi dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing.
Link naar project hier
Natuurlijk, als je een echt werk gebruikt dat je hebt gedaan, gebruik dan gerust koppen en lichaamstekst die je werk nauwkeurig beschrijven.
Nu stylen we deze inhoud met wat extra CSS:
#leftCol padding-top: 30px; breedte: 200 px; hoogte: 480 px; links: 30px; positie: absoluut; z-index: 10001; top: 270 px; #projectInfo top: 50px; positie: absoluut; hoogte: 350 px; breedte: 200 px; #leftCol h1 color: #fff; tekengrootte: 28 px; margin-bottom: 6px; top: 50px; font-gewicht: 300; regelhoogte: 30px; #leftCol p.sub color: # 338966; font-size: 11px; text-transform: hoofdletters; letter-spacing: 2px; lettertype: vet; #leftCol p.body, #leftCol p.link color: # 8c8f95; lettertype-familie: 'lucida grande', 'arial'; lettergrootte: 12px; regelhoogte: 19px; padding-top: 30px; margin-bottom: 10px; #leftCol p.link padding-top: 10px; #leftCol p.link a color: # 8c8f95; tekstdecoratie: onderstrepen; #leftCol p.link a: hover color: #fff; tekstdecoratie: onderstrepen;
Nogmaals, de belangrijkste overweging hier is de absolute positionering van het element '#leftCol'. Omdat dit element buiten de tag '#gallery' is geplaatst in de tag '#main', is de positie ervan relatief ten opzichte van de gecentreerde '#main'-tag en onafhankelijk van beweging in de galerij. Dit betekent dat de tekst kan worden vernieuwd wanneer het actieve project verandert zonder van positie te veranderen. De zeer hoge z-index voor '#leftCol' (10001) plaatst deze inhoud boven alle andere inhoud op de pagina. Dit betekent dat onze tekst niet wordt gestoord door het spotlight-effect. De andere eigenschappen zijn meestal tekststijlen en gerelateerd aan opmaak die naar wens kunnen worden aangepast.
Vernieuw nu uw pagina en een aantal mooi opgemaakte tekst moet links van de actieve afbeelding verschijnen zoals hieronder afgebeeld.
Nu we een structuur voor de statische inhoud hebben ontwikkeld, passen we een aantal markeringen toe die elementen toevoegen waardoor onze gebruikers met de site kunnen communiceren.
Terugkeren naar de '#leftCol' div, voeg de volgende code toe:
Omhoog omlaag links rechts
Het element '#grid' is leeg; dit wordt door Javascript ingevuld in de laatste werkende versie. Voorlopig zullen we echter een aantal onderliggende elementen coderen om een idee te krijgen van hoe deze eruit zal zien.
Nu gaan we opnieuw een sprites-afbeelding gebruiken, dit keer voor onze pijltjestoetsen. Ga dus terug naar Photoshop, ga naar de 'toetsenbord'-groep en noteer met behulp van het liniaalgereedschap de totale afmetingen.
Nogmaals, we moeten rekening houden met twee keer de hoogte van de groep voor opname van een 'standaard' en 'zweefstand'. Maak een nieuw document met een transparante achtergrond die gelijk is aan de breedte van de 'toetsenbord'-groep en tweemaal de hoogte. In het voorbeeld van de zelfstudie komt dit overeen met 70 x 92.
Sleep de 'toetsenbord'-groep naar het nieuwe document. Dupliceer deze groep en plaats de ene direct boven de andere. De onderstaande groep is onze 'zweefstand'. Breng een paar kleine aanpassingen aan voor de zweeftoestand door de kleuroverlay, pijlen en omtrek op te fleuren. Fijne aanpassingen zijn vaak voldoende voor zweeftoestanden en kleine verschuivingen in helderheid zijn meestal gemakkelijk merkbaar.
Voor het voorbeeld van de zelfstudie zal het veranderen van de achtergrondkleur van # 262a34 in # 2b2f3a en de achtergrondkleur van de slag / pijl van # 32343f in # 4b4d56 een ideaal effect creëren.
De uiteindelijke afbeelding zou er ongeveer als volgt uit moeten zien:
Sla deze afbeelding op als 'img / icons / keys.png'.
Nu zullen we wat CSS toevoegen om de afbeelding aan de verschillende klassen toe te wijzen.
#leftCol #controls width: 200px; hoogte: 55px; positie: absoluut; onderaan: 18px; #grid .line width: 5px; achtergrond: # 666; overloop verborgen; zweven: links; margin-right: 2px; positie: relatief; cursor: standaard; #grid height: 55px; breedte: 200 px; #tracker height: 10px; achtergrond: #fff; breedte: 5px; positie: absoluut; z-index: 10000; cursor: standaard; #grid .line width: 5px; achtergrond: # 3d424f; overloop verborgen; zweven: links; margin-right: 2px; positie: relatief; cursor: standaard; #keys width: 92px; hoogte: 46px; positie: absoluut; links: 86px; onderkant: 0; #keys a text-indent: -999px; breedte: 22 px; hoogte: 22 px; achtergrond: url ('? /img/icons/keys.png') no-repeat 0 0; overloop verborgen; positie: absoluut; De onderliggende 'lijn'-elementen vormen een raster dat de relatieve kolomhoogten representeert. Deze abstractie is een ideale manier om de gebruiker de grootte van het folio, de onderdelen en hun huidige positie te laten weten - in sommige opzichten vergelijkbaar met het broodkruim van een traditionele inhoudssite.
Hoe dan ook, de volgende taak is om de hoofdklassen toe te wijzen aan de afbeeldingssprite:
#keys a.kup left: 24px; text-indent: -999px; boven: 0; achtergrond-positie: -24px 0; #keys a.kup: hover, #keys a.hoveru background-position: -24px -46px; #keys a.kdown left: 24px; top: 24px; achtergrond-positie: -24px -24px; #keys a.kdown: hover, #keys a.hoverd background-position: -24px -70px; #keys a.kleft left: 0px; top: 24px; achtergrond-positie: 0px -24px; #keys a.kleft: hover, #keys a.hoverl background-position: 0px -70px; #keys a.kright left: 46px; top: 24px; achtergrond-positie: -46px -24px; breedte: 24 px; #keys a.kright: hover, #keys a.hoverr background-position: -46px -70px;
Probeer uw browser te vernieuwen en zweef de zojuist gemaakte elementen. De nieuwe toetsen en het raster moeten op de onderstaande illustratie lijken:
Ten slotte voegen we de dynamische navigatie toe die aan het actieve project wordt gekoppeld. Voer de volgende markering direct in na de open tag van het element '#leftCol':
We hebben inline-styling hier gebruikt om te simuleren wat er automatisch wordt bereikt als we volledige Javascript-interactiviteit hebben toegevoegd.
Voor deze ankers zal nog een afbeeldingssprite worden gebruikt. Ga terug naar ons Photoshop-bestand, open de groep 'Knoppen' en selecteer de rechterhoeklaag. Omdat we wat vulling op ons anker willen, zullen we deze stijlen met de afmetingen 44 x 44 stijlen.
Maak een nieuw document 88 x 176 met een transparante achtergrond voor 2 sets van 4 pictogrammen. Maak een nieuwe laag die zwart is om ons te helpen de doorschijnende pijlen te zien. Versleep een verticale hulplijn naar 44 pixels op de x-as. (sleep hulplijnen wanneer linialen zijn ingeschakeld en zorg dat Window> Info zichtbaar is om de huidige locatie te zien). Sleep vervolgens drie horizontale hulplijnen met 44, 88 en 132 pixels op de y-as.
Keer nu terug naar de oorspronkelijke PSD en sleep de hoekpijl in het nieuwe document en maak 4 kopieën aan de linkerkant. Dit wordt onze 'standaard' status. Maak de dekking voor elke laag 12%. Gebruik Bewerken> Transformeren om de hulplijnen zodanig te roteren dat de volgorde is zoals hieronder weergegeven:
Kopieer deze lagen en verplaats elk precies 44 pixels naar rechts. Pas de dekking van elke nieuwe laag aan tot 20%. Schakel de zwarte achtergrond uit zodat het canvas bijna volledig transparant is en selecteer Opslaan voor web. Exporteren als een 24-bits PNG met transparantie ingeschakeld voor 'img / icons / movers.png'.
Nu zullen we wat CSS toevoegen om deze afbeelding in kaart te brengen:
a.mover background: url ('? /img/icons/movers.png') no-repeat -44px 0; hoogte: 44px; breedte: 44px; overzicht: geen! belangrijk; # up, #right, #down, #left display: block; z-index: 300; positie: absoluut; top: 10px; links: 10px; #rechts background-position: 0px -44px; #recht: hover background-position: -44px -44px; #down background-position: 0 -88px; #down: hover background-position: -44px -88px; #up background-position: 0px -132px; #up: hover background-position: - 44px -132px; Vernieuw je browser en je ziet nu iets vergelijkbaars als hieronder.
En dat is het! Voor het laatste deel van deze tutorial zullen we het Javascript schrijven dat automatisch de lay-out van de afbeeldingen verwerkt en dynamische navigatie introduceert met behulp van het toetsenbord of de muis.
In het geval dat u iets gemist heeft, hier is de laatste HTML-opmaak:
Uw naam - digitale portfolio Vind mij op Facebook Bekijk mijn Flickr Vind mij op LinkedInOver Fotografie Werk
Demoproject
WEBSITE 2011
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing. Etiam neque augue, tristique eget malesuada et, luctus sed felis. In dignissim lacus eu justo tempus ut tincidunt nisi dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing.
Link naar project hier
Omhoog omlaag links rechts
