- kode photoshop opbygning med csshat, lesshat og pnghat,,,,,,, hvad du gerne vil være, at, i det foregående tutorielle vi dækkede, hvordan en konstruktion i photoshop, klar til omstilling til ren css3 og base64 - kode.i denne lektion vi klarer den konkrete kode generation, med hjælp fra photoshop plugins csshat og pnghat ved kilden, samt fontawesome og css preprocessor mindre. lad os dykke ind!,, skabe din fil, og mappe struktur , til at begynde med , du bliver nødt til at skabe en ny mappe på din computer til hus din statiske websted.i dette tilfælde udnævner jeg min mappe , codedup,. , i den mappe, skabe en ny fil, der hedder , index.html, og tilføje, at det følgende kode:,, <!doctype html > < http: //lang = ", en" > < head > < meta - charset = "utf - 8" > < afsnit > photoshop til ren kode med csshat og pnghat < /afsnit > < forbindelse href = http://fonts.googleapis.com/css?familie = roboto: 100300400700900 "rel ='stylesheet type ='text /css" > < forbindelse rel = "stylesheet" href = "css /stil. css" > < /head > < krop > < /organ > og lt; /html >,, her er vi fastlæggelsen af de grundlæggende html shell på lokaliteten, og at sammenknytte roboto, google skrifttype, vi brugte i vores psd, samt hvad der vil være vores css stylesheet.,, skabe to subfolders inden for deres , codedup, mappe, ved navn , css, og den anden hed , mindre. i , mindre, mappe, skabe et dossier, der hedder , stil. mindre.alle former for deres websted vil blive skrevet ind i denne sag, og derefter udarbejdet i , css > stil. css,.,, note: struktur for mindre fil, som vi følger din , stil. mindre, fil har en kode organiseret i denne rækkefølge:,, import, variabler, mixins, styles, anbefaler jeg, at tilføje en bemærkning i toppen af hvert afsnit i deres , stil. mindre, fil at hjælpe dig med at holde styr på, hvor forskellige typer kode bør placeres.,, hvis du vil, kan du skabe særskilte filer (delvise) hjem hver af disse typer af kode import på hver af dem i deres vigtigste mindre fil.men for at holde det enkelt her bliver vi bare ved hjælp af en fil, fælde auto - udarbejdelse af med prepros,, prepros er en ansøgning, der tager sig af alle former for front opgaver for webdesignere og entreprenører.det vil udarbejde vores mindre, auto - browseren, når der foretages ændringer i vores dokumenter, selv synkronisere forskellige anordninger, hvis vi vil. downloade og installere prepros, som du kan få gratis fra: http: ////////////////////////////alphapixels. kom prepros, løb anvendelse, så trækker , codedup, mappe på den vigtigste grænseflade til at tilføje den som et nyt projekt.,,,,, prepros automatisk vil påvise , style.less, journal på dit projekt mappe og ved misligholdelse vil have "auto udarbejde" aktiveret. , når som helst du redde en ændring til , stil. mindre, prepros vil opdage det og så udarbejde i , css > stil. css, kan du også.,,,,, klik , stil. mindre, i grænsefladen at se ekstra til rådighed indstillinger, som f.eks. muligheden for komprimering css under udarbejdelse.,, at indarbejde lessked og normalisere. mindre, værsgo og tag arkiverne for lesshat, en mixin bibliotek, der passer perfekt, sammen med csshat samt normalize.less, en version af "normalisere. css" skrevet på mindre venlige syntaks, efter at downloade de to filer, og placere dem i deres projekt, gå tilbage til prepros, og du vil se det er automatisk detekteres af dem begge to.vi vil importere begge disse i vores vigtigste , style.less, og vi vil ikke have dem at udarbejde i individuelle css filer, så klik på hver og uncheck "auto udarbejde".,,,,, åbn din , style.less, fil i deres foretrukne kode redaktør og tilføje disse to linjer til tops:,, @ import "lesshat. mindre" @ import "normalisere. mindre", redde din fil, og prepros automatisk vil samle det for dig, som du bør se følgende pop - up - i nederste højre hjørne på skærmen:,,,,, du nu også se css, indenfor, stil. dit projekt er , css, mappe.,, at indarbejde fontawesome, er vi nu skal indarbejdes fontawesome til projektet ved at tilføje den skrifttype filer sig så godt som "fontawesome. mindre", en prebuilt mindre bibliotekhvilket gør det utroligt nemt til fontawesome ikoner i dit design.alt vi skal gøre, er at indføre den fil, og så fontawesome klasser være umiddelbart tilgængelige. , vil du se, hvordan det fungerer i praksis, senere i læren når vi lægger vores "big ned pil" element.,, start ved at skabe en subfolder ved navn , skrifttype, fedt, i din , mindre , mappe.der er en hel del filer i fontawesome er biblioteket, så vi holder dem her, for at holde oursleves organiseret, downloade fontawesome som et lyn fra http: //////////////////////github. kom fortawesome skrifttype, fedt, ekstrakt mappe, og en kopi af alle filer fra dens , mindre , servietter, så sætter dem ind i den , skrifttype awesom, e, folder du skabte lige i dit projekt. så kopi hele , skrifttyper, mappe fra din løsnes fontawesome download, og sæt det som en subfolder i dit projekt.,, din fulde projekt fil og folder struktur bør nu ser sådan ud:,,,,, prepros igen vil opdage nye mindre filer, så uncheck "auto udarbejde" på alle filer, der nu findes i den grænseflade.,,,,, tilføjes følgende linje til din , stil. mindre, fil, under de budgetposter, du addøde tidligere:,, @ import font fedt /skrifttype fedt. mindre ", det nu har alle mindre import og skrifttype filer, du har brug for, er på plads, og automatisk samling aktiveret, så , vi er klar til at begynde at omsætte deres psd i kode.,, at indarbejde baggrund image som base64,, i den forrige lektion vi valgte det mønster, der hedder" satin væve "til fliser i vores baggrund på grund af landets ringe størrelse og lavt antal farver.nu skal vi bruge pnghat stik af at omdanne det til en række base64 - kode, åbne op for psd i photoshop. vi kender dimensioner af mønstret er 24px bred af 12px højt, så bare brug din plakat for at skabe en udvælgelse af den størrelse på dit design.,,,,, nu sikre baggrund lag, der er anvendt til det mønster, der pnghat, åben dit vindue.alt du skal gøre er at klik "base 64" mulighed i øverste række i vinduet, så klik på "eksport udvalgte lag". , vil du se en dialog anføres med anmodning om bekræftelse, du vil "afgrøde image ved udvælgelse?". klik, - - og du vil se din base64 - output i bunden rum i pnghat vindue.klik på det eksemplar, button.,,,,, hoved tilbage til din , style.less, fil og pasta den kode, du bare kopieret fra pnghat i din "variabler". slette alt fra limet i kode, bortset fra , url (data...), og derefter tilsættes , @ satinweave: , starten på linjen.du ender med:,, @ satinweave: url (data: image /men heller ikke dér er menneskene sikre; base64, ivborw0kggoaaaansuheugaaabgaaaamagmaaaafxpxmaaaabgdbtueaalgpc /xhbqaaaalqtfrf8vly7 + /v8fhxxv2zvqaaadrjrefucndvysenadaiqlgwkrj3rodowedw0w8 + 0axlg5wlfw /fgyedtupeeskoqxbn8 + cb4yus37 /ediwaaaaasuvork5cyii =), er vi nu klar til vores nye, let at anvende , @ satinweave, variabel i en stil, så det vil indgå i vores design. , mens vi er ved det, vil vi også gerne tilføje et par grundlæggende regler med henblik på bred, rubrik dimensionering, og forbindelsen miljøer, tilsættes følgende kode for "stil" del af din , styles.less, fil:,, * {. rubrik størrelse (grænse boks);) organ (baggrund image: @ satinweave; overflow-x: skjulte;} en: sammenhæng, en: besøgte, en: svæv, en: aktiv (tekst): ingen;}, redde dinsagen med henblik på at prepros vil udarbejde deres ændringer i din , style.css, fil.,, gå til prepros, tryk, flere valgmuligheder, knap og vælge, kopi levende forpremiere url, som sandsynligvis vil blive http: //localhost: 8000), så sæt det ind på din computer. ,,,,,, det vil give dig en forsmag på din statiske sted, der automatisk, og hver gang prepros udarbejder deres kode.,, du skal se din rene base64 - mønster på baggrund af udforelse side.,,,,, at css elementer, som skaber css3 med csshat, det kunne ikke være nemmere at have csshat produktion den css3 for hvert design element.bare vælg det lag, der er i overensstemmelse med csshat vindue åbne og den automatisk vil skabe den kode, du har brug for, er der et par muligheder, du kan vælge imellem, i indstillinger af csshat vindue.i vores tilfælde ønsker vi, at vores kode til produktionen som mindre, og vi ønsker, at alle de knapper på bunden af csshat vindue (bemærkninger, dimensioner, præfikser, regel) er deaktiveret.din csshat vindue skal se sådan ud:,,,,,, bemærke, at du kan få csshat generere højde og bredde kode for dig i , forsyning, værdier ved at klikke den fjerde knap, der ligner en lille square, med mindre pladser på sine egne). , men jeg foretrækker at skrive min egen, så jeg kan lettere anvendelse rem, / , em, / ,%, værdier, hvor jeg skal bruge dem,, når den kodeks for deres udvalgte lag har skabt bare klik den kopi, knap på bunden af vinduet, klar til indsætning i din , style.less, fil.,, element supplement - processen,, vil vi nu gå over til at tilføje resten af dit design elementer via css.,, fordi csshat gør det så nemt kan vi bruge en ret meget materiel standard - proces, som er blot gentages, indtil deres design er fuldt krypteret., for hvert element, vi skal begynde med at tilføje tilsvarende html til , index.html, fil. , efter at hvert nyt element indebærer tilføjelse af et eller flere mindre mixins, som vi kan bruge til at holde css3, der genereres af csshat.det er nyttigt at holde din csshat genereret kode adskilt fra resten af din stil kode, så du kan let ajourføre det hvis du ændrer dit design. du bør tilføje nye mixins til "mixins" del af din , stil. mindre, fil, som beskrevet ovenfor, vil du endelig tilføje faktiske css stilarter, der vil blive produktion til din stylesheet. disse stile vil optage din mixins samt nogle ekstra kode, vil jeg give til kontrol udformning, dimensioner og aspekter photoshop kan ikke klare såsom numerisk skrifttype vægt og en side ad gangen " grænser.Your styles should be added to the "Styles" section of your ,style.less, file.,,We'll be creating each design element in the same order as we did in the previous part of this tutorial to make it easy to refer back should you need to.,,Add the Top Trim,,,Add HTML:,,,Add the following in between your opening and closing body tags.,,<br><div class="toptrim"></div>,,,CSSHat:,,Select your PSD's "top trim" layer, and copy the CSSHat generated code:,,opacity: .5; background-color: #ddd; .box-shadow(~"0 2px 1px #fff, inset 0 -2px 4px #c8c8c8");,,New Mixin:,,In your ,style.less, file create a new mixin named ,TopTrim, and paste in your CSSHat code like so:,,.TopTrim(){ opacity: .5; background-color: #ddd; .box-shadow(- "0 2px 1px&#fff, indpresningsdybde 0 - 2px 4px&#c8c8c8"); den nye stil:,,,, vi vil nu tage deres nye mixin i "stil" del af din , style.less, fil.Add the following new style code:,,//Top trim .toptrim { height: 8px; margin-bottom: 62px; .TopTrim(); },,,,In the above code we're pulling out our CSSHat generated styles via the TopTrim mixin, as well as setting the layout dimensions we need.,,,Result:,,You should now see your "top trim" running across the top of your site.,,,,,Create the Menu Wrapper,,Add HTML:,,Add the following below the last HTML you added:,,<nav class="menuwrap"> </nav>,,CSSHat to New Mixin:,,Select your PSD's "menuwrap" layer, copy the CSSHat generated code, and paste it into a new mixin named ,MenuWrapBG,:,,.MenuWrapBG(){ .border-radius(12px); background-color: #f9f9f9; .box-shadow(~"0 1px 2px #fff, inset 0 1px 10px rgba(0,0,0,.15)"); .background-image(~"linear-gradient(bottom, #fff 0%, #f3f3f3 100%)"); },,New Style:,,,,Add the following new style code:,,//Menu .menuwrap { min-height: 61px; max-width: 1200px; width:100%; margin: 0 auto; padding: 5px; .MenuWrapBG; },,Result:,,You should now see:,,,,,,The Menu Background,,,Add HTML:,,Update your existing menu code to the following:,,<nav class="menuwrap"> <ul class="mainmenu"> </ul> </nav>,,CSSHat to New Mixin:,,Select your PSD's ,menubg, layer and copy the CSSHat generated code into a new mixin named ,MainMenuBG,:,,.MainMenuBG(){ border: 1px solid #e4e4e4; .border-radius(11px); background-color: #fff; .box-shadow(~"0 3px 4px rgba(193,193,193,.75)"); .background-image(~"linear-gradient(bottom, #e5e5e5 0%, #fff 100%)"); },,New Style:,,,,Add the following new style code:,,ul.mainmenu { padding: 0 15px; \tmargin: 0; \tlist-style-type: none; \tmin-height:50px; \t.MainMenuBG(); },,Result:,,You should now see:,,,,,Adding the Menu Items,,Add HTML:,,Update your existing menu code to the following:,,<nav class="menuwrap"> <ul class="mainmenu"> \t\t<li><a href="#">Page</a></li> \t\t<li class="current"><a href="#">Current</a></li> \t\t<li><a href="#">Page</a></li> \t\t<li><a href="#">Page</a></li> \t</ul> </nav>,,CSSHat to New Menu Item Background Mixin:,,In your PSD, select one of your menu item rectangles and copy the CSSHat generated code into a new mixin named ,MenuItemBG,:,,.MenuItemBG(){ .background-image(~"linear-gradient(bottom, #eee 0%, #e4e4e4 25.49%, #fbfbfb 100%)"); },,CSSHat to New Menu Item Text Mixin:,,In your PSD, select the text of one of your menu items and copy the CSSHat generated code into a new mixin named ,MenuItemText,:,,.MenuItemText(){ color: #5b5b5b; font-family: "Roboto"; font-size: 18px; text-shadow: 0 1px 0 #fff; },,,Update Your Menu Style:,,,,Update the existing ,ul.mainmenu, style as follows. ,,ul.mainmenu { padding: 0 15px; \tmargin: 0; \tlist-style-type: none; \tmin-height:50px; \t.MainMenuBG(); \tli { \t\tdisplay: block; \t\tfloat: left; \t\tpadding: 0; \t\tborder-top: 1px solid rgba (0,0,0,0); grænseoverskridende nederst: 1px fast&#g g g g g; grænseoverskridende ret: 1px fast&#g g g g g; grænse tilbage: 1px fast rgba (0,0,0,0). &: for det første type (grænse tilbage: 1px fast&#g g g g g.}. menuitembg(). en: sammenhæng, en: besøgte {angive: block, højde: 47px; linje højde: 47px; polstring: 0 30px; //tilsat skrifttype vægt skrifttype vægt: 400. menuitemtext();}}}, bruger vi mindre regel bygger rede, så alle , li, børn af , ul.mainmenu, vil blive berørt. , vil du også huske i den forrige lektion vi havde manuelt at bruge linjen værktøj til at lette en farve udvælgelse til vores menupunkt grænser i photoshop er manglende evne til at fastsætte hver grænse side individuelt.i ovenstående, vil du se at vi indarbejde disse grænser styles ved hjælp af de farver,&#g g g g g, vi udvalgt under denne etape. , har vi også tilføjet nogle gennemsigtige grænser på toppen og venstre side af menuen poster.årsagen til dette er vores nuværende emne /svæv virkning vil bruge grænser på alle fire sider, så vi er nødt til at sikre, at der er en tilsvarende bredde på menuen poster i deres misligholdelses - og svæv.,, og vi har manuelt tilføjet den korrekte, skrifttype vægt af, 400, til menupunkt tekst, fordi photoshop er kun i stand til at arbejde med værdier som "normale" eller "fed".,, resultat:,, du bør se.,,,,, skabe "løbende" og den stater, i dette tilfælde har vi ikke brug for ekstra html, som vi allerede har tilføjet et menupunkt med klasse "nuværende", der anvendes på det i de sidste skridt.,, csshat nye nuværende menupunkt baggrund mixin:, i din psd, udvælge rektangel af din "løbende" menupunkt og kopiere csshat genereret kode i en ny mixin ved navn , currentmenuitemBG,:,,.CurrentMenuItemBG(){ border: 1px solid #e62d4e; background-color: #ef3d5d; .box-shadow(~"0 1px 0 #cc2241, inset 0 2px 5px rgba(250,171,185,.6)"); .background-image(~"linear-gradient(bottom, #ef3d5d 0%, #dc2344 25.49%, #fc6b85 100%)"); },,CSSHat to New Current Menu Item Text Mixin:,,Now select the text of your "current" menu item and copy the CSSHat generated code into a new mixin named ,CurrentMenuItemText,:,,.CurrentMenuItemText(){ color: #fff; font-family: "Roboto"; font-size: 18px; text-shadow: 0 -1px 0 #b50020; },,Update Menu Style:,,,,Update the existing ,ul.mainmenu, style as follows. ,,ul.mainmenu { padding: 0 15px; \tmargin: 0; \tlist-style-type: none; \tmin-height:50px; \t.MainMenuBG(); \tli { \t\tdisplja: blok; flyde: venstre polstring: 0; grænseoverskridende top: 1px fast rgba (0,0,0,0); grænseoverskridende nederst: 1px fast rgba (0,0,0,0.05); grænseoverskridende ret: 1px fast rgba (0,0,0,0.05); grænse tilbage: 1px fast rgba (0,0,0,0). &: for det første type (grænse tilbage: 1px fast rgba (0,0,0,0.05)}. menuitembg(). en: sammenhæng, en: besøgte (display: blok. højde: 47px; linje højde: 47px; polstring: 0 30px; //tilsat skrifttype vægt skrifttype vægt: 400. menuitemtext();} &: den {. currentmenuitembg();,: sammenhæng, en: besøgte {. currentmenuitemtext()}}} li.current {. currentmenuitembg(). en: sammenhæng, en: besøgte {. currentmenuitemtext()}}}, og for at gøre det muligt for de produkter, der skal være presset på menuen multiple lines if there are two many for the available width, add the following clearfix code below your existing menu class.,,ul.mainmenu:before, ul.mainmenu:after { content: " "; display: table; } ul.mainmenu:after { clear: both; },,Result:,,You should now see the "current" style applied both to the actual current menu item and the hover effect:,,,,,Add the Main Text,,Add HTML:,,Add the following code below your menu HTML:,,<div class="maintext"> <p class="thintext">Did you know you can</p> \t<p class="thicktext">Have Your Photoshop</p> \t<p class="thintext">AND YOUR</p> \t<p class="thicktext">Pure Code Too?</p> </div>,,CSSHat to New Mixin, Thin Text:,,In your PSD, select either the first or third main text line (thin grey text) and copy the CSSHat generated code into a new mixin named ,ThinText,:,,.ThinText(){ color: #6b6b6b; font-family: "Roboto"; font-size: 48px; },,CSSHat to New Mixin, Thick Text:,,In your PSD, select either the second or fourth main text line (thick text) and copy the CSSHat generated code into a new mixin named ,ThickText,:,,.ThickText(){ color: #ef3d5d; font-family: "Roboto"; font-size: 80px; font-weight: bold; },,New Styles:,,,,Add the following new style code:,,//Main text lines .maintext { padding: 70px 0; \ttext-align: center; } .thintext { \tmargin: 0.425em 0; \t//added font weight \tfont-weight: 100; \t.ThinText(); } .thicktext { \tmargin: 0.425em 0; \t.ThickText(); },,Result:,,You should now see this below your menu:,,,,,Create the Info Panel Background,,Add HTML:,,Add the following code:,,<div class="panel"> </div>,,CSSHat to New Mixin:,,In your PSD, select your info panel background rectangle and copy the CSSHat generated code into a new mixin named ,PanelBG,:,,//Panel mixins .PanelBG(){ border: 1px solid #d7d7d7; .border-radius(15px); background-color: #fff; .box-shadow(~"0 3px 4px rgba(193,193,193,.27)"); },,New Style:,,,,Add the following new style code:,,.panel { max-width: 1200px; \twidth:100%; \tmargin: 0 auto; \tpadding-bottom: 50px; \ttext-align: center; \t.PanelBG(); },,Result:,,You should now see your info panel background, currently still empty:,,,,,Panel Header Background and Text,,Add HTML:,,Update your info panel HTML to the following:,,<div class="panel"> <div class="panelhead">IN THIS TUTORIAL:</div> </div>,,CSSHat to New Mixin, Panel Header Background:,,In your PSD, select your panel header background layer and copy the CSSHat generated code into a new mixin named ,PanelHeadBG,:,,.PanelHeadBG(){ .border-radius(10px); background-color: #ef3d5d; .box-shadow(~"0 3px 0 #cc2241, inset 0 0 5px rgba(222,42,74,.6)"); .background-image(~"linear-gradient(bottom, #ee2c4f 0%, #dc2344 10.5%, #fc6b85 100%)"); },,Add Panel Header Second Shadow:,,We're now going to add a second skygge til panelheadbg mixin, vi allerede har skabt.kan du huske fra del 1 i denne lektion, som vi er nødt til at skabe yderligere skygger på andet lag på grund af photoshop, ikke at være i stand til at håndtere flere fald skygger på et lag., i din psd, vælg dit panel header anden skygge lag og kopi kun koden mellem parentes på, rubrik skygge linje, som bør være:,, 0 5px 3px rgba (0,0,0,. 27), i , panelheadbg, mixin du skabte lige tilføje et komma, inden den afsluttende parentes af eksisterende, rubrik skygge, linje, så pasta i kode, du tog fra csshat give dig:,, box skygge (~ "0 3px 0&#cc2241, indpresningsdybde 0 0 5px rgba (222,42,74, s. 6), 0 5px 3px rgba (0,0,0,. 27)"), csshat til nye mixin panel header tekst:, i din psd, vælg dit panel header tekst, og en kopi af det csshat generated code into a new mixin named ,PanelHeadText,:,,.PanelHeadText(){ color: #fff; font-family: "Roboto"; font-size: 24px; text-shadow: 0 -1px 0 #b50020; },,New Style:,,,,Add the following new style code:,,.panelhead { margin: 60px -15px; \tpadding: 20px; \t.PanelHeadBG(); \t//added font weight \tfont-weight: 400; \t.PanelHeadText(); },,Note that we added a ,font-weight, of ,400, manually given Photoshop can't process numerical font weight values.,,Result:,,You should now see:,,,,,Create the Panel Text,,Add HTML:,,Update your existing panel HTML code again, this time to the following:,,<div class="panel"> <div class="panelhead">IN THIS TUTORIAL:</div> \t<p>Learn how to design in Photoshop and output<br />standards ready pure CSS3 + Base64 code.</p> \t<p>That means no images and minimal HTTP<br />requests for ultra efficient loading.</p> \t<p class="usingthese">CSSHat <span class="highlight">+</span> PNGHat <span class="highlight">+</span> LESS <span class="highlight">+</span> FontAwesome</p> </div>,,CSSHat to New Mixin, Default Panel Text:,,In your PSD, select the lighter weight text layer of the info panel and copy the CSSHat generated code into a new mixin named ,PanelText,:,,.PanelText(){ color: #6b6b6b; font-family: "Roboto"; font-size: 36px; },,CSSHat to New Mixin, Larger Panel Text:,,Now select the layer holding the thicker weight info panel tekst og kopiere csshat genereret kode i en ny mixin ved navn , usingthesetext,.,,. usingthesetext() (farve:b6b6b; skrifttype familie: "roboto" skriftstørrelse: 48px;}, nye stil:, ajourføring af de eksisterende ,. panel, stil:,,. panel (max bredde: 1200px; bredde: 100% margen: 0 - og polstring nederst: 50px; tekst tilpasse: center;. panelbg();. paneltext(); skrifttype vægt: 100; p {margen: 1.2em 0}},, det giver den paneltext mixin samt en numerisk skrifttype, vægt og en vis kontrol for punkterne i info - panel.,,,, også tilføje følgende nye stil kode under,. panel, klasse:,,. usingthese (//tilsat skrifttype vægt skrifttype vægt: 900. usingthesetext();}. fremhæve (farve:&#ef3d5c;}, det applies the larger and thicker font styling to the bottom line of text, as well as adding colored highlights.,,Result:,,You should now see:,,,,,Add the Big Down Arrow,,Add HTML:,,Add the following code below your info panel:,,<div class="downarrow"><i class="fa fa-arrow-down"></i></div>,,Because we incorporated FontAwesome.less into our project earlier, this HTML will automatically place our down arrow simply via application of the classes ,fa, and ,fa-arrow-down, to an ,i, (icon) element. ,,At first it will appear in its default small, black state so all we need to do is style it as we would any other text element.,,,,,CSSHat to New Mixin:,,In your PSD, select your big down arrow layer and copy the CSSHat generated code into a new mixin named ,DownArrow,:,,.DownArrow(){ opacity: .3; color: #6b6b6b; font-family: "FontAwesome"; font-size: 200px; },,New Style:,,,,Add the following new style code:,,.downarrow { margin: 80px auto; \ttext-align: center; \ti { \t\t.DownArrow(); \t} },,Result:,,You should now see this below your info panel:,,,,,Starting the "Start" Button,,Add HTML:,,Add the following code below the big arrow html:,,<div class="buttonrow"> <a href="http://webdesign.tutsplus.com/tutorials/photoshop-to-pure-code-with-csshat-and-pnghat-part-1--cms-20786" target="_blank"> <button class="start"><span class="arrowcircle"><i class="rightarrow fa fa-caret-right"></i></span> Start the Tutorial </button> </a> </div>,,As with our down arrow, our use of the FontAwesome classes ,fa, and ,fa-caret-right, automatically place the icon we want to use, in this case a right pointing arrow.,,CSSHat to New Mixin, Button Background:,,In your PSD, select your start button rectangle layer and copy the CSSHat generated code into a new mixin named ,StartButtonBG,:,,.StartButtonBG(){ .border-radius(10px); background-color: #ef3d5d; .box-shadow(~"0 3px 0 #cc2241, inset 0 0 5px rgba(222,42,74,.6)"); .background-image(~"linear-gradient(bottom, #ee2c4f 0%, #dc2344 10.5%, #fc6b85 100%)"); },,Add Button Background Second Shadow:,,Just as we did with the panel header, we'll now add a second shadow to the mixin we just created. ,,In your PSD, select your button second shadow layer and copy ,only, the code between the parenthesis on the ,box-shadow, line:,,0 5px 3px rgba(0,0,0,.27),,In the ,StartButtonBG, mixin add a comma before the closing parenthesis of the existing ,box-shadow, line, then paste in the code you just took from CSSHat to give you:,,.box-shadow(~"0 3px 0 #cc2241, inset 0 0 5px rgba(222,42,74,.6), 0 5px 3px rgba(0,0,0,.27)");,,CSSHat to New Mixin, Button Text:,,Select the text layer of your start button and copy the CSSHat generated code into a new mixin named ,StartButtonText,:,,.StartButtonText(){ color: #fff; font-family: "Roboto"; font-size: 36px; text-shadow: 0 -1px 0 #b50020; },,New Style:,,,,Add the following new style code:,,. buttonrow {tekst tilpasse: center; margen: 20px auto.}. start (grænse: 0; polstring: 0.75em 1em; display: inline - blok. startbuttonbg();. startbuttontext();}, den første. buttonrow, klasse handlinger blot center på knappen, mens den anden,., klasse gælder både på den baggrund og tekst på vej.,, resultat:,, du bør se.,,,,, knap cirkel og pil, i dette tilfælde har vi ikke brug for ekstra html, som vi arbejder med knap html tilføjet inden for de sidste skridt.,,, csshat til nye mixin, pil cirkel:, i din psd, vælges den lille cirkel lag på din knap og kopiere csshat genereret kode i en ny mixin ved navn , arrowcircle,.,,. arrowcircle() {. grænse radius (23px); baggrund farve:&#ef3d5d; tilbage.jorden image (~ "lineær gradient (bunden,&#ef4f6b 0%,&#e32d4f 100%) ')), csshat til nye mixin, pil:,, nu vælge den lille hvid pil mod højre, og kopiere csshat, som lag - kode i en ny mixin ved navn , rightarrow,,,,. rightarrow() (farve:&#fff; skrifttype familie:" fontawesome "skriftstørrelse: 36px;}, nye stil:,,,,,,, tilføjes følgende nye stil kode:,,. arrowcircle (display: i overensstemmelse med blok; tekst tilpasse: center; polstring til venstre: 7px; margen: 10px;. størrelse (47px). arrowcircle();} i.rightarrow (skriftstørrelse: normal; display: blok; linje højde: 50px;. rightarrow();}, resultat:,, du nu skal se:,,,,, - bunden trim, tilsættes html:,, tilføje følgende kode under din startknap html:,, < div klasse = bottomtrim "> < div klasse =" centercircle "> < /div > < /div >,, csshat til nye mixin:, i din psd, udvælge lag, der er i besiddelse af de to små koncentriske grå kredse og kopiere csshat der kode i en ny mixin ved navn , centeredcircle,.,,. centeredcircle() {grænse: 5px fast&#ddd;. grænse radius (20px); baggrund farve:&#f1f1f1;. baggrund image (~" radial hældning (center center, 100px 100px,&#ddd 0%,&#ddd 39.99%,&#f1f1f1 44.75%,&#f1f1f1 100%) ');}, tilpasse de radiale gradient kode:,, det er det eneste sted, hvor jeg fandt csshat produktion ikke helt svarer til, hvad jeg havde i psd.ændring af mixin er , baggrund image, linje, der erstatter, center center, 100px 100px med center, ellipse dækning, som så:,,. baggrund image (~ "radial hældning (center, ellipse,&#ddd 0%,&#ddd 39.99%,&#f1f1f1 44.75%,&#f1f1f1 100%)"), er en ny stil:,,,,,,, tilføjes følgende nye stil kode:,,. bottomtrim {margen: 120px 0. højde: 15px; grænseoverskridende top: 5px fast&#ddd; grænseoverskridende nederst: 5px fast&#ddd; tekst tilpasse: center;}. centercircle (display: inline - blok. margen top. - 17px;. størrelse (40px). centeredcircle();}, første klasse ,. bottomtrim, skaber de to grå linjer i vores bunden trim, mens ,. centeredcircle klasserne og holdninger, vores koncentriske grå kredse over de to linjer.,,,,, resultat:, bør de nu se det herpå bunden af deres design:,,,,, indpakningen op, det er det!skal du nu har afsluttet statisk design i alle dens ren kode hæder, der ser sådan ud:,,,,, statister, vi har holdt mig ganske enkelt i forbindelse med denne forelæsning, men der er meget mere, du kan gøre med den kode, der er involveret i denne proces, hvis du foretrækker det. i nogle tilfælde har vi fordoble om styles ved genanvendelse af skrifttype, familie, erklæringer og farver, så man kan definere deres skrifttype, familier og farver som variabler og anvende disse i stedet for lettere at ajourføre senere.,, csshat også støtter produktionen i stylus + nib og sass /scss + kompas, hvis en af dem er din foretrukne preprocessor du kan forsøge at bruge dem i stedet.,,,,,,,,
