Share
Wat je gaat creërenIn de vorige zelfstudie hebben we besproken hoe je een ontwerp in Photoshop kunt voorbereiden, klaar voor conversie naar pure CSS3- en Base64-code. In deze tutorial behandelen we de eigenlijke codegeneratie, met behulp van Photoshop-plug-ins CSSHat en PNGHat gemaakt door Source, evenals FontAwesome en de CSS-preprocessor LESS.
Laten we recht naar binnen duiken!
Om te beginnen moet u een nieuwe map op uw computer maken om uw statische website te huisvesten. In dit geval noem ik mijn map codedup.
Maak binnen die map een nieuw bestand met de naam index.html en voeg de volgende code toe:
Photoshop naar Pure Code met CSSHat en PNGHat
Hier stellen we de basis-HTML-shell in voor de site en koppelen we in Roboto, het Google-lettertype dat we in onze PSD hebben gebruikt, en wat ons CSS-stylesheet zal zijn.
Maak vervolgens twee submappen in uw codedup map, een met de naam css en de andere genoemd MINDER. Binnen in de MINDER map maak een bestand met de naam style.less. Alle stijlen voor uw site worden in dit bestand geschreven en vervolgens gecompileerd css> style.css.
Terwijl we verder gaan met je style.less bestand moet zijn code georganiseerd hebben in deze volgorde:
Ik raad aan om een opmerking toe te voegen bovenaan elke sectie in uw style.less bestand om u te helpen bijhouden waar verschillende soorten code moeten worden geplaatst.
Als u wilt, kunt u afzonderlijke bestanden (partials) maken om elk van deze soorten code te huisvesten en elk daarvan in uw LESS-hoofdbestand te importeren. Om het hier eenvoudig te houden, gebruiken we echter slechts het ene bestand.
Prepros is een applicatie die allerlei front-end taken voor webontwerpers en -ontwikkelaars afhandelt. Het zal onze MINDER compileren, de browser automatisch vernieuwen wanneer er wijzigingen in onze bestanden worden aangebracht, zelfs meerdere apparaten synchroniseren als we dat willen. Download en installeer Prepros, waar u gratis van kunt krijgen: http://alphapixels.com/prepros/
Start de applicatie en versleep de codedup map in de hoofdinterface om het toe te voegen als een nieuw project.
Prepros zal automatisch de style.less bestand in uw projectmap en standaard is "Auto Compile" geactiveerd. Elke keer dat u een wijziging opslaat style.less Prepros zal het detecteren en vervolgens compileren css> style.css.
U kunt ook klikken style.less in de interface om extra beschikbare instellingen te zien, zoals de optie om de CSS tijdens compilatie te comprimeren.
Ga nu door en pak de bestanden voor LESSHat, een mixin-bibliotheek die prachtig aansluit op CSSHat, evenals Normalize.less, een versie van "Normalize.css" geschreven in LESS friendly syntax.
Nadat u de twee bestanden hebt gedownload en in uw project hebt geplaatst, gaat u terug naar Prepros en ziet u dat beide bestanden beide automatisch hebben gedetecteerd. We zullen beide in ons hoofd importeren style.less en we willen niet dat ze worden gecompileerd in individuele CSS-bestanden, dus klik op elk en schakel "Auto Compile" uit.
Open nu je style.less bestand in uw favoriete code-editor en voeg deze twee regels toe aan de top:
@import "lesshat.less"; @import "normalize.less";
Sla uw bestand op en Prepros zal het automatisch voor u compileren, waarna u de volgende pop-up in de rechterbenedenhoek van uw scherm ziet:
Je zou nu ook het bestand moeten zien style.css in uw project css map.
We gaan nu FontAwesome integreren in het project door zelf de lettertypebestanden toe te voegen, evenals "FontAwesome.less", een vooraf gebouwde LESS-bibliotheek die het ongelooflijk eenvoudig maakt om FontAwesome-pictogrammen in je ontwerpen te plaatsen. Het enige dat we moeten doen is het bestand importeren en vervolgens worden de FontAwesome-klassen direct toegankelijk.
Je zult later in de tutorial zien hoe dit in de praktijk werkt als we ons element "big down arrow" toevoegen.
Begin met het aanmaken van een submap genaamd font-awesome in je MINDER map. Er zijn nogal wat bestanden in de bibliotheek van FontAwesome, dus we houden ze hier binnen om ons archief overzichtelijk te houden
Download FontAwesome als een zip van: https://github.com/FortAwesome/Font-Awesome
Pak de map uit en kopieer alle bestanden vanuit de map minder map, plak ze in de font-awesome map die u zojuist in uw project hebt gemaakt. Kopieer dan het geheel fonts map van je uitgepakte FontAwesome-download en plak deze als een submap in je project.
Uw volledige projectbestand en mapstructuur zouden er nu als volgt uit moeten zien:
Prepros zal opnieuw nieuwe LESS-bestanden detecteren, dus verwijder "Auto Compile" uit alle bestanden die nu in de interface verschijnen.
Voeg de volgende regel toe aan uw style.less bestand, onder de regels die u eerder hebt toegevoegd:
@import "font-awesome / font-awesome.less";
Je project heeft nu alle LESS-import- en lettertypebestanden die je nodig hebt en de automatische compilatie is geactiveerd, dus we zijn klaar om te beginnen met het vertalen van je PSD naar code.
In de vorige zelfstudie hebben we gekozen voor het patroon met de naam 'Satijnweefsel' om over onze achtergrond te betegelen vanwege het kleine formaat en het lage aantal kleuren. We gaan nu de PNGHat-plug-in gebruiken om het in een reeks Base64-code om te zetten.
Open de PSD in Photoshop. We weten dat de afmetingen van het patroon 24px breed bij 12px hoog zijn, dus ga je gang en gebruik je selectiekader om overal in je ontwerp een selectie van die grootte te maken.
Zorg er nu voor dat de achtergrondlaag waarop het patroon is toegepast is geselecteerd, open uw PNGHat-venster. Het enige wat u hoeft te doen, is op de "Base 64" -optie in de bovenste rij van het venster klikken en vervolgens op "Geselecteerde lagen exporteren" klikken..
U ziet een dialoogvenster verschijnen met de vraag om bevestiging dat u "Afbeelding bijsnijden op selectie?". Klik Ja en je zult je Base64 string output in de onderste ruimte van het PNGHat venster zien. Klik op de Kopiëren knop.
Ga terug naar je style.less plaats en plak de code die u zojuist hebt gekopieerd van PNGHat in uw "Variabelen" -sectie. Verwijder alles van de geplakte code behalve voor url (gegevens ...); en voeg dan toe @satinweave: aan het begin van de regel. Je zou moeten eindigen met:
@satinweave: url (gegevens: beeld / PNG, base64, iVBORw0KGgoAAAANSUhEUgAAABgAAAAMAgMAAAAFXpXmAAAABGdBTUEAALGPC / xhBQAAAAlQTFRF8vLy7 + / + v8fHxxV2ZvQAAADRJREFUCNdVysENADAIQlGWkRj3rodOWeDW0w8 0axlg5wlFW / FGyEdTUpeESKOqXBN8 + cB4yUS37 / ediwAAAAASUVORK5CYII =);
We zijn nu klaar om onze nieuwe, eenvoudig te gebruiken te plaatsen @satinweave verander in een stijl zodat deze in ons ontwerp verschijnt. Terwijl we bezig zijn, voegen we ook een aantal basisregels toe voor de hele site box-sizing en koppelingsinstellingen.
Voeg de volgende code toe aan het gedeelte "Stijlen" van uw styles.less het dossier:
* .box-dimensionering (border-box); body background-image: @satinweave; overflow-x: verborgen; a, a: link, a: visited, a: hover, a: active text-decoration: none;
Sla uw bestand op zodat Prepros uw wijzigingen in uw compileert style.css het dossier.
Ga naar Prepros, klik op de Meer opties knop en kies Kopieer live voorbeeld-URL, (dat is waarschijnlijk http: // localhost: 8000), plak het dan in uw browser.
Hiermee krijgt u een voorbeeld van uw statische site die automatisch opnieuw wordt geladen telkens wanneer Prepros uw code compileert.
Je zou nu je pure Base64-patroon naast de achtergrond van de pagina moeten zien.
Het kan niet eenvoudiger zijn om CSSHat de CSS3 voor elk ontwerpelement te laten uitvoeren. Selecteer de betreffende laag met het CSSHat-venster open en het genereert automatisch de code die u nodig hebt.
Er zijn een paar opties waaruit je kunt kiezen in de instellingen van het CSSHat-venster. In ons geval willen we dat onze code als MINDER wordt uitgevoerd en we willen dat alle kleine knoppen onderaan het CSSHat-venster (opmerkingen, dimensies, voorvoegsels, regel) worden gedeactiveerd. Uw CSSHat-venster zou er als volgt uit moeten zien:
Merk op dat je CSSHat de hoogte en breedte code voor je kunt laten genereren px waarden door op de vierde knop te klikken (die eruit ziet als een vierkantje met kleinere vierkanten op de hoeken). Ik geef er echter de voorkeur aan de mijne te schrijven, zodat ik deze gemakkelijker kan gebruiken rem / em / % waarden waar ik ze nodig heb.
Wanneer de code voor uw geselecteerde laag is gegenereerd, klikt u op de Kopiëren knop onderaan het venster, klaar om in uw te plakken style.less het dossier.
We gaan nu door met het toevoegen van de rest van uw ontwerpelementen via CSS.
Omdat CSSHat het ding zo gemakkelijk maakt, kunnen we een behoorlijk standaard standaardproces gebruiken dat net wordt herhaald totdat uw ontwerp volledig is gecodeerd.
Voor elk element beginnen we met het toevoegen van de bijbehorende HTML aan de index.html het dossier.
Hierna zal elk nieuw element bestaan uit het toevoegen van een of meer MINDER-mixins, die we zullen gebruiken om de CSS3 gegenereerd door CSSHat te houden. Het is handig om uw CSSHat-gegenereerde code gescheiden te houden van de rest van uw stijlcode, zodat u deze gemakkelijk kunt bijwerken als u uw ontwerp wijzigt. Je zou nieuwe mixins aan het "Mixins" gedeelte van je moeten toevoegen style.less bestand, zoals hierboven beschreven.
Ten slotte voegt u de daadwerkelijke CSS-stijlen toe die worden uitgevoerd naar uw stylesheet. Deze stijlen bevatten uw mixins en enkele extra code die ik u geef om de lay-out, dimensies en aspecten te regelen die Photoshop niet aankan, zoals numeriek lettertype-gewicht en 'één zijde per keer' randen. Je stijlen moeten worden toegevoegd aan het gedeelte "Stijlen" van je style.less het dossier.
We zullen elk ontwerpelement in dezelfde volgorde maken als in het vorige deel van deze tutorial, zodat u gemakkelijk kunt terugverwijzen als u dit wilt.
Voeg het volgende toe tussen uw open en afsluitende body-tags.
Selecteer de bovenste trimlaag van uw PSD en kopieer de CSSHat-gegenereerde code:
dekking: .5; achtergrondkleur: #ddd; .box-shadow (~ "0 2px 1px #fff, inzet 0 -2px 4px # c8c8c8");
In uw style.less bestand maak een nieuwe mixin genaamd TopTrim en plak in je CSSHat-code als volgt:
.TopTrim () dekking: .5; achtergrondkleur: #ddd; .box-shadow (~ "0 2px 1px #fff, inzet 0 -2px 4px # c8c8c8");
We nemen nu je nieuwe mixin op in het gedeelte "Stijlen" van je style.less het dossier. Voeg de volgende nieuwe stijlcode toe:
// Top trim .toptrim height: 8px; margin-bottom: 62px; .TopTrim ();
In de bovenstaande code halen we onze CSSHat-gegenereerde stijlen uit via de TopTrim-mixin en bepalen we ook de layoutdimensies die we nodig hebben.
U zou nu moeten zien dat uw "top-trim" bovenaan uw site wordt weergegeven.
Voeg het volgende toe onder de laatste HTML die u heeft toegevoegd:
Selecteer de "menuwrap" -laag van je PSD, kopieer de CSSHat-gegenereerde code en plak deze in een nieuwe mixin met de naam MenuWrapBG:
.MenuWrapBG () .border-radius (12px); achtergrondkleur: # f9f9f9; .box-shadow (~ "0 1px 2px #fff, inzet 0 1px 10px rgba (0,0,0, .15)"); .background-image (~ "lineaire gradiënt (onder, #fff 0%, # f3f3f3 100%)");
Voeg de volgende nieuwe stijlcode toe:
// Menu .menuwrap min-height: 61px; maximale breedte: 1200 px; Breedte: 100%; marge: 0 auto; opvulling: 5px; .MenuWrapBG;
Je zou nu moeten zien:
Update uw bestaande menucode naar het volgende:
Selecteer uw PSD's menubg laag en kopieer de CSSHat gegenereerde code in een nieuwe mixin genaamd MainMenuBG:
.MainMenuBG () border: 1px solid # e4e4e4; .border radius (11px); achtergrondkleur: #fff; .box-shadow (~ "0 3px 4px rgba (193,193,193, .75)"); .background-image (~ "lineaire gradiënt (onder, # e5e5e5 0%, #fff 100%)");
Voeg de volgende nieuwe stijlcode toe:
ul.mainmenu opvulling: 0 15px; marge: 0; list-style-type: none; min-height: 50px; .MainMenuBG ();
Je zou nu moeten zien:
Update uw bestaande menucode naar het volgende:
Selecteer in uw PSD een van de rechthoeken van uw menu-items en kopieer de door CSSHat gegenereerde code naar een nieuwe naam met de naam MenuItemBG:
.MenuItemBG () .background-image (~ "lineaire gradiënt (onder, #eee 0%, # e4e4e4 25.49%, #fbfbfb 100%)");
Selecteer in uw PSD de tekst van een van uw menu-items en kopieer de door CSSHat gegenereerde code naar een nieuwe naam met de naam MenuItemText:
.MenuItemText () color: # 5b5b5b; lettertype-familie: "Roboto"; lettergrootte: 18px; text-shadow: 0 1px 0 #fff;
Werk het bestaande bij ul.mainmenu stijl als volgt.
ul.mainmenu opvulling: 0 15px; marge: 0; list-style-type: none; min-height: 50px; .MainMenuBG (); li weergave: blok; zweven: links; opvulling: 0; border-top: 1px solid rgba (0,0,0,0); border-bottom: 1px solid #dddddd; border-right: 1px solid #dddddd; border-left: 1px solid rgba (0,0,0,0); &: first-of-type border-left: 1px solid #dddddd; .MenuItemBG (); a, a: link, a: visited display: block; hoogte: 47px; regelhoogte: 47px; opvulling: 0 30px; // fonttype toegevoegd gewicht: 400; .MenuItemText ();
We gebruiken MINDER regelnesten dus allemaal li kinderen van ul.mainmenu zal aangetast worden.
U zult zich ook in de vorige zelfstudie herinneren dat we de lijntool handmatig moesten gebruiken om een kleurselectie voor de randen van ons menu-item te vergemakkelijken, gezien het onvermogen van Photoshop om elke randzijde afzonderlijk in te stellen. In het bovenstaande ziet u dat we deze randstijlen gebruiken met behulp van de kleurcode #dddddd we hebben in die fase gekozen.
We hebben ook een aantal transparante randen aan de linker- en bovenkant van de menu-items toegevoegd. De reden hiervoor is dat ons huidige item / hover-effect randen aan alle vier zijden gebruikt, dus we moeten ervoor zorgen dat er een overeenkomende breedte is in menu-items in hun standaard en zweeftoestanden.
En tot slot hebben we het juiste handmatig toegevoegd lettertype dikte van 400 naar de menuoptekst, omdat Photoshop alleen kan werken met waarden zoals "normaal" of "vetgedrukt".
Je zou nu moeten zien:
In dit geval hebben we geen extra HTML nodig, omdat we in de laatste stap al een menu-item hebben toegevoegd met de klasse "current" erop.
Selecteer in uw PSD de rechthoek van uw "huidige" menu-item en kopieer de CSSHat-gegenereerde code naar een nieuwe mixin genaamd CurrentMenuItemBG:
.CurrentMenuItemBG () border: 1px solid # e62d4e; achtergrondkleur: # ef3d5d; .box-shadow (~ "0 1px 0 # cc2241, inzet 0 2px 5px rgba (250,171,185, .6)"); .achtergrondafbeelding (~ "lineaire gradiënt (onder, # ef3d5d 0%, # dc2344 25,49%, # fc6b85 100%)");
Selecteer nu de tekst van je "huidige" menu-item en kopieer de door CSSHat gegenereerde code naar een nieuwe mixin met de naam CurrentMenuItemText:
.CurrentMenuItemText () color: #fff; lettertype-familie: "Roboto"; lettergrootte: 18px; text-shadow: 0 -1px 0 # b50020;
Werk het bestaande bij ul.mainmenu stijl als volgt.
ul.mainmenu opvulling: 0 15px; marge: 0; list-style-type: none; min-height: 50px; .MainMenuBG (); li weergave: blok; zweven: links; opvulling: 0; border-top: 1px solid rgba (0,0,0,0); border-bottom: 1px solid rgba (0,0,0,0.05); border-right: 1px solid rgba (0,0,0,0.05); border-left: 1px solid rgba (0,0,0,0); &: eerste-type border-left: 1px solid rgba (0,0,0,0.05); .MenuItemBG (); a, a: link, a: visited display: block; hoogte: 47px; regelhoogte: 47px; opvulling: 0 30px; // fonttype toegevoegd gewicht: 400; .MenuItemText (); &: hover .CurrentMenuItemBG (); a, a: link, a: visited .CurrentMenuItemText () li.current .CurrentMenuItemBG (); a, a: link, a: visited .CurrentMenuItemText ()
En om toe te staan dat de menu-items op meerdere regels worden gepusht als er twee veel zijn voor de beschikbare breedte, voegt u de volgende clearfix-code toe onder uw bestaande menuklasse.
ul.mainmenu: before, ul.mainmenu: after content: ""; weergave: tafel; ul.mainmenu: after clear: both;
U zou nu de "huidige" stijl moeten zien toegepast op zowel het actuele huidige menu-item als het zweefeffect:
Voeg de volgende code toe onder de HTML van je menu:
Wist je dat je het kunt
Heb je Photoshop
EN JOUW
Pure code ook?
Selecteer in uw PSD de eerste of derde hoofdtekstregel (dunne grijze tekst) en kopieer de CSSHat-gegenereerde code naar een nieuwe mixin genaamd ThinText:
.ThinText () color: # 6b6b6b; lettertype-familie: "Roboto"; lettergrootte: 48 px;
Selecteer in uw PSD de tweede of vierde hoofdtekstregel (dikke tekst) en kopieer de CSSHat-gegenereerde code naar een nieuwe mixin genaamd ThickText:
.ThickText () color: # ef3d5d; lettertype-familie: "Roboto"; lettertypegrootte: 80px; lettertype: vet;
Voeg de volgende nieuwe stijlcode toe:
// Hoofdtekstregels. Hoofdtekst opvulling: 70 px 0; text-align: center; .thintext margin: 0.425em 0; // fonttype toegevoegd gewicht: 100; .ThinText (); .thicktext margin: 0.425em 0; .ThickText ();
Je zou dit nu onder je menu moeten zien:
Voeg de volgende code toe:
Selecteer in uw PSD uw achtergrondpaneel-achtergrondrechthoek en kopieer de door CSSHat gegenereerde code naar een nieuwe naam met de naam PanelBG:
// Paneelmixins. PanelBG () border: 1px solid # d7d7d7; .border straal (15 pixels); achtergrondkleur: #fff; .box-shadow (~ "0 3px 4px rgba (193,193,193, .27)");
Voeg de volgende nieuwe stijlcode toe:
.paneel max-width: 1200px; Breedte: 100%; marge: 0 auto; padding-bottom: 50px; text-align: center; .PanelBG ();
Je zou nu je info paneel achtergrond moeten zien, momenteel nog leeg:
Werk de HTML van uw infovenster bij naar het volgende:
IN DEZE TUTORIAL:
Selecteer in uw PSD de achtergrondlaag van uw paneelkop en kopieer de door CSSHat gegenereerde code naar een nieuwe naam met de naam PanelHeadBG:
.PanelHeadBG () .border-radius (10px); achtergrondkleur: # ef3d5d; .box-shadow (~ "0 3px 0 # cc2241, inzet 0 0 5px rgba (222,42,74, .6)"); .achtergrond-afbeelding (~ "lineaire gradiënt (onderkant, # ee2c4f 0%, # dc2344 10,5%, # fc6b85 100%)");
We gaan nu een tweede schaduw toevoegen aan de PanelHeadBG-mix die we al hebben gemaakt. U herinnert zich in Deel 1 van deze tutorial dat we extra schaduwen moesten maken in tweede lagen omdat Photoshop niet in staat was om meerdere slagschaduwen op één laag af te handelen.
Selecteer in uw PSD de tweede schaduwlaag van uw paneelheader en kopieer deze enkel en alleen de code tussen de haakjes op de box-shadow regel, die zou moeten zijn:
0 5px 3px rgba (0,0,0, .27)
In de PanelHeadBG mixin je zojuist hebt gemaakt, voeg je een komma toe vóór het sluitende haakje van het bestaande box-shadow regel, plak dan de code die je zojuist hebt overgenomen van CSSHat om je het volgende te geven:
.box-shadow (~ "0 3px 0 # cc2241, inzet 0 0 5px rgba (222,42,74, .6), 0 5px 3px rgba (0,0,0, .27)");
Selecteer in uw PSD de tekst van de paneeltitel en kopieer de door CSSHat gegenereerde code naar een nieuwe naam met de naam PanelHeadText:
.PanelHeadText () color: #fff; lettertype-familie: "Roboto"; tekengrootte: 24 px; text-shadow: 0 -1px 0 # b50020;
Voeg de volgende nieuwe stijlcode toe:
.paneelkop margin: 60px -15px; opvulling: 20px; .PanelHeadBG (); // fonttype toegevoegd gewicht: 400; .PanelHeadText ();
Merk op dat we een hebben toegevoegd lettertype dikte van 400 handmatig gegeven Photoshop kan geen numerieke waarden voor het lettergewicht verwerken.
Je zou nu moeten zien:
Werk uw bestaande HTML-HTML-code opnieuw bij, deze keer naar het volgende:
IN DEZE TUTORIAL:Leer ontwerpen in Photoshop en uitvoer
standaard voor gebruik pure CSS3 + Base64-code.Dat betekent geen afbeeldingen en minimale HTTP
verzoeken om ultra efficiënt laden.CSSHat + PNGHat + MINDER + FontAwesome
Selecteer in uw PSD de tekstlaag met een lager gewicht in het infopaneel en kopieer de door CSSHat gegenereerde code naar een nieuwe naam met de naam PanelText:
.PanelText () color: # 6b6b6b; lettertype-familie: "Roboto"; lettergrootte: 36px;
Selecteer nu de laag met de info-paneeltekst dikker gewicht en kopieer de door CSSHat gegenereerde code naar een nieuwe naam genaamd UsingTheseText:
.UsingTheseText () color: # 6b6b6b; lettertype-familie: "Roboto"; lettergrootte: 48 px;
Werk het bestaande bij .paneel stijl om:
.paneel max-width: 1200px; Breedte: 100%; marge: 0 auto; padding-bottom: 50px; text-align: center; .PanelBG (); .PanelText (); font-gewicht: 100; p marge: 1,2 em 0;
Dit voegt de PanelText-mixin toe, evenals een numeriek lettertype en een beetje margebeheer voor alinea's in het infopaneel.
Voeg ook de volgende nieuwe stijlcode toe, onder de .paneel klasse:
.gebruikmakend van deze // font font weight: 900; .UsingTheseText (); .licht kleur: # EF3D5C;
Dit past de grotere en dikkere lettertypestijl toe op de onderste regel van de tekst, evenals het toevoegen van gekleurde hooglichten.
Je zou nu moeten zien:
Voeg de onderstaande code toe onder uw infopaneel:
Omdat we FontAwesome.less eerder in ons project hebben opgenomen, plaatst deze HTML automatisch onze pijl naar beneden via de toepassing van de klassen fa en fa-arrow-down aan een ik (pictogram) element.
In eerste instantie zal het in de standaard kleine, zwarte staat verschijnen, dus alles wat we moeten doen is het op dezelfde manier stylen als elk ander tekstelement.
Selecteer in je PSD je grote pijl naar beneden en kopieer de CSSHat-gegenereerde code naar een nieuwe mixin met de naam DownArrow:
.DownArrow () dekking: .3; kleur: # 6b6b6b; font-family: "FontAwesome"; lettergrootte: 200 px;
Voeg de volgende nieuwe stijlcode toe:
.downarrow margin: 80px auto; text-align: center; i .DownArrow ();
U zou dit nu onder uw infopaneel moeten zien:
Voeg de volgende code toe onder de grote pijl html:
Zoals met onze pijl naar beneden, ons gebruik van de FontAwesome-klassen fa en fa-caret-rechts plaats automatisch het pictogram dat we willen gebruiken, in dit geval een pijl naar rechts.
Selecteer in uw PSD uw startknoprechthoeklaag en kopieer de door CSSHat gegenereerde code naar een nieuwe naam met de naam StartButtonBG:
.StartButtonBG () .border-radius (10px); achtergrondkleur: # ef3d5d; .box-shadow (~ "0 3px 0 # cc2241, inzet 0 0 5px rgba (222,42,74, .6)"); .achtergrond-afbeelding (~ "lineaire gradiënt (onderkant, # ee2c4f 0%, # dc2344 10,5%, # fc6b85 100%)");
Net als bij de paneelheader voegen we nu een tweede schaduw toe aan de mix die we zojuist hebben gemaakt.
Selecteer in je PSD de tweede schaduwlaag van je knop en kopieer deze enkel en alleen de code tussen de haakjes op de box-shadow lijn:
0 5px 3px rgba (0,0,0, .27)
In de StartButtonBG mixin voeg een komma toe vóór het sluitende haakje van het bestaande box-shadow regel, plak dan de code die je zojuist hebt overgenomen van CSSHat om je het volgende te geven:
.box-shadow (~ "0 3px 0 # cc2241, inzet 0 0 5px rgba (222,42,74, .6), 0 5px 3px rgba (0,0,0, .27)");
Selecteer de tekstlaag van uw startknop en kopieer de door CSSHat gegenereerde code naar een nieuwe naam met de naam StartButtonText:
.StartButtonText () color: #fff; lettertype-familie: "Roboto"; lettergrootte: 36px; text-shadow: 0 -1px 0 # b50020;
Voeg de volgende nieuwe stijlcode toe:
.buttonrow text-align: center; marge: 20px auto; .start border: 0; opvulling: 0.75em 1em; weergave: inline-block; .StartButtonBG (); .StartButtonText ();
De eerste .buttonrow klasse handelt eenvoudigweg om de knop te centreren, terwijl de tweede .begin klasse past zowel de knopachtergrond als tekststijl toe.
Je zou nu moeten zien:
In dit geval hebben we geen extra HTML nodig, omdat we werken met de knop HTML die in de laatste stap is toegevoegd.
Selecteer in je PSD de kleine kringlaag boven je knop en kopieer de door CSSHat gegenereerde code naar een nieuwe naam met de naam ArrowCircle:
.ArrowCircle () .border-radius (23px); achtergrondkleur: # ef3d5d; .background-image (~ "lineaire gradiënt (onder, # ef4f6b 0%, # e32d4f 100%)");
Selecteer nu de kleine naar rechts wijzende witte pijllaag en kopieer de door CSSHat gegenereerde code naar een nieuwe naam genaamd Rechter pijl:
.RightArrow () color: #fff; font-family: "FontAwesome"; lettergrootte: 36px;
Voeg de volgende nieuwe stijlcode toe:
.arrowcircle display: inline-block; text-align: center; padding-links: 7px; margin-right: 10px; .size (47px); .ArrowCircle (); i.rightarrow font-style: normaal; weergave: blok; regelhoogte: 50px; .Rechter pijl();
Je zou nu moeten zien:
Voeg de volgende code onder uw startknop HTML toe:
Selecteer in je PSD de laag die de twee kleine concentrische grijze cirkels bevat en kopieer de CSSHat-gegenereerde code naar een nieuwe mixin genaamd CenteredCircle:
.CenteredCircle () border: 5px solid #ddd; .border straal (20 pixels); achtergrondkleur: # f1f1f1; .achtergrond-afbeelding (~ "radiale gradiënt (midden midden, 100px 100px, #ddd 0%, #ddd 39,99%, # f1f1f1 44,75%, # f1f1f1 100%)");
Dit is de enige plaats waar ik vond dat
Accentsconagua