Share
Hva du skal skapeI den forrige veiledningen dekket vi hvordan du klargjør et design i Photoshop, klar for konvertering til ren CSS3 og Base64-kode. I denne opplæringen håndterer vi den faktiske kodegenereringen ved hjelp av Photoshop plugins CSSHat og PNGHat laget av Source, samt FontAwesome og CSS preprocessor LESS.
La oss dykke rett inn!
Til å begynne med må du opprette en ny mappe på datamaskinen din for å huse ditt statiske nettsted. I dette tilfellet navngir jeg mappen min codedup.
Inne i den mappen opprett en ny fil med navnet index.html og legg til den følgende kode:
Photoshop til ren kode med CSSHat og PNGHat
Her setter vi opp det grunnleggende HTML-skallet for nettstedet og kobler sammen i Roboto, Google-fonten vi brukte i PSD-en, samt hva som vil være vår CSS-stilark.
Deretter opprett to undermapper i din codedup mappe, en navngitt css og den andre heter MINDRE. Inne i MINDRE mappe opprette en fil som heter style.less. Alle stilene for nettstedet ditt vil bli skrevet inn i denne filen, og deretter samlet inn i css> style.css.
Som vi går med din style.less filen skal ha sin kode organisert i denne rekkefølgen:
Jeg anbefaler å legge til en kommentar øverst på hver seksjon i din style.less fil for å hjelpe deg med å holde oversikt over hvor ulike typer kode skal plasseres.
Hvis du foretrekker det, kan du opprette separate filer (delvise) for å huse hver av disse kodetyper, og importere hver av dem til din viktigste MINDRE fil. Men for å holde ting enkelt her bruker vi bare den ene filen.
Prepros er et program som håndterer alle typer frontendatabjekter for webdesignere og utviklere. Den vil kompilere MINDRE, oppdatere nettleseren automatisk når endringer gjøres i filene våre, til og med synkronisere flere enheter hvis vi vil. Last ned og installer Prepros, som du kan få fri fra: http://alphapixels.com/prepros/
Kjør programmet, og dra deretter codedup mappe på hovedgrensesnittet for å legge det til som et nytt prosjekt.
Prepros vil automatisk oppdage style.less filen i prosjektmappen din og som standard vil "Auto Compile" aktiveres. Hver gang du lagrer en endring til style.less Prepros vil oppdage det da kompilere inn i css> style.css.
Du kan også klikke style.less i grensesnittet for å se ekstra tilgjengelige innstillinger, for eksempel muligheten til å komprimere CSS under kompilering.
Nå gå videre og ta tak i filene til LESSHat, et mixin-bibliotek som binder inn vakkert med CSSHat, samt Normalize.less, en versjon av "Normalize.css" skrevet i MINST vennlig syntax.
Etter at du har lastet ned de to filene og lagt dem i prosjektet, går du tilbake til Prepros, og du får se at den automatisk har oppdaget begge. Vi importerer begge disse inn i vår hoved style.less og vi vil ikke at de skal samle inn individuelle CSS-filer, så klikk på hver og fjern merket "Auto Compile".
Åpne nå din style.less filen i den foretrukne kodeditoren, og legg til disse to linjene øverst:
@import "lesshat.less"; @import "normalize.less";
Lagre filen, og Prepros vil automatisk kompilere den for deg, hvorpå du bør se følgende popup nederst til høyre på skjermen:
Du bør nå også se filen style.css inne i prosjektet ditt css mappe.
Vi skal nå inkorporere FontAwesome i prosjektet ved å legge til fontfiler selv, så vel som "FontAwesome.less", et forhåndsbestemt LESS-bibliotek som gjør det utrolig enkelt å plassere FontAwesome-ikoner i designene dine. Alt vi trenger å gjøre er å importere filen, og deretter blir FontAwesome-klassene umiddelbart tilgjengelige.
Du får se hvordan dette fungerer i praksis senere i opplæringen når vi legger til vår "store nedpilen" -element.
Start med å opprette en undermappe som heter font-awesome inne i din MINDRE mappe. Det er ganske mange filer i FontAwesome bibliotek, så vi holder dem inn her for å holde våre organisasjoner organisert
Last ned FontAwesome som en zip fra: https://github.com/FortAwesome/Font-Awesome
Trekk ut mappen og kopier alle filene fra sin mindre mappe, og lim dem deretter inn i font-awesome mappe du nettopp opprettet i prosjektet ditt. Deretter kopierer du hele fonter mappe fra nedlastet FontAwesome nedlasting, og lim det inn som en undermappe i prosjektet ditt.
Din fulle prosjektfil og mappestruktur skal nå se slik ut:
Prepros vil igjen oppdage nye MINDER filer, så fjern merket "Auto Compile" på alle filer som nå vises i grensesnittet.
Legg til følgende linje i din style.less fil, under linjene du la til tidligere:
@import "font-awesome / font-awesome.less";
Prosjektet ditt har nå alle de mindre import- og skriftfiler du trenger på plass, og automatisk kompilering aktivert, så vi er klare til å begynne å oversette PSD-en til kode.
I den forrige opplæringen valgte vi mønsteret "Satin Weave" til flis på tvers av bakgrunnen på grunn av sin lille størrelse og lave antall farger. Vi skal nå bruke PNGHat-pluginet for å konvertere det til en streng av Base64-koden.
Åpne PSD i Photoshop. Vi vet at dimensjonene på mønsteret er 24px brede med 12px høye, så fortsett og bruk markeringen din for å lage et utvalg av den størrelsen hvor som helst på designen din.
Nå, for å sikre at bakgrunnslaget som har mønsteret brukt på det, er valgt, åpner du PNGHat-vinduet. Alt du trenger å gjøre er å klikke på "Base 64" i øverste raden i vinduet, og klikk deretter på "Eksporter valgte lag".
Du vil se en dialog vises og ber om bekreftelse du vil "Beskjære bilde ved valg?". Klikk Ja og du vil se din Base64-strengutgang i den nederste delen av PNGHat-vinduet. Klikk på Kopiere knapp.
Gå tilbake til din style.less fil og lim inn koden du nettopp kopierte fra PNGHat til "Variabler" -delen din. Slett alt fra den innpakkede koden med unntak av url (data ...); og deretter legge til @satinweave: ved starten av linjen. Du bør ende opp med:
@satinweave: url (data: image / PNG; base64, iVBORw0KGgoAAAANSUhEUgAAABgAAAAMAgMAAAAFXpXmAAAABGdBTUEAALGPC / xhBQAAAAlQTFRF8vLy7 + / + v8fHxxV2ZvQAAADRJREFUCNdVysENADAIQlGWkRj3rodOWeDW0w8 0axlg5wlFW / FGyEdTUpeESKOqXBN8 + cB4yUS37 / ediwAAAAASUVORK5CYII =);
Vi er nå klare til å plassere vår nye, enkle å bruke @satinweave variabel inn i en stil slik at den vil vises i vårt design. Mens vi er i det, legger vi også til et par grunnleggende regler for nettstedets bredde box-sizing og lenkeinnstillinger.
Legg til følgende kode i delen "Stiler" i din styles.less fil:
* .box-størrelse (border-box); kropp bakgrunnsbilde: @satinweave; overflow-x: hidden; a, a: link, a: besøkt, a: svever, a: aktiv tekst-dekorasjon: ingen;
Lagre filen din slik at Prepros vil kompilere endringene dine i din style.css fil.
Gå til Prepros, klikk på Flere valg knappen og velg Kopier live forhåndsvisning URL, (som mest sannsynlig vil være http: // localhost: 8000), og lim deretter inn det i nettleseren din.
Dette vil gi deg en forhåndsvisning av ditt statiske nettsted som automatisk oppdateres hver gang Prepros samler koden din.
Du bør nå se ditt rene Base64-mønster flisende på baksiden av siden.
Det kan ikke være enklere å ha CSSHat utdata CSS3 for hvert designelement. Bare velg det aktuelle laget med CSSHat-vinduet åpent, og det vil automatisk generere koden du trenger.
Det er noen alternativer du kan velge mellom i innstillingene i CSSHat-vinduet. I vårt tilfelle vil vi at vår kode skal sendes som MINDRE, og vi vil at alle de små knappene nederst i CSSHat-vinduet (kommentarer, dimensjoner, prefiks, regel) skal deaktiveres. Ditt CSSHat-vindu bør se slik ut:
Merk at du kan få CSSHat til å generere høyde- og breddekode for deg px verdier ved å klikke på den fjerde knappen (som ser ut som et lite firkant med mindre firkanter på hjørnene). Men jeg foretrekker å skrive min egen, så jeg kan lettere bruke rem / em / % verdier der jeg trenger dem.
Når koden for det valgte laget ditt er generert, klikker du bare på Kopiere knappen nederst i vinduet, klar til å lim inn i din style.less fil.
Nå fortsetter vi å legge til resten av designelementene dine via CSS.
Fordi CSSHat gjør ting så enkelt, kan vi bruke en ganske mye lager standard prosess som bare gjentas til designet er fullt kodet opp.
For hvert element begynner vi ved å legge til tilsvarende HTML til index.html fil.
Deretter vil hvert nytt element innebære å legge til en eller flere MINDER mixiner, som vi vil bruke til å holde CSS3 generert av CSSHat. Det er nyttig å holde din CSSHat genererte kode skilt fra resten av stilkoden din slik at du enkelt kan oppdatere den hvis du endrer design. Du bør legge til nye mixins til "Mixins" -delen av din style.less fil, som beskrevet ovenfor.
Til slutt legger du til de faktiske CSS-stilene som blir sendt til stilarket ditt. Disse stilene vil inkludere mixins samt litt ekstra kode jeg vil gi for å kontrollere layout, dimensjoner og aspekter Photoshop kan ikke håndtere for eksempel numerisk skriftvekt og "en side om gangen" grenser. Dine stiler bør legges til i "Stiler" -delen av din style.less fil.
Vi lager hver designelement i samme rekkefølge som vi gjorde i den forrige delen av denne veiledningen for å gjøre det enkelt å referere tilbake hvis du trenger å.
Legg til følgende mellom dine åpnings- og lukkede kroppskoder.
Velg ditt PSDs "topp trim" -lag, og kopier CSSHat generert kode:
opacity: .5; bakgrunnsfarge: #ddd; .box-skygge (~ "0 2px 1px #fff, innsett 0 -2px 4px # c8c8c8");
I din style.less fil opprette en ny mixin oppkalt TopTrim og lim inn CSSHat-koden din slik:
.TopTrim () opacity: .5; bakgrunnsfarge: #ddd; .box-skygge (~ "0 2px 1px #fff, innsett 0 -2px 4px # c8c8c8");
Vi vil nå innlemme din nye mixin i "Stiler" -delen av din style.less fil. Legg til følgende nye stilkode:
// Topp trim .toptrim høyde: 8px; margin-bunn: 62px; .TopTrim ();
I ovennevnte kode trekker vi ut våre CSSHat genererte stiler via TopTrim mixin, i tillegg til å sette opp dimensjonene vi trenger.
Du bør nå se din "topp trim" kjører over toppen av nettstedet ditt.
Legg til følgende under siste HTML du la til:
Velg din PSDs "menuwrap" -lag, kopier CSSHat generert kode, og lim det inn i en ny mixin som heter MenuWrapBG:
.MenyWrapBG () .border-radius (12px); bakgrunnsfarge: # f9f9f9; .box-skygge (~ "0 1px 2px #fff, innsett 0 1px 10px rgba (0,0,0, .15)"); .background-bilde (~ "lineær gradient (bunn, #fff 0%, # f3f3f3 100%)");
Legg til følgende nye stilkode:
// Meny .menuwrap min-høyde: 61px; maksimal bredde: 1200px; bredde: 100%; margin: 0 auto; polstring: 5px; .MenuWrapBG;
Du bør nå se:
Oppdater din eksisterende menykode til følgende:
Velg din PSD menubg lag og kopier CSSHat generert kode til en ny mixin som heter MainMenuBG:
.MainMenuBG () border: 1px solid # e4e4e4; .border-radius (11px); bakgrunnsfarge: #fff; .box-skygge (~ "0 3px 4px rgba (193,193,193, .75)"); .background-image (~ "lineær gradient (bunn, # e5e5e5 0%, #fff 100%)");
Legg til følgende nye stilkode:
ul.mainmenu polstring: 0 15px; margin: 0; liste-stil-type: none; min-høyde: 50 piksler; .MainMenuBG ();
Du bør nå se:
Oppdater din eksisterende menykode til følgende:
I din PSD velger du en av menyelementene rektangler og kopierer den CSSHat genererte koden til en ny mixin som heter MenuItemBG:
.MenuItemBG () .background-image (~ "lineær gradient (bunn, #eee 0%, # e4e4e4 25,49%, #fbfbfb 100%)");
I din PSD velger du teksten til en av menyelementene dine og kopierer den CSSHat genererte koden til en ny mixin som heter MenuItemText:
.MenuItemText () color: # 5b5b5b; font-familie: "Roboto"; skriftstørrelse: 18px; tekstskygge: 0 1px 0 #fff;
Oppdater eksisterende ul.mainmenu stil som følger.
ul.mainmenu polstring: 0 15px; margin: 0; liste-stil-type: none; min-høyde: 50 piksler; .MainMenuBG (); li display: block; flyte: venstre; polstring: 0; border-top: 1px solid rgba (0,0,0,0); grensebunn: 1px solid #dddddd; grense høyre: 1px solid #dddddd; border-left: 1px solid rgba (0,0,0,0); &: first-of-type border-left: 1px solid #dddddd; .MenuTemBG (); a, a: link, a: besøkt display: block; høyde: 47px; linjehøyde: 47px; polstring: 0 30px; // lagt skrifttype vekt font-weight: 400; .MenuItemText ();
Vi bruker MINDRE reglene som er så høye li barn av ul.mainmenu vil bli påvirket.
Du vil også huske i den tidligere opplæringen vi måtte manuelt bruke linjeværktøjet for å legge til rette for et fargevalg for menyelementets grenser, gitt Photoshop's manglende evne til å sette hver kantside individuelt. I det ovennevnte ser vi at vi innlemmer disse grensestillingene ved hjelp av fargekoden #dddddd vi valgte i det stadiet.
Vi har også lagt til noen gjennomsiktige grenser på topp og venstre side av menyelementene. Årsaken til dette er at vår nåværende gjenstand / hover-effekt vil bruke grenser på alle fire sider, så vi må sørge for at det er en matchende bredde på menyelementene i standard- og hover-tilstandene.
Og til slutt har vi manuelt lagt til riktig font-vekt av 400 til menyelementet tekst fordi Photoshop bare kan arbeide med verdier som "normal" eller "fet".
Du bør nå se:
I dette tilfellet trenger vi ikke noen ekstra HTML, da vi allerede har lagt til et menyelement med klassen "nåværende" brukt på den i det siste trinnet.
I din PSD, velg rektangelet av ditt "nåværende" menyelement og kopier CSSHat generert kode til en ny mixin som heter CurrentMenuItemBG:
.CurrentMenuItemBG () border: 1px solid # e62d4e; bakgrunnsfarge: # ef3d5d; .box-skygge (~ "0 1px 0 # cc2241, innsett 0 2px 5px rgba (250.171.185, .6)"); .background-image (~ "lineær gradient (bunn, # ef3d5d 0%, # dc2344 25,49%, # fc6b85 100%)");
Velg nå teksten til ditt "nåværende" menyelement og kopier CSSHat generert kode til en ny mixin som heter CurrentMenuItemText:
.CurrentMenuItemText () color: #fff; font-familie: "Roboto"; skriftstørrelse: 18px; tekstskygge: 0 -1px 0 # b50020;
Oppdater eksisterende ul.mainmenu stil som følger.
ul.mainmenu polstring: 0 15px; margin: 0; liste-stil-type: none; min-høyde: 50 piksler; .MainMenuBG (); li display: block; flyte: venstre; polstring: 0; border-top: 1px solid rgba (0,0,0,0); grensebunn: 1px solid rgba (0,0,0,0,05); grense-høyre: 1px solid rgba (0,0,0,0,05); border-left: 1px solid rgba (0,0,0,0); &: first-of-type grense til venstre: 1px solid rgba (0,0,0,0,05); .MenuTemBG (); a, a: link, a: besøkt display: block; høyde: 47px; linjehøyde: 47px; polstring: 0 30px; // lagt skrifttype vekt font-weight: 400; .MenuItemText (); &: svever .CurrentMenuItemBG (); a, a: link, a: besøkt .CurrentMenuItemText () li.current .CurrentMenuItemBG (); a, a: link, a: besøkt .CurrentMenuItemText ()
Og for å tillate menyelementene å bli presset på flere linjer hvis det er to mange for den tilgjengelige bredden, legg til følgende clearfix-kode under din eksisterende menyklasse.
ul.mainmenu: før, ul.mainmenu: etter innhold: ""; skjerm: bord; ul.mainmenu: etter clear: both;
Du bør nå se den "nåværende" stilen som brukes både til det aktuelle nåværende menyelementet og sveveffekten:
Legg til følgende kode under menyen HTML:
Visste du at du kan
Har din Photoshop
OG DIN
Ren kode også?
I din PSD velger du enten den første eller tredje hovedtekstlinjen (tynn grå tekst) og kopierer den CSSHat genererte koden til en ny mixin som heter ThinText:
.ThinText () color: # 6b6b6b; font-familie: "Roboto"; skriftstørrelse: 48px;
I din PSD velger du enten den andre eller fjerde hovedtekstlinjen (tykk tekst) og kopierer den CSSHat genererte koden til en ny mixin som heter ThickText:
.ThickText () color: # ef3d5d; font-familie: "Roboto"; skriftstørrelse: 80px; font-weight: bold;
Legg til følgende nye stilkode:
// Hovedtekstlinjer .maintext polstring: 70px 0; tekst-align: center; .thintext margin: 0.425em 0; // lagt skrifttype vekt skrift-vekt: 100; .ThinText (); .thicktext margin: 0.425em 0; .ThickText ();
Du bør nå se dette under menyen din:
Legg til følgende kode:
I din PSD, velg ditt info panel bakgrunn rektangel og kopier CSSHat genererte koden til en ny mixin oppkalt PanelBG:
// Panel mixins .PanelBG () border: 1px solid # d7d7d7; .border-radius (15 piksler); bakgrunnsfarge: #fff; .box-skygge (~ "0 3px 4px rgba (193,193,193, .27)");
Legg til følgende nye stilkode:
.panel maksimal bredde: 1200px; bredde: 100%; margin: 0 auto; polstring-bunn: 50px; tekst-align: center; .PanelBG ();
Du bør nå se informasjonspanelbakgrunnen din, som fremdeles er tom:
Oppdater informasjonspanelet HTML til følgende:
I DENNE TUTORIALEN:
I din PSD velger du panelhovedbakgrunnslaget og kopierer den CSSHat genererte koden til en ny mixin som heter PanelHeadBG:
.PanelHeadBG () .border-radius (10px); bakgrunnsfarge: # ef3d5d; .box-skygge (~ "0 3px 0 # cc2241, innsett 0 0 5px rgba (222,42,74, .6)"); .background-image (~ "lineær gradient (bunn, # ee2c4f 0%, # dc2344 10,5%, # fc6b85 100%)");
Vi skal nå legge til en ny skygge til PanelHeadBG mixin vi allerede har opprettet. Du kommer til å huske fra del 1 i denne opplæringen at vi måtte lage ytterligere skygger på andre lag på grunn av at Photoshop ikke kunne håndtere flere dråpeskygger på ett lag.
I din PSD velger du panelhovedets andre skyggelag og kopi bare koden mellom parentesen på box-shadow linje, som skal være:
0 5px 3px rgba (0,0,0, .27)
I PanelHeadBG mixin du nettopp opprettet, legg til et komma før den avsluttende parentesen til den eksisterende box-shadow linje, og lim deretter inn koden du nettopp tok fra CSSHat for å gi deg:
.boksskygge (~ "0 3px 0 # cc2241, innsett 0 0 5px rgba (222,42,74, .6), 0 5px 3px rgba (0,0,0, .27)");
I din PSD velger du paneltekstteksten, og kopierer CSSHat-genererte koden til en ny mixin som heter PanelHeadText:
.PanelHeadText () farge: #fff; font-familie: "Roboto"; skriftstørrelse: 24px; tekstskygge: 0 -1px 0 # b50020;
Legg til følgende nye stilkode:
.panelhode margin: 60px -15px; polstring: 20px; .PanelHeadBG (); // lagt skrifttype vekt font-weight: 400; .PanelHeadText ();
Legg merke til at vi la til en font-vekt av 400 manuelt gitt Photoshop kan ikke behandle numeriske skrifttype vektverdier.
Du bør nå se:
Oppdater din eksisterende HTML-kode for HTML igjen, denne gangen til følgende:
I DENNE TUTORIALEN:Lær hvordan du designer i Photoshop og utdata
standard klar CSS3 + Base64-kode.Det betyr ingen bilder og minimal HTTP
forespørsler om ultra effektiv lasting.CSSHat + PNGHat + MINDRE + FontAwesome
I PSD-en din, velg lettere tyngre tekstlag på informasjonspanelet og kopier CSSHat generert kode til en ny mixin som heter PanelText:
.PanelText () color: # 6b6b6b; font-familie: "Roboto"; skriftstørrelse: 36px;
Velg nå laget som inneholder tykkere info panelet tekst og kopier CSSHat genererte koden til en ny mixin navngitt UsingTheseText:
.UsingTheseText () color: # 6b6b6b; font-familie: "Roboto"; skriftstørrelse: 48px;
Oppdater eksisterende .panel stil til:
.panel maksimal bredde: 1200px; bredde: 100%; margin: 0 auto; polstring-bunn: 50px; tekst-align: center; .PanelBG (); .PanelText (); font-weight: 100; p margin: 1.2em 0;
Dette legger til PanelText mixin så vel som en numerisk skrifttypevekt og litt marginkontroll for avsnitt i informasjonspanelet.
Legg også til følgende nye stilkode, under .panel klasse:
.usingthese // lagt skrifttype vekt skrift-vekt: 900; .UsingTheseText (); .highlight color: # EF3D5C;
Dette gjelder større og tykkere skrifttypestyling til bunnlinjen i teksten, i tillegg til å legge til fargerte høydepunkter.
Du bør nå se:
Legg til følgende kode under info-panelet ditt:
Fordi vi innlemmet FontAwesome.less i vårt prosjekt tidligere, vil denne HTML automatisk plassere vår nedpilen bare ved bruk av klassene fa og fa-pil-ned til en Jeg (ikon) element.
Først vil det vises i sin standard små, svarte stat, så alt vi trenger å gjøre er å stil det som vi ville noe annet tekstelement.
I din PSD velger du det store nedpilen og kopierer CSSHat generert kode til en ny mixin som heter Pil ned:
.DownArrow () opacity: .3; farge: # 6b6b6b; font-familie: "FontAwesome"; skriftstørrelse: 200px;
Legg til følgende nye stilkode:
.downarrow margin: 80px auto; tekst-align: center; jeg .DownArrow ();
Du bør nå se dette under ditt informasjonspanel:
Legg til følgende kode under den store pilen html:
Som med vår nedpilen, bruker vi FontAwesome-klassene fa og fa-caret høyre Plasser automatisk ikonet vi vil bruke, i dette tilfellet en pil med høyre pek.
I din PSD, velg ditt startknapp rektangellag og kopier CSSHat generert kode til en ny mixin som heter StartButtonBG:
.StartButtonBG () .border-radius (10px); bakgrunnsfarge: # ef3d5d; .box-skygge (~ "0 3px 0 # cc2241, innsett 0 0 5px rgba (222,42,74, .6)"); .background-image (~ "lineær gradient (bunn, # ee2c4f 0%, # dc2344 10,5%, # fc6b85 100%)");
Akkurat som vi gjorde med paneloverskriften, legger vi nå en ny skygge til mixin vi nettopp har opprettet.
I din PSD velger du knappens andre skyggelag og kopi bare koden mellom parentesen på box-shadow linje:
0 5px 3px rgba (0,0,0, .27)
I StartButtonBG mixin legg til et komma før den avsluttende parentesen til den eksisterende box-shadow linje, og lim deretter inn koden du nettopp tok fra CSSHat for å gi deg:
.boksskygge (~ "0 3px 0 # cc2241, innsett 0 0 5px rgba (222,42,74, .6), 0 5px 3px rgba (0,0,0, .27)");
Velg tekstlaget på startknappen din og kopier CSSHat generert kode til en ny mixin som heter StartButtonText:
.StartButtonText () color: #fff; font-familie: "Roboto"; skriftstørrelse: 36px; tekstskygge: 0 -1px 0 # b50020;
Legg til følgende nye stilkode:
.buttonrow text-align: center; margin: 20px auto; .start border: 0; polstring: 0.75em 1em; display: inline-block; .StartButtonBG (); .StartButtonText ();
Den første .buttonrow Klassen fungerer bare for å sentrere knappen, mens den andre .start Klassen gjelder både knappens bakgrunn og tekst styling.
Du bør nå se:
I dette tilfellet trenger vi ikke noen ekstra HTML mens vi jobber med knappen HTML lagt til i det siste trinnet.
I din PSD velger du det lille sirkelaget over knappen din og kopierer den CSSHat genererte koden til en ny mixin som heter ArrowCircle:
.ArrowCircle () .border-radius (23px); bakgrunnsfarge: # ef3d5d; .background-image (~ "lineær gradient (bunn, # ef4f6b 0%, # e32d4f 100%)");
Velg nå det lille, høyre pekende hvite pilelaget, og kopier CSSHat generert kode til en ny mixin som heter Høyre pil:
.RightArrow () color: #fff; font-familie: "FontAwesome"; skriftstørrelse: 36px;
Legg til følgende nye stilkode:
.arrowcircle display: inline-block; tekst-align: center; polstring-venstre: 7px; margin-høyre: 10px; .size (47px); .ArrowCircle (); i.rightarrow font-style: normal; skjerm: blokk; linjehøyde: 50px; .Høyre pil();
Du bør nå se:
Legg til følgende kode under startknappen HTML:
I din PSD velger du laget som holder de to små konsentriske gråkretsene og kopierer den CSSHat genererte koden til en ny mixin som heter CenteredCircle:
.CenteredCircle () border: 5px solid #ddd; .border-radius (20 piksler); bakgrunnsfarge: # f1f1f1; .background-image (~ "radial-gradient (midtpunkt, 100px 100px, #ddd 0%, #ddd 39,99%, # f1f1f1 44,75%, # f1f1f1 100%)");
Dette er det eneste stedet jeg fant CSSHat-utgangen, stemmer ikke helt overens med det jeg hadde i PSD. Endre mixin s bakgrunnsbilde linje, erstatning midtpunkt, 100px 100px med senter, ellipsdeksel som så:
.bakgrunnsbilde (~ "radialgradient (senter, ellipsdeksel, #ddd 0%, #ddd 39,99%, # f1f1f1 44,75%, # f1f1f1 100%)");
Legg til følgende nye stilkode:
.bottomtrim margin: 120px 0; høyde: 15px; border-top: 5px solid #ddd; border-bottom: 5px solid #ddd; tekst-align: center; .centercircle display: inline-block; margin-topp: -17px; .size (40px); .CenteredCircle ();
Den første klassen .bottomtrim skaper de to grå linjene i vår bunnkledning, mens .centeredcircle klassestørrelser og posisjonerer våre konsentriske grå sirkler over de to linjene.
Du bør nå se dette i bunnen av designet ditt:
Det er det! Du bør nå ha ditt ferdige statiske design i all sin rene kode herlighet, ser slik ut:
Vi har holdt alt ganske enkelt for denne veiledningens formål, men det er mye mer du kan gjøre med koden som er involvert i denne prosessen hvis du foretrekker.
I noen tilfeller har vi dobbelt på stiler ved å bruke fontfamilienes deklarasjoner og farger, slik at du kan definere skriftfamilier og farger som variabler, og bruk dem i stedet for enklere oppdatering senere.
CSSHat støtter også utdata i Stylus + Nib og Sass / SCSS + Compass, så hvis en av disse er din foretrukne preprosessor, kan du prøve å bruke disse i stedet.
Accentsconagua