bygning lydhør tidslinje portefølje side, denne post er en del af en serie kaldet bygge en lydhør tidslinje portefølje side. udformning af en stilfuld tidslinje portefølje side ved hjælp af photoshopfinishing lydhør tidslinje portefølje side,,, hvad du vil lave, i denne forelæsning vil vi bygge den fantastiske tidslinje portefølje, som set i en tidligere resten af tomas laurinavicius. vi vil bruge nogle følsomme teknikker samt css3 animeringer, fræk og en lille smule af jquery.,, fil og adresseregister struktur, ok, det første skridt er at skabe filer og foldere, vi har brug for.billedet viser vores grundlæggende struktur.,,,,,, som du kan se, har vi en meget enkel ting her.i "forskning" directory gå videre og skabe en , styles. scss , fil og også tage en kopi af normalize.css.for at bruge sass i dette projekt, vil du enten have sass monteret på din maskine eller du får brug for en app til at gøre det på, og udarbejdelse af for dig.jeg er i øjeblikket ved codekit for mac, men der er masser af alternativer, som f.eks. prepos, spejder, og ikke at nævne et par stykker.de er ikke gratis, men hvis du vælger, vil spare dig en masse tid!, i "er" mappe skabe filen , app.js og downloade en kopi af , modernizr. js, til sted her.den modernizr bygger jeg har brugt omfatter alle css3 og html5 test, som vi ikke har brug for mere end det.okay, der dækker vores oprindelige filer og foldere.det næste skridt er at kontrollere vores psd design for at se, hvilke dele der skal skære ud.,, udskæring psd, udformning af denne side er ligetil, der gør arbejdet for at afgøre, om vi har brug for nogen skiver lettere.tomas har givet alle disse aktiver sammen med psd, så vil det være muligt at have nogen stykker på alle fra dette design.men besluttede jeg for resten, vi skal skære de tre portefølje, billeder og lastning ikon nederst på siden.det er bare for at lette mere end noget andet, så vi behøver ikke at gøre nogen nedskæring i photoshop., i photoshop tag stykke værktøj og omhyggeligt tage brødet.du kan navn hver skive af to klik på det.- så brug, undtagen web... , (eller tilsvarende menupunkt afhængigt af din version af photoshop) eksport af skiver i vores billeder, fortegnelse.,, jeg så skabt en ny mappe indenfor "billeder" kaldet "mappe", der har billeder vedrørende porteføljen poster.- tre portefølje billeder i denne mappe, og at fuldender vores udskæring proces.,, avatar image, gå over til uifaces. kom og vælge et af billederne til anvendelse som vores profil billede.det lykkedes mig at finde den samme som konstruktion, men det er ligegyldigt, hvem du vælger.tag 128x128 version og sætte den i "billeder" mappe. ,,,,, vi næsten er færdig med vores billeder med kun de sociale medier og navigation ikoner op.det vil vi gøre næste.,, ånder, når du har grupper af billeder, som ikoner, er det en god idé at skabe et billede med dem alle i et kvadratnet mønster.de kaldes nisser.du kan tage dette til yderligheder og skabe en stor fil af hver enkelt billede på din hjemmeside, men denne forelæsning, vi kommer til at skabe to ånder og en tilsvarende retina udgave for hvert.,,, ved hjælp af aktivet, forbindelser, der leveres af tomas, vi kan downloade hver af de sociale medier ikoner.tag 128x128 pixel - version af hver, så vi kan nedtrappe den størrelse, vi har brug for.så i photoshop, må vi skabe et dossier, der er , 101px af 51px,.slæber hver af de sociale medier ikoner i denne sag, og resize ned til, 24px af 24px,.de billeder er sort, men vi har brug for, at de er hvide, så anvende en lag stil til hver og en, der giver en farve - overlay - hvidt.ændre din baggrund farve til noget mørkt, så vi kan se dem, og så lade dem -,,,,, hver ikon er præcis , 1 pixel, fra kanterne og fra hinanden.jeg har også ændret opacitet af hver ikon - 80%.nu gentage denne række af billeder, og det er direkte under sørgede for at holde det, 1 pixel, fra kanterne.ændre opaciteten af den anden række af ikoner op til 100%.det skal se noget som dette...,,,,, nu skjule baggrunden lag i photoshop, giver en gennemsigtig baggrund og, undtagen for net, som, men heller ikke dér er menneskene sikre, med titlen , social-sprite.png, i "billeder" mappe. næste skridt er at skabe nethinden version af denne ånd, så vi får levende ikoner på høje pixeltæthed skærme.det skal være enkelt og indebærer en fordobling af størrelsen af det, vi allerede har.- nethinden udgave vil blive, 202px af 102px,.kan du huske, , alt skal være fordoblet, der omfatter afstand omkring hver ikon for denne ånd har vi brug for , 2 pixels , mellem de enkelte ikon og på de kanter.den færdige retina version skal se sådan ud.,,,,, stor!nu bare skjule baggrunden lag som før og eksport som en , men heller ikke dér er menneskene sikre, men denne gang kalder det , sociale sprite @ 2x. men heller ikke dér er menneskene sikre,.det er en standard - navngivningskonvention for retina version af et billede fil.,, så nu er vi bare nødt til at gøre det samme med navigation ikoner.disse symboler vektorobjekter i psd, som betyder, at vi kan kopiere dem i en ny fil og omfang dem, når det er nødvendigt.den størrelse, der er nødvendige for den normale udgave er , 49px af 18px og retina version til dobbelt størrelse er , 98px af 36px,.den færdige billeder skal se sådan ud:,,,,,,,, fremragende!redde disse som , nav-sprite.png, og , nav sprite @ 2x. men heller ikke dér er menneskene sikre,.jeg tror, det var det, vi har brug for at gøre for de billeder, så lad os fortsætte med at skrive en kode.,, basen html og siger, lad os begynde med den barebones fra vores side. i vores index.html, modtaget følgende - at begynde:,,, <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0"> <title>My Portfolio</title> <link rel="stylesheet" href="css/style.css"> <script src="js/modernizr.js"></script> </head> <body> <main class="wrap group"> <aside class="sidebar"> <div class="my-info"> </div> <nav class="menus"> </nav> </aside> <div class="content"> </div> </main> <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src = "js /app. er" > < /manuskript > < /organ > < /html >,, det er en enkel opbygning med de vigtigste, indpakning element, der indeholder en aftale, til side, og et indhold , div.,.i den aftale, vi har to dele, , min info, , og et nav med en klasse af , menuer.vores afhængighed er også alle med, navnlig den seneste version af jquery 1. x. lad os nu begyndt at udfylde vores sass fil med nogle variabler. $sort:� $hvide:&#fff. $grå:&#f7f7f7. $darkgrey:e5e5e; røde:&#dollars d35136. $grøn:b599. $blå:Xecc. $darkblue:⮣c. $polstring: 10px. $margen: 10px. $største bredde: 1000px. $skriftstørrelse: 14px. $skrifttype familie: lato, uden serif. $linjehøjde: 1.4; $slå fire: 1050px. $bryde tre: 760px. $bryde to: 520px. $bryde en: 360px; @ import url ('http://fonts.googleapis.com/css?familie = lato: 300400700); @ import url ('normalize. css); //værker. gruppe: efter (indhold: "" display: tabel; klart: begge}, det er en rimelig del af kode til at begynde med.det er virkelig bare at oprette nogle misligholdelser og variabler til brug i hele vores sass fil.det vigtigste punkt er, at der har fire bryde punkt variabler.disse defineres som punkter i vores udformning bør ændres.nu kommer meget nyttigt her, som vi kan henvise disse variabler, når vi skriver vores medier, og hvis en pause punkt skal ændres, er der kun ét sted at ændre det. , som du kan se på, @ import, erklæring, er vi også importere google skrifttype, der anvendes i udformningen og kopi af normalize.css, vi har tidligere.den eneste erklæring, så er , gruppe, klasse, der er en, clearfix for elementer, der indeholder flød elementer.tjek nicolasgallagher.com for mere information.,, hvis det er korrekt, at redde , styles. scss,, , vil skabe den almindelige css fil, vi har medtaget i vores side.se side nu vil vise en temmelig kedelig hvid skærm, så lad os gøre det mere sjovt ved at tilføje nogle flere styles og udbygge de sidebar område.,, kom her, min info, først og fremmest lad os tilføje følgende til vores sass fil: //vigtigste styles * (position: relativ; - webkit rubrik størrelsessortering: grænse boks - - box størrelsessortering: grænse boks. - fru rubrik størrelsessortering: grænse boks; rubrik størrelsessortering: grænse boks}: organ. pak {min højde: 100%} organ (farve: $grå; skriftstørrelsen: $skriftstørrelse og skrifttype, familie: $skrifttype familie; linjehøjde: $linjehøjde; baggrund: $darkblue;}, hvert element skal være placeret , relativ, og har også , rubrik dimensionering, ejendom, der , grænse boks, at elements har procentdel bredder , inklusiv,,, ,,,, af deres polstring.det betyder, at vi kan sætte to elementer ved siden af hinanden på 50% bredde, så tilpasse polstringen i hver af dem så meget, vi vil, uden at bryde den indretning.en meget, meget nyttigt css regel!støtte til næsten alle de browsere kommer via sælgeren forud fastsatte angivelser.,, og de resterende styles her fungere som misligholdelser på vores side.vi er nødt til at sikre, at de vigtigste indpakning elementer er 100% højde på alle tidspunkter, som vores gruppemøde for at udfylde den skærm.vi sætter kroppen baggrund for , $darkblue her, som faktisk er vores gruppemøde farve.det er, hvad der giver vores gruppemøde udseendet af 100% højde.In reality, the sidebar element itself will only be as high as its content, but will have a transparent background, thus showing the colour behind it.,,Let's start fleshing out the sidebar...,,<img src="images/cj.jpg" alt="Chris Johnson" class="portfolio-image"> <h1>Chris Johnson</h1> <h2>Experienced UX/UI <br> Designer based in London, UK</h2> <div class="social group"> <a href="#" class="dribbble">Dribbble</a> <a href="#" class="twitter">Twitter</a> <a href="#" class="facebook">Facebook</a> <a href="#" class="googleplus">Google+</a> </div>,,Add this code into the ,.my-info, div. You may have to rename the ,portfolio-image,, , afhængigt af, hvad man har kaldt det.der er ikke mange, der foregår her, men gem fil og tage et kig i browseren.,,,,, dejlig.luk nu op , style.scss, og anføre følgende kode:,,. aftale (bredde: 100%, højde: 100%; @ medier skærm og min bredde: $bryde tre) {flyde: venstre; bredde: 20%}. info (tekst tilpasse: center; polstring: $polstring * 3, 0; grænseoverskridende nederst: 1px fast $darkgrey;. portefølje image (grænse radius: 50%} h1, h2 (font vægt: normal;} h1 (skriftstørrelse: 120%} h2 (skriftstørrelse: 100%}}}, som vi følger en mobil første strategi vi har brug for vores gruppemøde til fulde bredde og fuld højde på mobile resolutioner.en hurtig medier spørgsmål for vores $bryde tre, , bryde punkt flyder den tager tilbage og begrænser den bredde på 20%. , styles for ,. min information er enkle nok.vi vil bare center alt og giver det hele lidt plads i kanterne.at adskille fra vores snart menu afsnit vi bruger bare en 1px grænse på den nederste kant.for at gøre det , portefølje image, cirkulære, giv det en 50% - grænsen radius, og endelig, at vi må tilsidesætte en skrifttype, styles for h1 eller h2 elementer i dette afsnit,.,, sociale medier forbindelser, skal vi nu til at tage fat på de sociale medier forbindelser ved hjælp af en af de nisser vi skabte tidligere.de følgende kode direkte efter , h2, , erklæringer i den sidste del af koden.,,. sociale (bredde: 120px; margen: 0 auto; en {flyde: venstre; bredde: 25px. højde: 25px; margen: 0 $margen /5 baggrund: url (. billeder /sociale sprite. men heller ikke dér er menneskene sikre ikke gentages; tekst led: - 9999px; @ medier skærm og (- webkit min anordning pixel - forholdet: 2), skærm og min anordning pixel - forholdet: 2) {baggrund: url (../images/[email protected]) ikke gentages; baggrund størrelse: 101px 51px;} &. dribbble {baggrund holdning: 0px 0px; &: den {baggrund holdning: 0px - 25px;}} &. twitter {baggrund holdning: - 25px 0px; &: den {baggrund holdning: - 25px - 25px;}} &. facebook {baggrund holdning: - 50px 0px; &: den {baggrund holdning: - 50px - 25px;) &. googleplus {baggrund holdning: - 75px 0px; &: den {baggrund holdning: - 75px - 25px;}}}}, det ser ganske kompliceret, men det er ikke rigtigte.hovedparten af denne kodeks er håndtering, hvor ikonerne og svæv stater anføres.vi skal først og fremmest flyde hver af, < en >, elementer, giv dem en bredde og højde og også en vis margen til at sprede dem ud.den næste ting, vi gør, er at angive den baggrund image.det bør fastsættes, at de sociale sprite skabte vi tidligere.endelig må vi sikre, at den tekst, der anvendes i hvert enkelt element ikke anføres på den side.den tekst led, , ejendom, tager sig af det pænt.,, næste punkt er interessant.her er vi, hvilken baggrund til brug for høje pixeltæthed skærme.idéen er at bruge "dobbelte" version af den sociale sprite , hvis , pixel i forhold til anordning er 2.den baggrund, størrelse, , ejendom, er nødvendigt at omfang sagen tilbage til de oprindelige størrelse, så alle vores positions kode , fungerer uden at gentage noget, de næste fire sektioner er alle det samme begreb.vi er blot baggrunden position for hvert ikon, og de respektive , svæv, stat.lad os tage et kig i browser:,,,,, fedt!det ser godt ud.If everything is correct the hover states should all work and they should all look crisp on an iPhone/iPad etc. Now, let's start tackling the sidebar menu.,,The Sidebar Menus,,Start by entering the following into index.html in the ,menus,, ,container.,,<h3 class="work">Work</h3> <ul> <li><a href="#" class="current-menu-item">Latest</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Branding</a></li> <li><a href="#">Photography</a></li> <li><a href="#">Print</a></li> <li><a href="#">Mobile Design</a></li> </ul> <h3 class="about">About</h3> <ul> <li><a href="#">Skills</a></li> <li><a href="#">Experience</a></li> <li><a href="#">Education</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Blog</a></li> </ul> <h3 class="contact">Contact</h3> <ul> <li><a href="#">Address</a></li> <li><a href="#">Phone</a></li> <li><a href="#">Social Networks</a></li> <li><a href="#">Email</a></li> </ul>, temmelig selvforklarende tror jeg, så lad os fortsætte ved at indtaste følgende former efter , info, afsnit, men stadig inden for den samlede , kom her, element.,,. menuer {tekst tilpasse: center; @ medier skærm og min bredde: $slå tre) (polstring: $polstring * 2 $polstring * 3} h3 (tekst omdanne: store; skriftstørrelsen: 120%; skrifttype vægt: normal; polstring til venstre: $polstring * 2, 5; markør: point; bredde: 20% margen: $margen * $2 margen * 11 $margen. @ medier skærm og min bredde: $bryde en) {margen: $margen * 2 - $margen * 2} @ medier skærm og min bredde: $bryde tre) {margen: $margen * 2 0 $margin 0} &: før (indhold: "" holdning: absolutte, top. 0px; tilbage: 0px. højde: 18px; display: blok; baggrund: url (.. /images /nav sprite. men heller ikke dér er menneskene sikre ikke gentages; @ medier skærm og (- webkit min anordning pixel - forholdet: 2), skærm og min anordning pixel - forholdet: 2) {baggrund: url (../images/[email protected]) ikke gentages; baggrund størrelse: 49px 18px;}} &. arbejde (farve: rød dollars; &: før (bredde: 15px; baggrund holdning: 0px 0px;}} &. {farve: $green; &: før (bredde: 17px; baggrund holdning: - 15px 0px;}} &. kontakt (farve: $blå; &: før (bredde: 17px; baggrund holdning: - 32px 0px;}}}}, er det faktisk meget ligner den sociale ikoner for så vidt angår udformning og gennemførelse af konceptet.for , menuer, punkt selv vi vil have, at alt skal være koncentreret.når vi er over vores $bryde de tre, break point har vi brug for noget polstring til position menuerne væk fra kanten lidt.,, hver af de , h3, elementer bør have forskellige farver og symboler.vi anvender en kombination af: før, , pseudo - element, ånder og medier, til at opnå dette.bortset fra dette har vi nogle medier forespørgsler til kontrol i forbindelse med , h3,, elementer på større skærmstørrelse.det er så de altid er placeret korrekt i forhold til deres menuer.,, vi taler om menuer, vil vi tilføje css for dem om et øjeblik.først, lad os tage et kig i browser:,,,,, titler ser godt ud!menuen er ikke så meget.lad os hurtigt tage sig af det, før de blå misligholdelser for os mere smerte, menuen lister, ul (liste stil: ingen; polstring: 0; display: ingen; margen: 0 $margen * 5 $margen; tekst tilpasse: venstre @ medier skærm og min bredde: $bryde de tre) {margen: 0 0 0 $margen * 2, 5; display: blok; bredde: auto;} &. åben (display: i overensstemmelse med blok; margen: 0 - $margen $margen * 6 @ medier skærm og min bredde: $bryde tre) {margen: 0 0 0 $margen * 2.5 display: blok; bredde: auto;}} li (en (farve: $darkgrey; tekst): ingen. - webkit transition: farve 0.4s lette, - - 0.4s lette overgangen: farve; - o-transition: farve 0.4s lette overgangen: farve; - ms 0.4s lette overgangen: farve; 0.4s lette; &: svæv, &. nuværende menupunkt (farve: $hvide, - webkit overgang: farve 0.4s lette; - - 0.4s lette overgangen: farve; - o-transition: farve 0.4s lette overgangen: farve; - ms 0.4s lette overgangen: farve; 0.4s lette;}}}}, til mobile beslutninger, vi ønsker, at vores menuer for at være skjult, så brugeren kan vælge at gemme sig og vise dem, at de skal have adgang til dem.når vi når vores $bryde tre, , punkt menuerne skal være synlig, hele tiden. ,, ,.,, , klasse håndtag, hvordan menuer, udviser, når de er åbne.designet er dem ret netop placeret, så gør vi det samme her ved hjælp af margener.igen, $bryde tre, , punkt kommer ind i billedet og forbigår margener for disse beslutninger og ovenfor.de former for , li, elementer er ret ligetil.den vigtigste ting at bemærke, er anvendelsen af css3 overgange.jeg har brugt dem her for at give en god fade op, når der svæver på element.jeg opfordrer dig til at lege med overgangsordninger for at se, hvad der interessante virkninger kan du opnå! , lad os redde sagen og se resultaterne i browseren.,,,,, pænt!menuen er opfører sig, som de burde.nu skal vi gennemføre vores første del af javascript /jquery, til at kontrollere åbning og lukning af menuen.,, åben, app. js, og anføre følgende funktioner:,, $(function() {$(. menuer h3). ('click, funktion (e) ($(dette). ('ul '). toggleclass ('open); f. preventdefault(); tilbage falske})}), begynder vi denne sag med, jquery nummer klar funktion, som i bund og grund venter på dokumentet for at være fuldt ud klar inden gennemførelse af kodeksen.læs mere om klar begivenhed på api - grænseflade. jquery. kom.,, vi er så knyttet et klik i forbindelse med enhver, h3,, , i vores , menuer, element.da dette tilfælde sker der (når brugeren klik den , h3, vi bruger jquery finde "næste" , ul element og greb den klasse af , åben om det.så hvis det element har klasse, der allerede er det vil fjerne det, og omvendt, hvis ikke den sidste linje er der for at stoppe enhver misligholdelse, aktion for element.det gælder ikke her, fordi , h3, elementer ikke har en misligholdelse handling, mens et anker, f.eks. gør.men det er god praksis for at få for vane, herunder det ved klik begivenhed vagter.,, medmindre sagen og vende tilbage til den om.når i mobile resolutioner, hvis du klikker på menuen titler, du bør se menuen åbne op under den.hvis dette ikke sker, tjek javascript for eventuelle fejl eller genopfriske din browser og prøv igen. det var den aftale, område.lad os gå videre og få noget indhold til det væsentligste indhold side.,,,, det første skridt er at tilføje: vi har brug for til side.,, < artikel klasse = "portefølje punkt gruppe først" > < header klasse = "portefølje - info" > og lt; div klasse = "date" > den 7. november 2013 < /div > < div klasse = "beskrivelse" > fri psd skabelon for nye virksomheder, små og mellemstore virksomheder og grundlæggende for alle lide godt design.</div> <div class="meta"> <p><strong>Client:</strong> Despreneur</p> <p><strong>Tags:</strong> Web Design</p> </div> </header> <figure class="portfolio-image"> <img src="images/portfolio/free-psd-templates.jpg" alt="Free PSD Templates"> </figure> </article> <article class="portfolio-item group"> <header class="portfolio-info"> <div class="date">7 Nov 2013</div> <div class="description"> Free PSD template for startups, small businesses and basically for everyone liking good design. </div> <div class="meta"> <p><strong>Client:</strong> Despreneur</p> <p><strong>Tags:</strong> Web Design</p> </div> </header> <figure class="portfolio-image"> <img src="images/portfolio/moody-shot.jpg" alt="Moody Shot"> </figure> </article> <article class="portfolio-item group"> <header class="portfolio-info"> <div class="date">7 Nov 2013</div> <div class="description"> Free PSD template for startups, small businesses and basically for everyone liking good design. </div> <div class="meta"> <p><strong>Client:</strong> Despreneur</p> <p><strong>Tags:</strong> Web Design</p> </div> </header> <figure class="portfolio-image"> <img src="images/portfolio/new-york.jpg" alt="New York"> </figure> </article> <article class="portfolio-item group loading-wrap"> <header class="portfolio-info"> </header> <figure class="portfolio-image"> <div class="loading"> <img src="images/loading.png" alt="Loading" class="rotate"> Loading... < /div > < /figur > < /artikel >,, denne kode i ,. indhold. vi har de tre artikler, der indgår i udformningen og også en "-" artikel.jeg har lagt - ikon indenfor sin egen , portefølje punkt på dagsordenen, så vi kan bevare strukturen i den side.så kan jeg bare holdning - ikon, selv i , portefølje image, element.du kan se her, at den første , portefølje punkt på dagsordenen, har en klasse af først.det er vigtigt i vores forskning, som vi vil komme ind på, efter at der er taget et hurtigt kig i browser:,,,,, rart, men ikke helt, hvad vi ønsker, så lad os få det til styles.,,. indhold (bredde: 100%; min højde: 100%; baggrund: $hvid; @ medier. og min bredde: $bryde tre) {flyde: venstre; bredde: 80%;}. portefølje konto {baggrund: $grå; &: før (indhold: "" holdning: absolut; bredde: 3px; baggrund: darken ($grå, 5%); top: 0px; venstre - 17px; nederst: 0px;} &. første {&: før {top: 30px;}}. portefølje - info (min højde: 100%; farve: $darkgrey; polstring: $polstring * 2 $polstring * 2 $polstring * 2 $polstring * 4 - webkit rubrik størrelsessortering: grænse boks - - box størrelsessortering: grænse boks. - fru rubrik størrelsessortering: grænse boks; rubrik størrelsessortering: grænse rubrik; @ medier skærm og min bredde: $bryde tre) {flyde: venstre; bredde: 30%}. dato (skriftstørrelse: 110%; farve: $sort margen nederst: $margen; &: før (indhold: "" holdning: absolut; bredde: 11px;højde: 11px; grænseoverskridende radius: 50% grænse: 2px fast $grå; baggrund: $red tilbage: - 29px; top: 3px;}} meta (farve: $sort margen top: $margen; p {margen: 0}}}}}, en stor del af kode!lad os bryde det ned, stykke for stykke.den , indhold, styles, svarer til de nærmere styles i og med, at der på mobile beslutninger, vi skal bare bruge den fulde bredde, men noget på eller over vores $bryde tre, , vi vil flyde, og træk bredde på 80%.vi er også nødt til at give , indhold, div. hvid baggrund til afsnit ud fra gruppemøde.,, , portefølje på elementer, som bør have en grå baggrund.for at skabe en tidslinje løber ned på venstre kant af den område, vi får hver , portefølje punkt en : før, element.her er vi absolut holdning, det 17px fra venstre kant og anvende top /bunden trick for at tvinge den til at være 100% højde.dette kræver, at både , top, , og underste, , ejendomsret til 0, som i virkeligheden taler element skal være begge steder, resulterer i en fuld højde element.det virker også for venstre og højre egenskaber til at skabe fuld bredde element.vi må holdning, som vores første , portefølje post, væk fra den øverste kant af vinduet, som vi her ved at nå toppen ejendom til 30px.,, , portefølje - info, artikler bør igen være 100% - medmindre vi er i $bryde tre, eller derover.for at skabe de små røde cirkel set på design, besluttede jeg mig for at bruge den , dato, elementer, som virker sammen.i landestøttestrategien den bedste måde at gøre det på er at anvende en : før pseudo, element.for at gøre det til en cirkel, er det at have en højde og bredde og en , grænse radius på 50%.vi så absolut holdning op til venstre for den dato.for at få den lille forskel på det, blot at anvende en grænse på samme farve som , portefølje punkt elementer.,, , meta, er meget enkel.bare sæt den tekst i sort og give den højeste margen.enhver, < p >, mærkater ind her, bør ikke have margener.redde sagen og se på, hvad denne relativt korte afsnit kode har opnået.,,,,,, det er tæt på nu!lad os fortsætte med vores , indhold, , styles...,,. portefølje image (polstring: $polstring * 2 baggrund: $hvid; grænse tilbage: 1px fast darken ($grå, 10%); tekst tilpasse: center; @ medier skærm og min bredde: $- 3) {flyde: venstre; bredde: 70%} img (bredde: 100%; max bredde: 610px. højde: auto;} div.loading (img (bredde: auto, højde: auto;}}}, sted umiddelbart efter , portefølje - info, styles.denne korte blok af kode vil gøre billeder inde i porteføljeenheder lydhøre.idéen er at nedtone de billeder, som små, som vi har brug for, men kun at optrappe deres faktiske bredde.det betyder, at du skal have fast bredde billeder, men det er muligt i en layout /model, sådan som de billeder, vil sandsynligvis være dynamisk, der genereres og kort til en vis størrelse, er vi også ved hjælp af , portefølje image, elementer at tilføje endnu et design detalje, nemlig tynd grænse mellem de billeder og information.hvis du tager et kig i browseren nu, skulle du se de billeder, pænt mere med browser og generelt ser awesome!,,,,, næste op, det er tid til en pause! i følgende og sidste del af denne serie, kan vi tilføje nogle nødblus på stedet.vi vil bygge - - på bunden af vores område, gennemførelse af informationstiltag med css3, så en uendelig, scroller, som mere porteføljeenheder lastes på.
