Share
Cosa starai creandoNel precedente tutorial abbiamo trattato come preparare un disegno in Photoshop, pronto per la conversione in puro codice CSS3 e Base64. In questo tutorial gestiremo la generazione del codice reale, con l'aiuto dei plugin di Photoshop CSSHat e PNGHat creati da Source, oltre a FontAwesome e il preprocessore CSS LESS.
Entriamo subito!
Per cominciare dovrai creare una nuova cartella sul tuo computer per ospitare il tuo sito web statico. In questo caso sto nominando la mia cartella codedup.
Dentro quella cartella crea un nuovo file chiamato index.html e aggiungere ad esso il seguente codice:
Photoshop to Pure Code con CSSHat e PNGHat
Qui, stiamo impostando la shell HTML di base per il sito e il collegamento in Roboto, i Font di Google che abbiamo utilizzato nel nostro PSD, così come quello che sarà il nostro foglio di stile CSS.
Quindi, crea due sottocartelle all'interno del tuo codedup cartella, un nome css e l'altro chiamato DI MENO. Dentro il DI MENO cartella crea un file chiamato style.less. Tutti gli stili per il tuo sito verranno scritti in questo file e successivamente compilati css> style.css.
Mentre andiamo con te style.less il file dovrebbe avere il suo codice organizzato in questo ordine:
Ti consiglio di aggiungere un commento nella parte superiore di ogni sezione del tuo style.less file per aiutarti a tenere traccia di dove devono essere posizionati diversi tipi di codice.
Se preferisci, puoi creare file separati (parziali) per ospitare ciascuno di questi tipi di codice, importandoli ciascuno nel tuo file LESS principale. Comunque per mantenere le cose semplici qui useremo solo un file.
Prepros è un'applicazione che gestisce tutti i tipi di attività front end per i web designer e gli sviluppatori. Compilerà il nostro LESS, aggiornerà automaticamente il browser ogni volta che verranno apportate modifiche ai nostri file, persino sincronizzeremo più dispositivi se vogliamo. Scarica e installa Prepros, che puoi ottenere gratuitamente da: http://alphapixels.com/prepros/
Esegui l'applicazione, quindi trascina il codedup cartella sull'interfaccia principale per aggiungerla come nuovo progetto.
Prepros rileverà automaticamente il style.less file nella cartella del progetto e per impostazione predefinita verrà attivata la funzione "Compilazione automatica". Ogni volta che salvi una modifica style.less Prepros lo rileverà e poi lo compilerà css> style.css.
Puoi anche fare clic style.less nell'interfaccia per vedere le impostazioni extra disponibili, come l'opzione di comprimere il CSS durante la compilazione.
Ora vai avanti e prendi i file per LESSHat, una libreria di mixin che si lega magnificamente con CSSHat, così come Normalize.less, una versione di "Normalize.css" scritta nella sintassi LESS friendly.
Dopo aver scaricato i due file e averli inseriti nel progetto, torna su Prepros e vedrai che ha rilevato automaticamente entrambi. Importeremo entrambi di questi nel nostro principale style.less e non vogliamo che vengano compilati in singoli file CSS, quindi fai clic su ciascuno e deseleziona "Compilazione automatica".
Ora apri il tuo style.less file nel tuo editor di codice preferito e aggiungi queste due righe all'inizio:
@import "lesshat.less"; @import "normalize.less";
Salva il tuo file e Prepros lo compilerà automaticamente per te, dopodiché dovresti vedere il seguente popup nell'angolo in basso a destra dello schermo:
Ora dovresti vedere anche il file style.css all'interno del tuo progetto css cartella.
Ora incorporeremo FontAwesome nel progetto aggiungendo i file dei font stessi e "FontAwesome.less", una libreria LESS precostruita che rende incredibilmente facile inserire icone FontAwesome nei progetti. Tutto quello che dobbiamo fare è importare il file e quindi le classi FontAwesome diventano immediatamente accessibili.
Vedrai come funziona in pratica più avanti nel tutorial quando aggiungiamo il nostro elemento "big down arrow".
Inizia creando una sottocartella denominata font-impressionante dentro il tuo DI MENO cartella. Ci sono parecchi file nella libreria di FontAwesome, quindi li terremo qui per mantenere organizzati i nostri pacchetti
Scarica FontAwesome come zip da: https://github.com/FortAwesome/Font-Awesome
Estrai la cartella e copia tutti i file dal suo interno Di meno cartella, quindi incollali nel font-awesome cartella che hai appena creato nel tuo progetto. Quindi copia l'intero font cartella dal download FontAwesome decompresso e incollarlo come sottocartella nel progetto.
Il tuo intero file di progetto e la struttura della cartella ora dovrebbero assomigliare a questo:
Prepros rileverà di nuovo i nuovi file LESS, quindi deseleziona "Auto Compile" su tutti i file che ora appaiono nell'interfaccia.
Aggiungi la seguente linea al tuo style.less file, sotto le righe che hai aggiunto in precedenza:
@import "font-awesome / font-awesome.less";
Il tuo progetto ora ha tutte le importazioni di LESS e i file di font che ti servono e la compilazione automatica è attivata, quindi siamo pronti per iniziare a tradurre il tuo PSD in codice.
Nel tutorial precedente abbiamo scelto il pattern denominato "Satin Weave" per affiancare il nostro sfondo a causa delle sue dimensioni ridotte e del basso numero di colori. Ora useremo il plugin PNGHat per convertirlo in una stringa di codice Base64.
Apri il PSD in Photoshop. Sappiamo che le dimensioni del modello sono 24 px di larghezza e 12 px di altezza, quindi vai avanti e utilizza il riquadro di selezione per creare una selezione di tali dimensioni in qualsiasi punto del tuo progetto.
Ora, assicurati che il livello di sfondo a cui è applicato il modello sia selezionato, apri la finestra di PNGHat. Tutto quello che devi fare è fare clic sull'opzione "Base 64" nella riga superiore della finestra, quindi fare clic su "Esporta layer selezionati".
Verrà visualizzato un dialogo che richiede la conferma che si desidera "Ritaglia immagine per selezione?". Clic sì e vedrai il tuo output di stringa Base64 nello spazio inferiore della finestra di PNGHat. Clicca il copia pulsante.
Tornate al vostro style.less file e incolla il codice che hai appena copiato da PNGHat nella sezione "Variabili". Elimina tutto dal codice incollato, ad eccezione di url (dati ...); e quindi aggiungere @satinweave: all'inizio della linea. Dovresti finire con:
@satinweave: url (dati: image / png; Base64, iVBORw0KGgoAAAANSUhEUgAAABgAAAAMAgMAAAAFXpXmAAAABGdBTUEAALGPC / xhBQAAAAlQTFRF8vLy7 + / + v8fHxxV2ZvQAAADRJREFUCNdVysENADAIQlGWkRj3rodOWeDW0w8 0axlg5wlFW / FGyEdTUpeESKOqXBN8 + cB4yUS37 / ediwAAAAASUVORK5CYII =);
Ora siamo pronti per posizionare il nostro nuovo, facile da usare @satinweave variabile in uno stile così apparirà nel nostro design. Mentre ci siamo, aggiungeremo anche un paio di regole base per il sito box-sizing e impostazioni di collegamento.
Aggiungi il seguente codice alla sezione "Stili" del tuo styles.less file:
* .box-sizing (border-box); body background-image: @satinweave; overflow-x: hidden; a, a: link, a: visited, a: hover, a: active text-decoration: none;
Salva il tuo file in modo che Prepros compili le tue modifiche nel tuo style.css file.
Vai a Prepros, fai clic su Più opzioni pulsante e scegliere Copia l'URL di anteprima dal vivo, (che sarà probabilmente http: // localhost: 8000), quindi incollalo nel tuo browser.
Questo ti darà un'anteprima del tuo sito statico che si ricaricherà automaticamente ogni volta che Prepros compila il tuo codice.
Ora dovresti vedere il tuo pattern Base64 puro affiancato sullo sfondo della pagina.
Non potrebbe essere più semplice avere CSSHat che emette il CSS3 per ogni elemento di design. Basta selezionare il livello in questione con la finestra CSSHat aperta e genererà automaticamente il codice che ti serve.
Ci sono alcune opzioni tra cui puoi scegliere nelle impostazioni della finestra CSSHat. Nel nostro caso vogliamo che il nostro codice venga emesso come LESS e vogliamo che tutti i piccoli pulsanti nella parte inferiore della finestra CSSHat (commenti, dimensioni, prefissi, regole) siano disattivati. La tua finestra CSSHat dovrebbe apparire così:
Nota che puoi avere CSSHat per generare il codice di altezza e larghezza per te px valori facendo clic sul quarto pulsante (che sembra un quadratino con quadrati più piccoli ai suoi angoli). Comunque preferisco scrivere il mio, quindi posso usare più facilmente rem / em / % valori dove ho bisogno di loro.
Quando il codice per il livello selezionato è stato generato, fai clic sul pulsante copia pulsante nella parte inferiore della finestra, pronto per incollare nel tuo style.less file.
Ora procediamo ad aggiungere il resto dei tuoi elementi di design tramite CSS.
Dato che CSSHat rende le cose così facili, possiamo usare un processo standard di serie che viene ripetuto solo fino a quando il tuo disegno è completamente codificato.
Per ogni elemento inizieremo con l'aggiungere l'HTML corrispondente al index.html file.
Dopodiché, ogni nuovo elemento comporterà l'aggiunta di uno o più mixin LESS, che useremo per contenere il CSS3 generato da CSSHat. È utile mantenere il codice generato da CSSHat separato dal resto del codice di stile in modo da poterlo facilmente aggiornare se si modifica il progetto. Dovresti aggiungere nuovi mixin alla sezione "Mixins" del tuo style.less file, come descritto sopra.
Infine, aggiungerai gli attuali stili CSS che verranno inviati al tuo foglio di stile. Questi stili incorporeranno i tuoi mix e un codice extra che ti fornirò per controllare il layout, le dimensioni e gli aspetti che Photoshop non può gestire, come il peso dei caratteri numerici e i bordi "uno alla volta". I tuoi stili dovrebbero essere aggiunti alla sezione "Stili" del tuo style.less file.
Creeremo ogni elemento di design nello stesso ordine in cui facevamo nella parte precedente di questo tutorial per rendere più facile il rinvio in caso di necessità.
Aggiungi il seguente tra i tag del corpo di apertura e chiusura.
Seleziona il livello "top trim" del tuo PSD e copia il codice generato da CSSHat:
opacità: 0,5; background-color: #ddd; .box-shadow (~ "0 2px 1px #ffff, inset 0 -2px 4px # c8c8c8");
Nel tuo style.less il file crea un nuovo mixin chiamato TopTrim e incolla nel tuo codice CSSHat in questo modo:
.TopTrim () opacità: .5; background-color: #ddd; .box-shadow (~ "0 2px 1px #ffff, inset 0 -2px 4px # c8c8c8");
Ora incorporeremo il tuo nuovo mixin nella sezione "Stili" del tuo style.less file. Aggiungi il seguente nuovo codice di stile:
// Top trim .toptrim height: 8px; margin-bottom: 62px; .TopTrim ();
Nel codice di cui sopra stiamo estraendo i nostri stili CSSHat generati tramite il mixin di TopTrim, oltre a impostare le dimensioni del layout di cui abbiamo bisogno.
Ora dovresti vedere il tuo "top trim" in esecuzione nella parte superiore del tuo sito.
Aggiungi quanto segue sotto l'ultimo codice HTML che hai aggiunto:
Seleziona il layer "menuwrap" del tuo PSD, copia il codice generato da CSSHat e incollalo in un nuovo mixin chiamato 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%)");
Aggiungi il seguente nuovo codice di stile:
// Menu .menuwrap min-height: 61px; larghezza massima: 1200 px; width: 100%; margine: 0 auto; imbottitura: 5px; .MenuWrapBG;
Ora dovresti vedere:
Aggiorna il tuo codice menu esistente al seguente:
Seleziona il tuo PSD menubg livello e copia il codice generato da CSSHat in un nuovo mixin chiamato MainMenuBG:
.MainMenuBG () border: 1px solid # e4e4e4; .border-raggio (11px); background-color: #fff; .box-shadow (~ "0 3px 4px rgba (193,193,193, .75)"); .background-image (~ "linear-gradient (in basso, # e5e5e5 0%, #fff 100%)");
Aggiungi il seguente nuovo codice di stile:
ul.mainmenu padding: 0 15px; margine: 0; list-style-type: none; min-height: 50px; .MainMenuBG ();
Ora dovresti vedere:
Aggiorna il tuo codice menu esistente al seguente:
Nel tuo PSD, seleziona uno dei rettangoli delle voci di menu e copia il codice generato da CSSHat in un nuovo mixin denominato MenuItemBG:
.MenuItemBG () .background-image (~ "linear-gradient (in basso, #eee 0%, # e4e4e4 25,49%, #fbfbfb 100%)");
Nel tuo PSD, seleziona il testo di una delle voci di menu e copia il codice generato da CSSHat in un nuovo mixin denominato MenuItemText:
.MenuItemText () color: # 5b5b5b; font-family: "Roboto"; font-size: 18px; text-shadow: 0 1px 0 #fff;
Aggiorna l'esistente ul.mainmenu stile come segue.
ul.mainmenu padding: 0 15px; margine: 0; list-style-type: none; min-height: 50px; .MainMenuBG (); li display: block; fluttuare: a sinistra; padding: 0; border-top: 1px solido rgba (0,0,0,0); border-bottom: 1px solid #dddddd; border-right: 1px solid #dddddd; border-left: 1px solido rgba (0,0,0,0); &: first-of-type border-left: 1px solid #dddddd; .MenuItemBG (); a, a: link, a: visited display: block; altezza: 47 px; altezza della linea: 47px; imbottitura: 0 30px; // added font weight-weight: 400; .MenuItemText ();
Stiamo usando la nidificazione delle regole MENO, quindi tutto Li figli di ul.mainmenu saranno colpiti.
Ricorderai anche nel tutorial precedente che dovevamo usare manualmente lo strumento linea per facilitare la selezione del colore per i bordi dei nostri menu, data l'impossibilità di Photoshop di impostare ogni lato del bordo singolarmente. In quanto sopra vedremo di incorporare questi stili di bordo usando il codice colore #dddddd abbiamo selezionato durante quella fase.
Abbiamo anche aggiunto alcuni bordi trasparenti sul lato superiore e sinistro delle voci del menu. Il motivo per cui questo è il nostro attuale effetto item / hover userà i bordi su tutti e quattro i lati, quindi dobbiamo assicurarci che ci sia una larghezza di corrispondenza sulle voci di menu nei loro stati di default e di hover.
E infine abbiamo aggiunto manualmente il corretto font-weight di 400 al testo della voce del menu perché Photoshop è in grado di lavorare solo con valori come "normale" o "grassetto".
Ora dovresti vedere:
In questo caso non abbiamo bisogno di HTML in più poiché abbiamo già aggiunto una voce di menu con la classe "corrente" applicata nell'ultimo passaggio.
Nel tuo PSD, seleziona il rettangolo della tua voce di menu "corrente" e copia il codice generato da CSSHat in un nuovo mixin chiamato 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 (~ "gradiente lineare (in basso, # ef3d5d 0%, # dc2344 25,49%, # fc6b85 100%)");
Ora seleziona il testo della tua voce di menu "corrente" e copia il codice generato da CSSHat in un nuovo mixin chiamato CurrentMenuItemText:
.CurrentMenuItemText () color: #fff; font-family: "Roboto"; font-size: 18px; text-shadow: 0 -1px 0 # b50020;
Aggiorna l'esistente ul.mainmenu stile come segue.
ul.mainmenu padding: 0 15px; margine: 0; list-style-type: none; min-height: 50px; .MainMenuBG (); li display: block; fluttuare: a sinistra; padding: 0; border-top: 1px solido rgba (0,0,0,0); border-bottom: 1px solido rgba (0,0,0,0.05); border-right: 1px solid rgba (0,0,0,0.05); border-left: 1px solido rgba (0,0,0,0); &: first-of-type border-left: 1px solid rgba (0,0,0,0.05); .MenuItemBG (); a, a: link, a: visited display: block; altezza: 47 px; altezza della linea: 47px; imbottitura: 0 30px; // added font weight-weight: 400; .MenuItemText (); &: hover .CurrentMenuItemBG (); a, a: link, a: visited .CurrentMenuItemText () li.current .CurrentMenuItemBG (); a, a: link, a: visited .CurrentMenuItemText ()
E per consentire alle voci di menu di essere spinte su più righe se ce ne sono due per la larghezza disponibile, aggiungi il seguente codice di clearfix sotto la tua classe di menu esistente.
ul.mainmenu: before, ul.mainmenu: after content: ""; display: tabella; ul.mainmenu: after clear: both;
Ora dovresti vedere lo stile "attuale" applicato sia all'attuale voce di menu corrente che all'effetto hover:
Aggiungi il seguente codice sotto il tuo menu HTML:
Lo sapevi che puoi
Avere il tuo Photoshop
E IL TUO
Pure Code Pure?
Nel PSD, seleziona la prima o la terza linea di testo principale (testo grigio sottile) e copia il codice generato da CSSHat in un nuovo mixin chiamato ThinText:
.ThinText () color: # 6b6b6b; font-family: "Roboto"; font-size: 48px;
Nel PSD, seleziona la seconda o la quarta riga di testo principale (testo spesso) e copia il codice generato da CSSHat in un nuovo mixin chiamato ThickText:
.ThickText () color: # ef3d5d; font-family: "Roboto"; font-size: 80px; font-weight: bold;
Aggiungi il seguente nuovo codice di stile:
// Linee di testo principali .maintext padding: 70px 0; allineamento del testo: centro; .thintext margin: 0.425em 0; // added font weight-weight: 100; .ThinText (); .thicktext margin: 0.425em 0; .ThickText ();
Ora dovresti vedere questo sotto il tuo menu:
Aggiungi il seguente codice:
Nel tuo PSD, seleziona il rettangolo di sfondo del pannello informativo e copia il codice generato da CSSHat in un nuovo mixin denominato PanelBG:
// Panel mixins .PanelBG () border: 1px solid # d7d7d7; .border-raggio (15px); background-color: #fff; .box-shadow (~ "0 3px 4px rgba (193,193,193, .27)");
Aggiungi il seguente nuovo codice di stile:
.panel larghezza massima: 1200px; width: 100%; margine: 0 auto; imbottitura-fondo: 50px; allineamento del testo: centro; .PanelBG ();
Ora dovresti vedere lo sfondo del pannello delle informazioni, attualmente ancora vuoto:
Aggiorna il tuo pannello informativo HTML al seguente:
IN QUESTO TUTORIAL:
Nel PSD, seleziona il livello di sfondo dell'intestazione del pannello e copia il codice generato da CSSHat in un nuovo mixin denominato PanelHeadBG:
.PanelHeadBG () .border-radius (10px); background-color: # ef3d5d; .box-shadow (~ "0 3px 0 # cc2241, riquadro 0 0 5px rgba (222,42,74, .6)"); .background-image (~ "gradiente lineare (in basso, #ee2c4f 0%, # dc2344 10,5%, # fc6b85 100%)");
Ora aggiungeremo una seconda ombra al mixin di PanelHeadBG che abbiamo già creato. Ricorderai dalla prima parte di questo tutorial che dovevamo creare ombre aggiuntive su second layer perché Photoshop non era in grado di gestire più ombre su un livello.
Nel tuo PSD, seleziona il secondo livello di intestazione del pannello e copia solo il codice tra le parentesi sul box-ombra linea, che dovrebbe essere:
0 5px 3px rgba (0,0,0, .27)
Nel PanelHeadBG mixin appena creato, aggiungi una virgola prima della parentesi di chiusura dell'esistente box-ombra linea, quindi incolla il codice che hai appena preso da CSSHat per darti:
.box-shadow (~ "0 3px 0 # cc2241, riquadro 0 0 5px rgba (222,42,74, .6), 0 5px 3px rgba (0,0,0, .27)");
Nel PSD, seleziona il testo dell'intestazione del pannello e copia il codice generato da CSSHat in un nuovo mixin denominato PanelHeadText:
.PanelHeadText () color: #fff; font-family: "Roboto"; font-size: 24px; text-shadow: 0 -1px 0 # b50020;
Aggiungi il seguente nuovo codice di stile:
.panelhead margin: 60px -15px; imbottitura: 20px; .PanelHeadBG (); // added font weight-weight: 400; .PanelHeadText ();
Si noti che abbiamo aggiunto a font-weight di 400 dato manualmente Photoshop non può elaborare valori di peso del font numerico.
Ora dovresti vedere:
Aggiorna di nuovo il codice HTML del pannello esistente, questa volta al seguente:
IN QUESTO TUTORIAL:Scopri come progettare in Photoshop e produrre
standard pronto puro codice CSS3 + Base64.Ciò significa che non ci sono immagini e HTTP minimo
richieste di caricamento ultra efficiente.CSSHat + PNGHat + DI MENO + FontAwesome
Nel PSD, seleziona il livello di testo più leggero del pannello delle informazioni e copia il codice generato da CSSHat in un nuovo mixin chiamato PanelText:
.PanelText () color: # 6b6b6b; font-family: "Roboto"; font-size: 36px;
Ora seleziona il livello contenente il testo del pannello informativo di peso più spesso e copia il codice generato da CSSHat in un nuovo mixin denominato UsingTheseText:
.UsingTheseText () color: # 6b6b6b; font-family: "Roboto"; font-size: 48px;
Aggiorna l'esistente .pannello stile a:
.panel larghezza massima: 1200px; width: 100%; margine: 0 auto; imbottitura-fondo: 50px; allineamento del testo: centro; .PanelBG (); .PanelText (); font-weight: 100; p margin: 1.2em 0;
Questo aggiunge il mixin di PanelText e un peso di carattere numerico e un controllo di margine per i paragrafi nel pannello delle informazioni.
Aggiungi anche il seguente nuovo codice di stile, sotto il .pannello classe:
.utilizzando peso font aggiunto peso-carattere: 900; .UsingTheseText (); .highlight color: # EF3D5C;
Ciò applica lo stile di carattere più grande e più spesso alla riga inferiore del testo, nonché l'aggiunta di evidenziazioni colorate.
Ora dovresti vedere:
Aggiungi il seguente codice sotto il pannello delle informazioni:
Poiché abbiamo incorporato FontAwesome.less nel nostro progetto in precedenza, questo HTML posizionerà automaticamente la nostra freccia in giù semplicemente tramite l'applicazione delle classi fa e Fa-freccia verso il basso ad io (icona) elemento.
All'inizio apparirà nel suo stato piccolo e nero, quindi tutto ciò che dobbiamo fare è stile come faremo con qualsiasi altro elemento di testo.
Nel tuo PSD, seleziona il tuo grande livello di freccia in giù e copia il codice generato da CSSHat in un nuovo mixin chiamato Freccia in giù:
.DownArrow () opacità: .3; colore: # 6b6b6b; font-family: "FontAwesome"; dimensione del font: 200px;
Aggiungi il seguente nuovo codice di stile:
.downarrow margin: 80px auto; allineamento del testo: centro; i .DownArrow ();
Ora dovresti vedere questo sotto il pannello delle informazioni:
Aggiungi il seguente codice sotto l'html della freccia grande:
Come con la nostra freccia in giù, il nostro uso delle classi FontAwesome fa e Fa-caret-destra posiziona automaticamente l'icona che vogliamo usare, in questo caso una freccia rivolta verso destra.
Nel PSD, seleziona il tuo livello di rettangolo del pulsante di avvio e copia il codice generato da CSSHat in un nuovo mixin denominato StartButtonBG:
.StartButtonBG () .border-radius (10px); background-color: # ef3d5d; .box-shadow (~ "0 3px 0 # cc2241, riquadro 0 0 5px rgba (222,42,74, .6)"); .background-image (~ "gradiente lineare (in basso, #ee2c4f 0%, # dc2344 10,5%, # fc6b85 100%)");
Proprio come abbiamo fatto con l'intestazione del pannello, ora aggiungeremo una seconda ombra al mixin che abbiamo appena creato.
Nel tuo PSD, seleziona il tuo secondo livello di ombreggiatura e copia solo il codice tra le parentesi sul box-ombra linea:
0 5px 3px rgba (0,0,0, .27)
Nel StartButtonBG mixin aggiungi una virgola prima della parentesi di chiusura dell'esistente box-ombra linea, quindi incolla il codice che hai appena preso da CSSHat per darti:
.box-shadow (~ "0 3px 0 # cc2241, riquadro 0 0 5px rgba (222,42,74, .6), 0 5px 3px rgba (0,0,0, .27)");
Seleziona il livello testo del tuo pulsante di avvio e copia il codice generato da CSSHat in un nuovo mixin chiamato StartButtonText:
.StartButtonText () color: #fff; font-family: "Roboto"; font-size: 36px; text-shadow: 0 -1px 0 # b50020;
Aggiungi il seguente nuovo codice di stile:
.buttonrow text-align: center; margine: 20px auto; .start border: 0; imbottitura: 0,75em 1em; display: blocco in linea; .StartButtonBG (); .StartButtonText ();
Il primo .buttonrow la classe agisce semplicemente per centrare il pulsante, mentre il secondo .inizio la classe applica sia lo sfondo del pulsante che lo stile del testo.
Ora dovresti vedere:
In questo caso non abbiamo bisogno di HTML in più poiché stiamo lavorando con il pulsante HTML aggiunto nell'ultimo passaggio.
Nel tuo PSD, seleziona il livello della piccola cerchia sul tuo pulsante e copia il codice generato da CSSHat in un nuovo mixin chiamato ArrowCircle:
.ArrowCircle () .border-radius (23px); background-color: # ef3d5d; .background-image (~ "linear-gradient (in basso, # ef4f6b 0%, # e32d4f 100%)");
Ora seleziona il piccolo livello di freccia bianca rivolto a destra e copia il codice generato da CSSHat in un nuovo mixin chiamato Freccia destra:
.RightArrow () color: #fff; font-family: "FontAwesome"; font-size: 36px;
Aggiungi il seguente nuovo codice di stile:
.arrowcircle display: inline-block; allineamento del testo: centro; padding-left: 7px; margin-right: 10px; .size (47px); .ArrowCircle (); i.rightarrow stile font: normale; blocco di visualizzazione; altezza della linea: 50px; .Freccia destra();
Ora dovresti vedere:
Aggiungi il seguente codice sotto il tuo pulsante di avvio HTML:
Nel PSD, seleziona il livello che contiene le due piccole cerchi grigi concentrici e copia il codice generato
Accentsconagua