Share
Vad du ska skapaI den tidigare handledningen behandlade vi hur du förbereder en design i Photoshop, redo för konvertering till ren CSS3 och Base64-kod. I den här handledningen hanterar vi själva kodgenereringen, med hjälp av Photoshop plugins CSSHat och PNGHat som gjorts av Source, liksom FontAwesome och CSS preprocessor LESS.
Låt oss dyka rakt in!
Till att börja med måste du skapa en ny mapp på din dator för att hysa din statiska webbplats. I det här fallet heter jag min mapp codedup.
Inne i den mappen skapar du en ny fil med namnet index.html och lägg till följande kod:
Photoshop till ren kod med CSSHat och PNGHat
Här ställer vi upp det grundläggande HTML-skalet för webbplatsen och länkar i Roboto, Google-teckensnittet som vi använde i vår PSD, liksom vad som ska vara vårt CSS-stilark.
Skapa sedan två undermappar i din codedup mapp, en namngiven css och den andra som heter MINDRE. Inuti MINDRE mapp skapa en fil med namnet style.less. Alla stilar för din webbplats kommer att skrivas in i den här filen och kompileras därefter till css> style.css.
När vi går med er style.less filen ska ha sin kod organiserad i denna ordning:
Jag rekommenderar att du lägger till en kommentar högst upp i varje avsnitt i din style.less fil som hjälper dig att hålla reda på var olika typer av kod ska placeras.
Om du föredrar kan du skapa separata filer (partiklar) för att hysa var och en av dessa typer av kod och importera var och en av dem till din huvudsakliga LESS-fil. Men för att hålla sakerna enkla här använder vi bara en fil.
Prepros är en applikation som hanterar alla typer av frontändningsuppgifter för webbdesigners och utvecklare. Den kommer att kompilera MINDRE, uppdatera webbläsaren automatiskt när det ändras till våra filer, synkronisera även flera enheter om vi vill. Hämta och installera Prepros, som du kan få gratis från: http://alphapixels.com/prepros/
Kör programmet och dra sedan codedup mapp på huvudgränssnittet för att lägga till det som ett nytt projekt.
Prepros upptäcker automatiskt style.less filen i din projektmapp och som standard har "Auto Compile" aktiverat. Varje gång du sparar en ändring till style.less Prepros kommer att upptäcka det sedan kompilera in i css> style.css.
Du kan också klicka på style.less i gränssnittet för att se extra tillgängliga inställningar, till exempel möjligheten att komprimera CSS under sammanställningen.
Gå nu och ta tag i filerna för LESSHat, ett mixin-bibliotek som binder vackert med CSSHat, liksom Normalize.less, en version av "Normalize.css" som skrivs i MINSTEN vänlig syntax.
När du har laddat ner de två filerna och placerat dem i ditt projekt går du tillbaka till Prepros och du ser att den automatiskt har upptäckt dem båda. Vi ska importera båda dessa till vårt huvud style.less och vi vill inte att de sammanställer i enskilda CSS-filer, så klicka på var och en avmarkera "Auto Compile".
Öppna nu din style.less filen i din föredragna kodredigerare och lägg till dessa två rader till toppen:
@import "lesshat.less"; @import "normalize.less";
Spara filen och Prepros kommer automatiskt att kompilera det för dig, varefter du ska se följande popup i nedre högra hörnet på skärmen:
Nu ska du också se filen style.css inuti ditt projekt css mapp.
Vi kommer nu att integrera FontAwesome i projektet genom att lägga till teckensnittsfilerna själva såväl som "FontAwesome.less", en förbyggd LESS-bibliotek som gör det otroligt enkelt att placera FontAwesome-ikoner i dina mönster. Allt vi behöver göra är att importera filen och sedan blir FontAwesome-klasserna direkt tillgängliga.
Du får se hur det här fungerar i praktiken senare i handledningen när vi lägger till vårt "stora nedåtpil" -element.
Börja med att skapa en undermapp som heter font-häftigt inuti din MINDRE mapp. Det finns en hel del filer i FontAwesome bibliotek så vi håller dem inne här för att hålla våra organismer organiserade
Hämta FontAwesome som en zip från: https://github.com/FortAwesome/Font-Awesome
Extrahera mappen och kopiera alla filer från sin mindre mapp och klistra in dem i font-awesome mapp som du just skapat i ditt projekt. Kopiera sedan hela typsnitt mapp från din unzipped FontAwesome-hämtning och klistra in den som en undermapp i ditt projekt.
Din fullständiga projektfil och mappstruktur ska nu se ut så här:
Prepros kommer igen att upptäcka nya MINDER filer, så avmarkera "Auto Compile" på alla filer som nu visas i gränssnittet.
Lägg till följande rad i din style.less fil, under de linjer du lagt till tidigare:
@import "font-awesome / font-awesome.less";
Ditt projekt har nu alla de mindre import- och fontfiler du behöver på plats och automatisk samling aktiverad, så vi är redo att börja översätta din PSD till kod.
I den tidigare handledningen valde vi mönstret "Satin Weave" till kakel över vår bakgrund på grund av sin lilla storlek och låga antal färger. Vi ska nu använda PNGHat-pluginet för att konvertera det till en sträng av Base64-kod.
Öppna upp PSD i Photoshop. Vi vet att mönstrets dimensioner är 24px breda med 12px höga, så fortsätt och använd din markering för att skapa ett urval av den storleken någonstans på din design.
Nu måste du se till att bakgrundsskiktet som har det mönster som appliceras på det är valt, öppna ditt PNGHat-fönster. Allt du behöver göra är att klicka på alternativet "Base 64" i den övre raden i fönstret och klicka sedan på "Exportera markerade lager".
Du kommer att se en dialog visas och be om bekräftelse du vill "Beskära bild genom val?". Klick Ja och du kommer att se din Base64-strängutmatning i det nedre utrymmet i PNGHat-fönstret. Klicka på Kopia knapp.
Gå tillbaka till din style.less fil och klistra in koden du just kopierat från PNGHat till din "Variabler" sektion. Ta bort allt från den inmatade koden med undantag för url (data ...); och lägg sedan till @satinweave: i början av linjen. Du borde sluta med:
@satinweave: url (data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAABgAAAAMAgMAAAAFXpXmAAAABGdBTUEAALGPC / xhBQAAAAlQTFRF8vLy7 + / v8fHxxV2ZvQAAADRJREFUCNdVysENADAIQlGWkRj3rodOWeDW0w8 + 0axlg5wlFW / FGyEdTUpeESKOqXBN8 + cB4yUS37 / ediwAAAAASUVORK5CYII =);
Vi är nu redo att placera vårt nya, lätta att använda @satinweave variabel i en stil så det kommer att dyka upp i vår design. Medan vi är på det lägger vi också till ett par grundläggande regler för hela webbplatsen box-dimensionering och länkinställningar.
Lägg till följande kod i avsnittet "Stilar" i din styles.less fil:
* .box-dimensionering (border-box); kropp bakgrundsbild: @satinweave; överflöde-x: dolda; a, a: länk, a: besökte, a: svävar, a: aktiv text-decoration: none;
Spara filen så att Prepros sammanställer dina ändringar i din style.css fil.
Gå till Prepros, klicka på Fler alternativ knappen och välj Kopiera live förhandsgranskningsadress, (vilket sannolikt kommer att vara http: // localhost: 8000), klistra in det i din webbläsare.
Detta ger dig en förhandsgranskning av din statiska webbplats som automatiskt laddar upp varje gång Prepros sammanställer din kod.
Du borde nu se ditt rena Base64-mönster kakel över bakgrunden på sidan.
Det kan inte vara enklare att få CSSHat att utföra CSS3 för varje designelement. Välj bara det aktuella lagret med CSSHat-fönstret öppet och det genererar automatiskt koden du behöver.
Det finns några alternativ du kan välja mellan i inställningarna i CSSHat-fönstret. I vårt fall vill vi att vår kod ska matas ut som MINDRE, och vi vill att alla små knappar längst ner i CSSHat-fönstret (kommentarer, dimensioner, prefix, regel) ska avaktiveras. Ditt CSSHat-fönster ska se ut så här:
Observera att du kan få CSSHat att generera längd och breddskod för dig i px värden genom att klicka på den fjärde knappen (som ser ut som en liten fyrkant med mindre rutor på hörnen). Men jag föredrar att skriva min egen, så jag kan lättare använda rem / em / % värden där jag behöver dem.
När koden för ditt valda lager har skapats klickar du bara på Kopia knappen längst ner i fönstret, redo att klistra in i din style.less fil.
Vi fortsätter nu med att lägga till resten av dina designelement via CSS.
Eftersom CSSHat gör det så enkelt kan vi använda en ganska stor standardprocess som just upprepas tills din design är fullt kodad upp.
För varje element börjar vi genom att lägga till motsvarande HTML till index.html fil.
Därefter kommer varje nytt element att innebära att du lägger till en eller flera MINDER mixiner, som vi ska använda för att hålla CSS3 genererad av CSSHat. Det är användbart att hålla din CSSHat-genererade kod skild från resten av din stilkod så att du enkelt kan uppdatera den om du ändrar din design. Du bör lägga till nya mixins till "Mixins" -delen av din style.less fil, som beskrivits ovan.
Slutligen lägger du till de faktiska CSS-stilar som kommer att matas ut till ditt stilark. Dessa stilar kommer att innehålla dina mixins samt en extra kod som jag ska ge för att styra layout, dimensioner och aspekter. Photoshop kan inte hantera t.ex. numeriska teckensnitt och "en sida åt gången". Dina stilar ska läggas till i avsnittet "Stilar" i din style.less fil.
Vi skapar varje designelement i samma ordning som vi gjorde i den föregående delen av denna handledning för att göra det enkelt att hänvisa om du behöver.
Lägg till följande mellan dina öppnings- och stängningskroppar.
Välj din PSDs "topp trim" lager och kopiera den CSSHat genererade koden:
opacitet: .5; bakgrundsfärg: #ddd; .box-skugga (~ "0 2px 1px #fff, inset 0 -2px 4px # c8c8c8");
I din style.less fil skapa en ny mixin heter TopTrim och klistra in i din CSSHat-kod så här:
.TopTrim () opacitet: .5; bakgrundsfärg: #ddd; .box-skugga (~ "0 2px 1px #fff, inset 0 -2px 4px # c8c8c8");
Vi ska nu införliva din nya mixin i avsnittet "Stilar" i din style.less fil. Lägg till följande nya stilkod:
// Topp trim .toptrim höjd: 8px; marginalbotten: 62px; .TopTrim ();
I ovanstående kod drar vi ut våra CSSHat-genererade stilar via TopTrim-mixin, samt ställer in de dimensioner som vi behöver.
Du borde nu se din "topp trim" springa över toppen av din webbplats.
Lägg till följande nedan den senaste HTML-filen du lagt till:
Välj din PSDs "menuwrap" -lager, kopiera den CSSHat-genererade koden och klistra in den i en ny mixin som heter MenuWrapBG:
.MenuWrapBG () .border-radius (12px); bakgrundsfärg: # f9f9f9; .box-skugga (~ "0 1px 2px #fff, inset 0 1px 10px rgba (0,0,0, .15)"); .background-image (~ "linjär gradient (botten, #fff 0%, # f3f3f3 100%)");
Lägg till följande nya stilkod:
// Meny. Menuwrap min-höjd: 61px; maxbredd: 1200px; bredd: 100%; marginal: 0 auto; vaddering: 5px; .MenuWrapBG;
Du borde nu se:
Uppdatera din befintliga menykod till följande:
Välj din PSD menubg lag och kopiera den CSSHat genererade koden till en ny mixin som heter MainMenuBG:
.MainMenuBG () border: 1px solid # e4e4e4; .border-radie (11px); bakgrundsfärg: #fff; .box-skugga (~ "0 3px 4px rgba (193,193,193, .75)"); .background-image (~ "linjär gradient (botten, # e5e5e5 0%, #fff 100%)");
Lägg till följande nya stilkod:
ul.mainmenu vaddering: 0 15px; marginal: 0; lista-stil-typ: none; min-höjd: 50px; .MainMenuBG ();
Du borde nu se:
Uppdatera din befintliga menykod till följande:
I din PSD väljer du en av dina menyalternativ rektanglar och kopierar den CSSHat genererade koden till en ny mixin som heter MenuItemBG:
.MenuItemBG () .background-image (~ "linjär gradient (botten, #eee 0%, # e4e4e4 25,49%, #fbfbfb 100%)");
I din PSD väljer du texten i ett av dina menyalternativ och kopierar den genererade CSSHat-koden till en ny mixin som heter MenuItemText:
.MenuItemText () färg: # 5b5b5b; font-family: "Roboto"; typsnittstorlek: 18px; textskugga: 0 1px 0 #fff;
Uppdatera det befintliga ul.mainmenu stil enligt följande.
ul.mainmenu vaddering: 0 15px; marginal: 0; lista-stil-typ: none; min-höjd: 50px; .MainMenuBG (); li display: block; flyta till vänster; vaddering: 0; border-top: 1px fast rgba (0,0,0,0); gränsbotten: 1px fast #dddddd; gränsen-höger: 1px fast #dddddd; gräns vänster: 1px fast rgba (0,0,0,0); &: först-av-typ gräns-vänster: 1px fast #dddddd; .MenuTemBG (); a, a: länk, a: besökte display: block; höjd: 47px; linjehöjd: 47px; vaddering: 0 30px; // Added font weight font-weight: 400; .MenuItemText ();
Vi använder LESS-reglering så alla li barn av ul.mainmenu kommer att påverkas.
Du kommer också ihåg i den tidigare handledningen att vi manuellt skulle använda linjed verktyget för att underlätta ett färgval för våra menygränser, med tanke på att Photoshop inte kunde ställa in varje gränssida individuellt. I ovanstående ser vi att vi införlivar dessa gränsstilar med hjälp av färgkoden #dddddd vi valde under det skedet.
Vi lade också till några transparenta gränser på menyns övre och vänstra sida. Anledningen till detta är att vår nuvarande artikel / svängareffekt kommer att använda gränser på alla fyra sidorna, så vi måste se till att det finns en matchande bredd på menyalternativ i standard- och svävartillstånd.
Och äntligen har vi manuellt lagt till rätt font-weight av 400 till menyobjektet eftersom Photoshop bara kan arbeta med värden som "normal" eller "fet".
Du borde nu se:
I det här fallet behöver vi inte någon extra HTML eftersom vi redan har lagt till ett menyalternativ med klassen "ström" som applicerades på det i det sista steget.
I din PSD, välj rektangeln i ditt "aktuella" menyalternativ och kopiera den CSSHat genererade koden till en ny mixin som heter CurrentMenuItemBG:
.CurrentMenuItemBG () border: 1px solid # e62d4e; bakgrundsfärg: # ef3d5d; .box-skugga (~ "0 1px 0 # cc2241, inset 0 2px 5px rgba (250.171.185, .6)"); .background-image (~ "linjär gradient (botten, # ef3d5d 0%, # dc2344 25,49%, # fc6b85 100%)");
Välj nu texten på ditt "aktuella" menyalternativ och kopiera den CSSHat genererade koden till en ny mixin som heter CurrentMenuItemText:
.CurrentMenuItemText () färg: #fff; font-family: "Roboto"; typsnittstorlek: 18px; textskugga: 0 -1px 0 # b50020;
Uppdatera det befintliga ul.mainmenu stil enligt följande.
ul.mainmenu vaddering: 0 15px; marginal: 0; lista-stil-typ: none; min-höjd: 50px; .MainMenuBG (); li display: block; flyta till vänster; vaddering: 0; border-top: 1px fast rgba (0,0,0,0); gränsbotten: 1px fast rgba (0,0,0,0,05); gräns-höger: 1px solid rgba (0,0,0,0,05); gräns vänster: 1px fast rgba (0,0,0,0); &: första-av-typ gräns vänster: 1px solid rgba (0,0,0,0,05); .MenuTemBG (); a, a: länk, a: besökte display: block; höjd: 47px; linjehöjd: 47px; vaddering: 0 30px; // Added font weight font-weight: 400; .MenuItemText (); &: sväva .CurrentMenuItemBG (); a, a: länk, en: besökta .CurrentMenuItemText () li.current .CurrentMenuItemBG (); a, a: länk, en: besökte .CurrentMenuItemText ()
Och för att tillåta menyalternativen att tryckas på flera rader om det finns två många för den tillgängliga bredden, lägg till följande clearfix-kod under din befintliga menyklass.
ul.mainmenu: före, ul.mainmenu: efter innehåll: ""; display: bord; ul.mainmenu: efter clear: both;
Nu borde du se "aktuell" stil som tillämpas både på det aktuella menyalternativet och svängningseffekten:
Lägg till följande kod under din meny HTML:
Visste du att du kan
Har din Photoshop
OCH DIN
Ren kod också?
I din PSD väljer du antingen den första eller tredje huvudtextlinjen (tunn grå text) och kopierar den CSSHat genererade koden till en ny mixin som heter ThinText:
.ThinText () färg: # 6b6b6b; font-family: "Roboto"; typsnittstorlek: 48px;
I din PSD väljer du antingen den andra eller fjärde huvudtextlinjen (tjock text) och kopierar den CSSHat genererade koden till en ny mixin som heter ThickText:
.ThickText () färg: # ef3d5d; font-family: "Roboto"; typsnittstorlek: 80px; font-weight: bold;
Lägg till följande nya stilkod:
// Huvudtextlinjer .maintext padding: 70px 0; text-align: center; .thintext margin: 0.425em 0; // Added font weight font-weight: 100; .ThinText (); .thicktext margin: 0.425em 0; .ThickText ();
Du bör nu se detta under din meny:
Lägg till följande kod:
I din PSD väljer du din bakgrundsrektangel för informationspanelen och kopierar den genererade CSSHat-koden till en ny mixin som heter PanelBG:
// Panel mixins .PanelBG () border: 1px solid # d7d7d7; .border-radie (15 bildpunkter); bakgrundsfärg: #fff; .box-skugga (~ "0 3px 4px rgba (193,193,193, .27)");
Lägg till följande nya stilkod:
.panel maxbredd: 1200px; bredd: 100%; marginal: 0 auto; vadderande botten: 50px; text-align: center; .PanelBG ();
Du bör nu se din bakgrundsinformationpanel, som fortfarande är tom:
Uppdatera din informationspanel HTML till följande:
I DENNA TUTORIAL:
I din PSD väljer du bakgrundsskiktet på panelen och kopierar den kodade CSSHat-koden till en ny mixin som heter PanelHeadBG:
.PanelHeadBG () .border-radius (10px); bakgrundsfärg: # ef3d5d; .box-skugga (~ "0 3px 0 # cc2241, inset 0 0 5px rgba (222,42,74, .6)"); .background-image (~ "linjär gradient (botten, # ee2c4f 0%, # dc2344 10,5%, # fc6b85 100%)");
Vi ska nu lägga till en andra skugga till PanelHeadBG mixin som vi redan har skapat. Du kommer ihåg från del 1 i denna handledning att vi var tvungna att skapa ytterligare skuggor på andra lager på grund av att Photoshop inte kunde hantera flera droppskuggor i ett lager.
I din PSD väljer du det andra skuggskiktet och kopian i panelen endast koden mellan parentesen på box-shadow linje, som borde vara:
0 5px 3px rgba (0,0,0, .27)
I PanelHeadBG mixin du just skapat, lägg till ett kommatecken innan den stängande parentesen för den befintliga box-shadow linje, klistra sedan in den kod du just tog från CSSHat för att ge dig:
.boxskugga (~ "0 3px 0 # cc2241, inset 0 0 5px rgba (222,42,74, .6), 0 5px 3px rgba (0,0,0, .27)");
I din PSD väljer du din text på panelen och kopierar den genererade CSSHat-koden till en ny mixin som heter PanelHeadText:
.PanelHeadText () färg: #fff; font-family: "Roboto"; typsnittstorlek: 24px; textskugga: 0 -1px 0 # b50020;
Lägg till följande nya stilkod:
.panelhuvudet marginal: 60px -15px; vaddering: 20px; .PanelHeadBG (); // Added font weight font-weight: 400; .PanelHeadText ();
Observera att vi lagt till en font-weight av 400 manuellt ges Photoshop kan inte bearbeta numeriska teckensnitt viktvärden.
Du borde nu se:
Uppdatera din befintliga HTML-kod på panelen igen, den här gången till följande:
I DENNA TUTORIAL:Lär dig hur du designar i Photoshop och utdata
standard redo ren CSS3 + Base64-kod.Det betyder inga bilder och minimal HTTP
begäran om ultra effektiv belastning.CSSHat + PNGHat + MINDRE + FontAwesome
I din PSD, välj textskiktet för ljusare vikt på informationspanelen och kopiera den CSSHat genererade koden till en ny mixin som heter PanelText:
.PanelText () färg: # 6b6b6b; font-family: "Roboto"; typsnittstorlek: 36px;
Välj nu skiktet som innehåller textfältet för tjockare vikt och kopiera den genererade CSSHat-koden till en ny mixin som heter UsingTheseText:
.UsingTheseText () color: # 6b6b6b; font-family: "Roboto"; typsnittstorlek: 48px;
Uppdatera det befintliga .panel stil till:
.panel maxbredd: 1200px; bredd: 100%; marginal: 0 auto; vadderande botten: 50px; text-align: center; .PanelBG (); .PanelText (); font-vikt: 100; p margin: 1.2em 0;
Detta lägger till PanelText mixin samt en numerisk typsnittsvikt och viss marginalkontroll för stycken i informationspanelen.
Lägg även till följande nya stilkod under .panel klass:
.usingthese // added font font font: 900; .UsingTheseText (); .highlight color: # EF3D5C;
Detta gäller den större och tjockare typsnittstypen till textens botten samt att lägga till färgade höjdpunkter.
Du borde nu se:
Lägg till följande kod under din informationspanel:
Eftersom vi införde FontAwesome.less i vårt projekt tidigare kommer denna HTML automatiskt att placera vår nedåtpil helt enkelt via tillämpning av klasserna fa och FA-pil ner till en jag (ikon) element.
Först kommer det att visas i sitt vanliga lilla svarta tillstånd, så allt vi behöver göra är att stile det som vi skulle något annat textelement.
Välj din stora nedre pilen i din PSD och kopiera den CSSHat genererade koden till en ny mixin som heter Nedåtpil:
.DownArrow () opacitet: .3; färg: # 6b6b6b; font-family: "FontAwesome"; fontstorlek: 200px;
Lägg till följande nya stilkod:
.downarrow margin: 80px auto; text-align: center; jag .DownArrow ();
Du bör nu se detta under din informationspanel:
Lägg till följande kod under den stora pilen html:
Precis som med vår nedåtpil, använder vi FontAwesome-klasserna fa och FA-cirkumflex höger Placera automatiskt ikonen vi vill använda, i det här fallet en högerpekad pil.
I din PSD väljer du ditt startknapp rektangellager och kopierar den CSSHat genererade koden till en ny mixin som heter StartButtonBG:
.StartButtonBG () .border-radius (10px); bakgrundsfärg: # ef3d5d; .box-skugga (~ "0 3px 0 # cc2241, inset 0 0 5px rgba (222,42,74, .6)"); .background-image (~ "linjär gradient (botten, # ee2c4f 0%, # dc2344 10,5%, # fc6b85 100%)");
Precis som vi gjorde med panelhuvudet lägger vi nu en ny skugga till mixin som vi just skapat.
I din PSD, välj din andra skuggskikt och kopiera endast koden mellan parentesen på box-shadow linje:
0 5px 3px rgba (0,0,0, .27)
I StartButtonBG mixin lägg till ett kommatecken före den befintliga stängnings parentesen box-shadow linje, klistra sedan in den kod du just tog från CSSHat för att ge dig:
.boxskugga (~ "0 3px 0 # cc2241, inset 0 0 5px rgba (222,42,74, .6), 0 5px 3px rgba (0,0,0, .27)");
Välj textlagret på startknappen och kopiera den genererade CSSHat-koden till en ny mixin som heter StartButtonText:
.StartButtonText () färg: #fff; font-family: "Roboto"; typsnittstorlek: 36px; textskugga: 0 -1px 0 # b50020;
Lägg till följande nya stilkod:
.knappvals text-align: center; marginal: 20px auto; .start border: 0; vaddering: 0,75em 1em; display: inline-block; .StartButtonBG (); .StartButtonText ();
Den första .buttonrow Klassen agerar helt enkelt för att centrera knappen medan den andra .Start klassen gäller både knappens bakgrund och textstyling.
Du borde nu se:
I det här fallet behöver vi inte någon extra HTML eftersom vi arbetar med knappen HTML som lagts till i det sista steget.
I din PSD väljer du det lilla cirkellagret över din knapp och kopierar den genererade CSSHat-koden till en ny mixin som heter ArrowCircle:
.ArrowCircle () .border-radius (23px); bakgrundsfärg: # ef3d5d; .background-image (~ "linjär gradient (botten, # ef4f6b 0%, # e32d4f 100%)");
Välj nu det lilla högerpekande vita pilskiktet och kopiera den CSSHat genererade koden till en ny mixin som heter Höger pil:
.RightArrow () färg: #fff; font-family: "FontAwesome"; typsnittstorlek: 36px;
Lägg till följande nya stilkod:
.arrowcircle display: inline-block; text-align: center; padding-left: 7px; marginal-höger: 10px; .size (47px); .ArrowCircle (); i.rightarrow font-style: normal; display: block; linjehöjd: 50px; .Höger pil();
Du borde nu se:
Lägg till följande kod under din startknapp HTML:
I din PSD väljer du skiktet som håller de två små koncentriska gråcirklarna och kopierar den CSSHat genererade koden till en ny mixin som heter CenteredCircle:
.CenteredCircle () border: 5px solid #ddd; .border-radie (20 bildpunkter); bakgrundsfärg: # f1f1f1; .background-image (~ "radial-gradient (center center, 100px 100px, #ddd 0%, #ddd 39,99%, #f1f1f1 44,75%, #f1f1f1 100%)");
Det här är det enda stället jag hittade CSSHat-utgången, var det inte riktigt vad jag hade i PSD. Byt mixin s bakgrundsbild linje, ersätter centrum, 100px 100px med centrum, ellipsskydd såhär:
.Bakgrundsbild (~ "radialgradient (centrum, ellipsdäck, #ddd 0%, #ddd 39,99%, # f1f1f1 44,75%, # f1f1f1 100%)");
Lägg till följande nya stilkod:
.bottomtrim margin: 120px 0; höjd: 15px; border-top: 5px solid #ddd; border-bottom: 5px solid #ddd; text-align: center; .centercircle display: inline-block; margin-top: -17px; .size (40 bildpunkter); .CenteredCircle ();
Den första klassen .bottomtrim skapar de två gråa linjerna i vår botten trim, medan .centeredcircle klassstorlekar och positionerar våra koncentriska gråcirklar över de två linjerna.
Du borde nu se detta längst ner i din design:
Det är allt! Du borde nu få din färdiga statiska design i all sin rena kodlighet, så här:
Vi har hållit allt ganska enkelt för syftet med denna handledning, men det finns mycket mer du kan göra med koden som är inblandad i denna process om du föredrar.
I vissa fall har vi dubbelt upp på stilar genom att återanvända teckensnittsfamiljdeklarationer och färger, så att du kan definiera typfamiljer och färger som
Accentsconagua