Share
Ce veți creaÎn tutorialul anterior am abordat cum să pregătim un design în Photoshop, pregătit pentru conversia în codul CSS3 și Base64 pur. În acest tutorial vom gestiona generarea actuală a codului, cu ajutorul pluginurilor Photoshop CSSHat și PNGHat realizate de Source, precum și a FontAwesome și a preprocesorului CSS LESS.
Hai să ne aruncăm direct!
Pentru început, va trebui să creați un nou folder pe computer pentru a găzdui site-ul dvs. static. În acest caz îmi numesc dosarul codedup.
În interiorul acelui director creați un nou fișier numit index.html și adăugați codul următor:
Photoshop la Pure Code cu CSSHat și PNGHat
Aici, setăm shell-ul de bază HTML pentru site și link-ul din Roboto, fontul Google pe care l-am folosit în PSD, precum și ce va fi foaia de stil CSS.
Apoi, creați două subdosare în cadrul dvs. codedup dosar, unul numit css iar celălalt numit MAI PUȚIN. În interiorul MAI PUȚIN folder crea un fișier numit style.less. Toate stilurile pentru site-ul dvs. vor fi scrise în acest fișier și ulterior compilate css> stil.css.
În timp ce mergem de-a ta style.less fișierul ar trebui să aibă codul său organizat în această ordine:
Vă recomandăm să adăugați un comentariu în partea de sus a fiecărei secțiuni din secțiunea dvs. style.less fișier pentru a vă ajuta să urmăriți unde ar trebui plasate diferite tipuri de coduri.
Dacă preferați, puteți crea fișiere separate (partiale) pentru a găzdui fiecare dintre aceste tipuri de coduri, importând fiecare dintre ele în fișierul principal LESS. Cu toate acestea, pentru a păstra lucrurile simple aici, vom folosi doar singurul fișier.
Prepros este o aplicație care gestionează toate tipurile de sarcini de tip front-end pentru web designeri și dezvoltatori. Acesta va compila LESS noastre, auto-reîmprospăta browser-ul ori de câte ori se fac modificări în fișierele noastre, chiar sincroniza mai multe dispozitive, dacă vrem. Descărcați și instalați Prepros, pe care puteți obține gratuit de la: http://alphapixels.com/prepros/
Rulați aplicația, apoi glisați codedup folder pe interfața principală pentru ao adăuga ca un nou proiect.
Prepros va detecta automat style.less fișier în folderul proiectului dvs. și, implicit, va avea activat funcția "Auto Compile". Ori de câte ori salvezi o schimbare style.less Prepros va detecta apoi compilarea în css> stil.css.
De asemenea, puteți da clic pe style.less în interfață pentru a vedea setările disponibile în plus, cum ar fi opțiunea de a comprima CSS în timpul compilării.
Acum mergeți și luați fișierele pentru LESSHat, o bibliotecă mixin care se leagă frumos cu CSSHat, precum și Normalize.less, o versiune a "Normalize.css" scrisă în sintaxa LESS friendly.
După ce descărcați cele două fișiere și le plasați în proiect, reveniți la Prepros și veți vedea că le-a detectat automat pe amândouă. Vom importa aceste două în principalele noastre style.less și nu le dorim să le compilați în fișiere individuale CSS, așa că faceți clic pe fiecare și debifați "Auto Compile".
Acum deschide-ți style.less fișier în editorul de cod preferat și adăugați aceste două linii în partea de sus:
@import "lesshat.less"; @import "normalize.less";
Salvați fișierul și Prepros îl va compila automat pentru dvs., după care ar trebui să vedeți următorul pop-up în colțul din dreapta jos al ecranului:
Ar trebui să vedeți și fișierul style.css în interiorul proiectului css pliant.
Vom încorpora acum FontAwesome în proiect prin adăugarea fișierelor de fonturi înseși, precum și a "FontAwesome.less", o bibliotecă pre-construită LESS care face incredibil de ușor să plasați icoane FontAwesome în desenele dumneavoastră. Tot ce trebuie să facem este să importăm fișierul și apoi clasele FontAwesome să devină instantaneu accesibile.
Veți vedea cum funcționează aceasta în practică mai târziu în tutorial atunci când adăugăm elementul nostru "săgeată în jos".
Începeți prin crearea unui subfolder numit font-minunat în interiorul tău MAI PUȚIN pliant. Există destul de multe fișiere în biblioteca FontAwesome, așa că le vom păstra aici pentru a ne organiza
Descărcați FontAwesome ca un zip de la: https://github.com/FortAwesome/Font-Awesome
Extrageți dosarul și copiați toate fișierele din interiorul acestuia Mai puțin folder, apoi lipiți-le în font-awesome dosarul pe care tocmai l-ați creat în proiectul dvs. Apoi copiați întregul fonturi din dosarul descărcat prin descărcare FontAwesome și lipiți-l ca un subfolder în proiectul dvs..
Fișierul dvs. de proiect și structura dosarului întreg ar trebui să arate astfel:
Prepros va detecta din nou noi fișiere mai puțin, deci debifați "Auto Compile" pe toate fișierele care apar acum în interfață.
Adăugați următoarea linie la dvs. style.less fișier, sub liniile pe care le-ați adăugat anterior:
@import "font-awesome / font-awesome.less";
Proiectul dvs. are acum toate importurile LESS și fișierele de fonturi de care aveți nevoie și este activată compilarea automată, astfel că suntem gata să începem traducerea codului dvs. PSD în cod.
În tutorialul precedent am ales modelul numit "Satin Weave" pentru a tigui pe fondul nostru, datorită dimensiunilor mici și numărului redus de culori. Acum vom folosi pluginul PNGHat pentru al converti într-un șir de cod Base64.
Deschideți PSD-ul în Photoshop. Știm că dimensiunile modelului sunt de 24px lățime de 12px înălțime, deci mergeți mai departe și utilizați marquee pentru a crea o selecție de acea dimensiune oriunde pe design.
Acum, dacă este selectat stratul de fond care are modelul aplicat acestuia, deschideți fereastra PNGHat. Tot ce trebuie să faceți este să faceți clic pe opțiunea "Base 64" din rândul de sus al ferestrei, apoi faceți clic pe "Export Layers Selected".
Veți vedea un dialog care va cere confirmarea pe care doriți să o "Decupați imaginea după selecție?". Clic da și veți vedea ieșirea din șirul Base64 în spațiul din partea inferioară a ferestrei PNGHat. Apasă pe Copie buton.
Întoarce-te la tine style.less introduceți și lipiți codul pe care tocmai l-ați copiat din PNGHat în secțiunea "Variabile". Șterge totul de la codul lipit în cod, cu excepția url (date ...); și apoi adăugați @satinweave: la începutul liniei. Ar trebui să ajungeți la:
@satinweave: url (date: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAABgAAAAMAgMAAAAFXpXmAAAABGdBTUEAALGPC / xhBQAAAAlQTFRF8vLy7 + / v8fHxxV2ZvQAAADRJREFUCNdVysENADAIQlGWkRj3rodOWeDW0w8 + 0axlg5wlFW / FGyEdTUpeESKOqXBN8 + cB4yUS37 / ediwAAAAASUVORK5CYII =);
Suntem gata să plasăm noul nostru, ușor de utilizat @satinweave variabilă într-un stil astfel încât va apărea în designul nostru. În timp ce ne aflăm, vom adăuga și câteva reguli de bază pentru site-ul larg box-dimensionare și setările de legătură.
Adăugați următorul cod în secțiunea "Stiluri" a dvs. styles.less fişier:
* .box-size (box-border); corp fundal-imagine: @satinweave; overflow-x: ascuns; a, a: link, a: a vizitat, a: hover, a: activă text-decoration: none;
Salvați fișierul astfel încât Prepros să vă compună modificările în dvs. style.css fişier.
Du-te la Prepros, faceți clic pe Mai multe opțiuni butonul și alegeți Copiați adresa URL de previzualizare live, (care va fi cel mai probabil http: // localhost: 8000), apoi lipiți-o în browserul dvs..
Aceasta vă va oferi o previzualizare a site-ului dvs. static, care se reîncarcă automat de fiecare dată când Prepros compilează codul.
Acum ar trebui să vedeți modelul bazei pure Base64 în fundalul paginii.
Nu ar fi mai simplu ca CSSH să producă CSS3 pentru fiecare element de design. Doar selectați stratul în cauză cu fereastra CSSHat deschis și acesta va genera automat codul de care aveți nevoie.
Există câteva opțiuni pe care le puteți alege în setările ferestrei CSSHat. În cazul nostru, dorim ca codul nostru să fie afișat ca mai puțin și dorim ca toate butoanele mici din partea inferioară a ferestrei CSSHat (comentarii, dimensiuni, prefixe, regulă) să fie dezactivate. Fereastra dvs. CSSHat ar trebui să arate astfel:
Rețineți că puteți avea CSSHat să genereze codul de înălțime și lățime pentru dvs. px valorile făcând clic pe butonul al patrulea (care arată ca un pătrat mic cu pătrate mai mici pe colțurile sale). Cu toate acestea, prefer să scriu propria mea, pentru a putea folosi mai ușor rem / em / % unde am nevoie de ele.
Când a fost generat codul pentru stratul selectat, faceți clic pe Copie butonul din partea de jos a ferestrei, gata pentru lipirea în dvs. style.less fişier.
Vom continua să adăugăm restul elementelor dvs. de design prin CSS.
Deoarece CSSHat face lucrurile atat de usor, putem folosi un proces destul de mult stoc standard, care este repetat pana cand design-ul este complet codificat.
Pentru fiecare element vom începe prin adăugarea codului HTML corespunzător la index.html fişier.
După aceea, fiecare element nou va implica adăugarea uneia sau mai multor mixe LESS, pe care le vom folosi pentru a ține CSS3 generat de CSSHat. Este util să păstrați codul dvs. generat de CSSHat separat de restul codului dvs. de stil, astfel încât să îl puteți actualiza cu ușurință dacă schimbați designul. Ar trebui să adăugați mixuri noi în secțiunea "Mixins" a dvs. style.less fișier, așa cum este descris mai sus.
În cele din urmă, veți adăuga stilurile CSS reale care vor fi trimise în foaia de stil. Aceste stiluri vor încorpora combinațiile dvs., precum și unele coduri suplimentare pe care le voi oferi pentru a controla aspectul, dimensiunile și aspectele pe care Photoshop nu le poate gestiona, cum ar fi greutatea numerică a fontului și granițele "la o singură dată". Stilurile dvs. ar trebui adăugate la secțiunea "Stiluri" a dvs. style.less fişier.
Vom crea fiecare element de design in aceeasi ordine ca si in partea anterioara a acestui tutorial pentru a face usor sa te referi inapoi daca ai nevoie de.
Adăugați următoarele între etichetele dvs. de deschidere și închidere.
Selectați stratul "top trim" al PSD și copiați codul generat de CSSHat:
opacitate: .5; fundal-culoare: #ddd; .box-shadow (~ "0 2px 1px #fff, inset 0 -2px 4px # c8c8c8");
În tine style.less fișierul creează un nou mixin numit TopTrim și lipiți-vă în codul dvs. CSSHat, astfel:
.TopTrim () opacitate: .5; fundal-culoare: #ddd; .box-shadow (~ "0 2px 1px #fff, inset 0 -2px 4px # c8c8c8");
Acum vom incorpora noul dvs. amestec în secțiunea "Stiluri" a dvs. style.less fişier. Adăugați următorul cod de stil nou:
/ / Top trim .toptrim height: 8px; margin-bottom: 62px; .TopTrim ();
În codul de mai sus scoatem stilurile noastre generate de CSSHat prin mixul TopTrim, precum și setarea dimensiunilor de aspect de care avem nevoie.
Ar trebui să vedeți acum "top-ul tău" care rulează în partea de sus a site-ului tău.
Adăugați următoarele sub ultimul cod HTML pe care l-ați adăugat:
Selectați layerul "menuwrap" al PSD-ului, copiați codul generat de CSSHat și lipiți-l într-un nou mixin numit MenuWrapBG:
.MenuWrapBAG () .border-radius (12px); fundal-culoare: # f9f9f9; .box-shadow (~ "0 1px 2px #fff, inset 0 1px 10px rgba (0,0,0, .15)"); .pagină de fundal (~ "gradient liniar (fund, #fff 0%, # f3f3f3 100%)");
Adăugați următorul cod de stil nou:
// meniu .menuwrap min-height: 61px; max-lățime: 1200px; lățime: 100%; marja: 0 auto; padding: 5px; .MenuWrapBG;
Ar trebui să vedeți acum:
Actualizați codul de meniu existent la următoarele:
Selectați-vă PSD-urile menubg strat și copiați codul generat de CSSHat într-un nou mixin numit MainMenuBG:
.MainMenuBG () border: 1px solid # e4e4e4; .border-rază (11pixeli); fundal-culoare: #fff; .box-shadow (~ "0 3px 4px rgba (193,193,193, .75)"); .pagină-imagine (~ "gradient liniar (fund, # e5e5e5 0%, #fff 100%)");
Adăugați următorul cod de stil nou:
ul.mainmenu padding: 0 15px; marja: 0; listă-tip: none; min-height: 50px; .MainMenuBG ();
Ar trebui să vedeți acum:
Actualizați codul de meniu existent la următoarele:
În PSD-ul dvs., selectați unul din dreptunghiurile din elementul de meniu și copiați codul generat CSSHat într-un nou mixin numit MenuItemBG:
.MenuItemBG () .pagină-imagine (~ "gradient liniar (fund, #eee 0%, # e4e4e4 25,49%, #fbfbfb 100%)");
În PSD, selectați textul unuia dintre elementele de meniu și copiați codul generat CSSHat într-un nou mixin numit MenuItemText:
.MenuItemText () culoare: # 5b5b5b; font-familie: "Roboto"; font-size: 18px; text-shadow: 0 1px 0 #fff;
Actualizați existența ul.mainmenu stil, după cum urmează.
ul.mainmenu padding: 0 15px; marja: 0; listă-tip: none; min-height: 50px; .MainMenuBG (); li display: bloc; plutește la stânga; umplutura: 0; top-top: 1px solid rgba (0,0,0,0); border-bottom: 1px solid #dddddd; frontieră-dreapta: 1px solid #dddddd; margine stânga: 1px rgba solidă (0,0,0,0); &: primul-de-tip border-left: 1px solid #dddddd; .MenuItemBG (); a, a: link, a: vizitat display: bloc; înălțime: 47px; line-height: 47px; padding: 0 30px; // greutate adăugată font-greutate: 400; .MenuItemText ();
Folosim reguli mai mici de cuibărit Li copiii din ul.mainmenu va fi afectat.
De asemenea, veți reține din tutorialul anterior că trebuie să folosim manual instrumentul de linie pentru a facilita o selecție a culorilor pentru limitele elementelor noastre de meniu, având în vedere incapacitatea Photoshop de a seta individual fiecare parte a frontierei. În cele de mai sus veți vedea că încorporăm aceste stiluri de frontieră utilizând codul de culoare #dddddd am selectat în această etapă.
De asemenea, am adăugat niște margini transparente pe părțile superioare și stângi ale elementelor din meniu. Motivul pentru acest lucru este elementul curent / efectul de hover va folosi margini pe toate cele patru laturi, deci trebuie să asigurăm o lățime de potrivire a elementelor de meniu în stările lor implicite și de hover.
Și în sfârșit am adăugat manual cea corectă grosimea fontului de 400 la textul elementului de meniu, deoarece Photoshop poate funcționa numai cu valori precum "normal" sau "bold".
Ar trebui să vedeți acum:
În acest caz, nu avem nevoie de niciun HTML suplimentar deoarece deja am adăugat un element de meniu cu clasa "curentă" aplicată în ultimul pas.
În PSD, selectați dreptunghiul elementului de meniu "curent" și copiați codul generat CSSHat într-un nou mixin numit CurrentMenuItemBG:
.CurrentMenuItemBG () border: 1px solid # e62d4e; fundal-culoare: # ef3d5d; .box-shadow (~ "0 1px 0 # cc2241, inset 0 2px 5px rgba (250,171,185, .6)"); .pagină de fundal (~ "gradient liniar (fund, # ef3d5d 0%, # dc2344 25,49%, # fc6b85 100%)");
Acum, selectați textul elementului de meniu "curent" și copiați codul generat CSSHat într-un nou mixin numit CurrentMenuItemText:
.CurrentMenuItemText () culoare: #fff; font-familie: "Roboto"; font-size: 18px; text-shadow: 0 -1px 0 # b50020;
Actualizați existența ul.mainmenu stil, după cum urmează.
ul.mainmenu padding: 0 15px; marja: 0; listă-tip: none; min-height: 50px; .MainMenuBG (); li display: bloc; plutește la stânga; umplutura: 0; top-top: 1px solid rgba (0,0,0,0); margine de fund: 1px rgba solidă (0,0,0,0,05); frontieră-dreapta: 1px rgba solidă (0,0,0,0,05); margine stânga: 1px rgba solidă (0,0,0,0); &: primul-de-tip border-left: 1px solid rgba (0,0,0,0,05); .MenuItemBG (); a, a: link, a: vizitat display: bloc; înălțime: 47px; line-height: 47px; padding: 0 30px; // greutate adăugată font-greutate: 400; .MenuItemText (); &: mutați .CurrentMenuItemBG (); a, a: link, a: vizitat .CurrentMenuItemText () li.current .CurrentMenuItemBG (); a, a: link, a: vizitat .CurrentMenuItemText ()
Și pentru a permite ca elementele de meniu să fie împinse pe mai multe linii dacă există două multe pentru lățimea disponibilă, adăugați următorul cod de clarificare sub clasa de meniu existentă.
ul.mainmenu: înainte, ul.mainmenu: după content: ""; afișare: tabel; ul.mainmenu: după clar: ambele;
Ar trebui să vedeți acum stilul "curent" aplicat atât la elementul actual din actualul meniu cât și la efectul de hovering:
Adăugați următorul cod sub meniul HTML:
Știați că puteți
Creați-vă Photoshop-ul
SI AL TAU
Cod Pure?
În PSD, selectați prima sau a treia linie principală de text (text gri subțire) și copiați codul generat CSSHat într-un nou mixin numit ThinText:
.ThinText () culoare: # 6b6b6b; font-familie: "Roboto"; font-size: 48px;
În PSD, selectați linia de text a doua sau a patra (text gros) și copiați codul generat CSSHat într-un nou mixin numit ThickText:
.ThickText () culoare: # ef3d5d; font-familie: "Roboto"; font-size: 80px; font-weight: bold;
Adăugați următorul cod de stil nou:
// Principalele linii de text .maintext padding: 70px 0; text-align: centru; .intext margine: 0.425em 0; // greutate adăugată font-greutate: 100; .ThinText (); .thicktext margin: 0.425em 0; .ThickText ();
Ar trebui să vedeți acest lucru sub meniul dvs.:
Adăugați următorul cod:
În PSD, selectați dreptunghiul de fundal al panoului de informații și copiați codul generat CSSHat într-un nou mixin numit PanelBG:
// Mixe de panouri .PanelBG () border: 1px solid # d7d7d7; .border-rază (15px); fundal-culoare: #fff; .box-shadow (~ "0 3px 4px rgba (193,193,193, .27)");
Adăugați următorul cod de stil nou:
.panou max-width: 1200px; lățime: 100%; marja: 0 auto; padding-bottom: 50px; text-align: centru; .PanelBG ();
Ar trebui să vedeți fundalul panoului de informații, în prezent gol:
Actualizați panoul de informații HTML HTML la următoarele:
ÎN ACEST TUTORIAL:
În PSD, selectați stratul de fundal al antetului panoului și copiați codul generat CSSHat într-un nou mixin numit PanelHeadBG:
.PanelHeadBG () .border-radius (10px); fundal-culoare: # ef3d5d; .box-shadow (~ "0 3px 0 # cc2241, inset 0 0 5px rgba (222,42,74, .6)"); .pagină de fundal (~ "gradient liniar (fund, # ee2c4f 0%, # dc2344 10,5%, # fc6b85 100%)");
Vom adăuga oa doua umbră la mixtura PanelHeadBG pe care am creat-o deja. Veți aminti din Partea 1 din acest tutorial că a trebuit să creați umbre suplimentare pe straturile secundare, din cauza faptului că Photoshop nu ar putea gestiona mai multe umbre de picătură pe un singur strat.
În PSD-ul dvs., selectați al doilea strat de umbră al antetului panoului și copiați-l numai codul dintre paranteză pe box-shadow linie, care ar trebui să fie:
0 5px 3px rgba (0,0,0, .27)
În PanelHeadBG mixin pe care tocmai l-ați creat, adăugați o virgulă înainte de paranteza de închidere a pachetului existent box-shadow line, apoi lipiți în codul pe care tocmai l-ați luat de la CSSHat pentru a vă oferi:
.box-shadow (~ "0 3px 0 # cc2241, inset 0 0 5px rgba (222,42,74, .6), 0 5px 3px rgba (0,0,0, .27)");
În PSD, selectați textul din antetul panoului și copiați codul generat de CSSHat într-un nou mixin numit PanelHeadText:
.PanelHeadText () culoare: #fff; font-familie: "Roboto"; font-size: 24px; text-shadow: 0 -1px 0 # b50020;
Adăugați următorul cod de stil nou:
.panoul frontal marja: 60px -15px; padding: 20px; .PanelHeadBG (); // greutate adăugată font-greutate: 400; .PanelHeadText ();
Rețineți că am adăugat o grosimea fontului de 400 manual, Photoshop nu poate procesa valorile numerice ale greutății fonturilor.
Ar trebui să vedeți acum:
Actualizați din nou codul HTML existent al panoului, de data aceasta la următoarele:
ÎN ACEST TUTORIAL:Aflați cum să proiectați în Photoshop și de ieșire
standardul este pregătit pentru codul CSS3 + Base64.Aceasta înseamnă că nu există imagini și HTTP minim
solicitări de încărcare extrem de eficientă.CSSHat + PNGHat + MAI PUȚIN + FontAwesome
În PSD-ul dvs., selectați stratul text de greutate mai ușoară din panoul de informații și copiați codul generat CSSHat într-un nou mixin numit PanelText:
.PanelText () culoare: # 6b6b6b; font-familie: "Roboto"; font-size: 36px;
Acum, selectați stratul care conține textul din panoul cu greutate mai groasă și copiați codul generat CSSHat într-un nou amestec numit UsingTheseText:
.FolosindTheseText () color: # 6b6b6b; font-familie: "Roboto"; font-size: 48px;
Actualizați existența .panou stil la:
.panou max-width: 1200px; lățime: 100%; marja: 0 auto; padding-bottom: 50px; text-align: centru; .PanelBG (); .PanelText (); greutatea fontului: 100; p marja: 1.2;
Aceasta adaugă mixerul PanelText, precum și o greutate numerică a caracterelor și un anumit control al marjelor pentru paragrafele din panoul de informații.
Adăugați, de asemenea, următorul cod de stil nou, de mai jos .panou clasă:
.folosind // adăugat font greutate font-greutate: 900; .UsingTheseText (); . culoare (culoare: # EF3D5C;
Acest lucru se aplică stilului de fonturi mai mare și mai gros la linia de jos a textului, precum și adăugarea de culori.
Ar trebui să vedeți acum:
Adăugați următorul cod sub panoul dvs. de informații:
Deoarece am inclus FontAwesome.less în proiectul nostru mai devreme, acest HTML va plasa automat săgeata în jos pur și simplu prin aplicarea clasei fa și fa-săgeată-jos la un eu (pictograma).
La început, va apărea în starea implicită de mici dimensiuni, negru, astfel încât tot ce trebuie să facem este să-l stilizăm ca și orice alt element de text.
În PSD-ul dvs., selectați stratul săgeată mare în jos și copiați codul generat CSSHat într-un nou amestec numit Sageata in jos:
.DownArrow () opacitate: .3; culoare: # 6b6b6b; Font-familie: "FontAwesome"; font-size: 200px;
Adăugați următorul cod de stil nou:
.reducere margine: 80px auto; text-align: centru; i .DownArrow ();
Ar trebui să vedeți acest lucru sub panoul dvs. de informații:
Adăugați următorul cod sub săgeata mare html:
Ca și în cazul săgeții noastre în jos, folosirea claselor FontAwesome fa și fa-caret-dreapta plasați automat pictograma pe care dorim să o folosim, în acest caz o săgeată îndreptată spre dreapta.
În PSD, selectați stratul dreptunghi al butonului de pornire și copiați codul generat CSSHat într-un nou mixin numit StartButtonBG:
.StartButtonBg () .border-radius (10px); fundal-culoare: # ef3d5d; .box-shadow (~ "0 3px 0 # cc2241, inset 0 0 5px rgba (222,42,74, .6)"); .pagină de fundal (~ "gradient liniar (fund, # ee2c4f 0%, # dc2344 10,5%, # fc6b85 100%)");
Așa cum am făcut și cu antetul panoului, vom adăuga oa doua umbră la mixul pe care tocmai l-am creat.
În PSD-ul dvs., selectați butonul al doilea strat de umbră și copiați-l numai codul dintre paranteză pe box-shadow linia:
0 5px 3px rgba (0,0,0, .27)
În StartButtonBG mixin adăugați o virgulă înainte de închiderea parantezei existente box-shadow line, apoi lipiți în codul pe care tocmai l-ați luat de la CSSHat pentru a vă oferi:
.box-shadow (~ "0 3px 0 # cc2241, inset 0 0 5px rgba (222,42,74, .6), 0 5px 3px rgba (0,0,0, .27)");
Selectați stratul de text al butonului de pornire și copiați codul generat CSSHat într-un nou mixin numit StartButtonText:
.StartButtonText () culoare: #fff; font-familie: "Roboto"; font-size: 36px; text-shadow: 0 -1px 0 # b50020;
Adăugați următorul cod de stil nou:
.butonul text-align: center; margine: 20 pixeli automat; .start border: 0; umplutură: 0,75 sem 1em; afișare: inline-block; .StartButtonBG (); .StartButtonText ();
Primul .buttonrow clasa acționează pur și simplu pentru a centra butonul, în timp ce a doua .start clasa aplică atât fundalul butonului, cât și stilul textului.
Ar trebui să vedeți acum:
În acest caz, nu avem nevoie de niciun HTML suplimentar deoarece lucrăm cu butonul HTML adăugat în ultimul pas.
În PSD, selectați stratul de cerc mic peste butonul dvs. și copiați codul generat de CSSHat într-un nou mixin numit ArrowCircle:
.ArrowCircle () .border-radius (23px); fundal-culoare: # ef3d5d; .pagină de fundal (~ "gradient liniar (fund, # ef4f6b 0%, # e32d4f 100%)");
Acum, selectați micul strat de săgeată albă dreapta și copiați codul generat CSSHat într-un nou mixin numit Sageata dreapta:
.RightArrow () culoare: #fff; Font-familie: "FontAwesome"; font-size: 36px;
Adăugați următorul cod de stil nou:
.arrowcircle display: inline-block; text-align: centru; padding-left: 7px; margin-dreapta: 10px; .size (47px); .ArrowCircle (); i.rightarrow font-style: normal; afișare: bloc; linia-înălțime: 50px; .Sageata dreapta();
Ar trebui să vedeți acum:
Adăugați următorul cod sub butonul de pornire HTML:
În PSD-ul dvs., selectați stratul care deține cele două mici cercuri concentrice gri și copiați codul generat CSSHat într-un nou amestec numit CenteredCircle:
.CenteredCircle () border: 5px solid #ddd; .border-rază (20px); fundal-culoare: # f1f1f1; .populară-imagine (~ "radial-gradient (centru centru, 100px 100px, #ddd 0%, #ddd 39.99%, # f1f1f1 44.75%, # f1f1f1 100%)");
Acesta este singurul loc în care am găsit că ieșirea CSSHat nu se potrivea destul cu ceea ce am avut în PSD. Schimbă amestecul imagine de fundal linie, înlocuind centru centru, 100px 100px cu centru, acoperire cu elipsă ca astfel:
.fundal-imagine (~ "gradient radial (centru, acoperire cu elipsă, #ddd 0%, #d
Accentsconagua