So codieren Sie ein Photoshop-Layout mit CSSHat, LESSHat und PNGHat

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

Final product image — What You'll Be Creating

Im vorherigen Tutorial haben wir behandelt, wie Sie ein Design in Photoshop vorbereiten, das für die Konvertierung in reinen CSS3- und Base64-Code bereit ist. In diesem Tutorial behandeln wir die eigentliche Codegenerierung mit Hilfe der Photoshop-Plugins CSSHat und PNGHat von Source sowie FontAwesome und dem CSS-Präprozessor LESS.

Lass uns direkt eintauchen!

Erstellen Sie Ihre Datei- und Ordnerstruktur

Zunächst müssen Sie einen neuen Ordner auf Ihrem Computer erstellen, um Ihre statische Website zu beherbergen. In diesem Fall nenne ich meinen Ordner codedup.

Erstellen Sie in diesem Ordner eine neue Datei namens index.html und fügen Sie den folgenden Code hinzu:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>Photoshop to Pure Code with CSSHat and PNGHat</title>
	<link href='http://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>

Hier richten wir die grundlegende HTML-Shell für die Site und die Verlinkung in Roboto ein, die Google-Schriftart, die wir in unserer PSD verwendet haben, sowie unser CSS-Stylesheet.

Erstellen Sie als Nächstes zwei Unterordner in Ihrem codedup-Ordner, einen mit dem Namen css und den anderen mit dem Namen LESS. Erstellen Sie im Ordner LESS eine Datei namens style.less. Alle Stile für Ihre Site werden in diese Datei geschrieben und anschließend in css > style.css kompiliert.

Hinweis: Struktur Ihrer LESS-Datei

Im weiteren Verlauf sollte der Code Ihrer style.less-Datei in dieser Reihenfolge organisiert sein:

Importe
Variablen
Mixins
Stile

Ich empfehle, am Anfang jedes Abschnitts in Ihrer style.less-Datei einen Kommentar hinzuzufügen, damit Sie den Überblick behalten, wo verschiedene Arten von Code platziert werden sollten.

Wenn Sie es vorziehen, können Sie separate Dateien(Partials) erstellen, um jeden dieser Codetypen zu beherbergen, und jeden von ihnen in Ihre LESS-Hauptdatei importieren. Der Einfachheit halber verwenden wir hier jedoch nur eine Datei.

Automatisches Kompilieren mit Prepros einrichten

Prepros ist eine Anwendung, die alle Arten von Frontend-Aufgaben für Webdesigner und Entwickler übernimmt. Es kompiliert unser WENIGER, aktualisiert den Browser automatisch, wenn Änderungen an unseren Dateien vorgenommen werden, und synchronisiert sogar mehrere Geräte, wenn wir möchten. Laden Sie Prepros herunter und installieren Sie es, das Sie kostenlos erhalten können von: http://alphapixels.com/prepros/

Führen Sie die Anwendung aus und ziehen Sie dann den codedup-Ordner auf die Hauptoberfläche, um ihn als neues Projekt hinzuzufügen.

Prepros erkennt automatisch die style.less-Datei in Ihrem Projektordner und hat standardmäßig "Auto Compile" aktiviert. Jedes Mal, wenn Sie eine Änderung an style.less speichern, erkennt Prepros diese und kompiliert sie in css > style.css.

Sie können auch auf style.less in der Benutzeroberfläche klicken, um zusätzliche verfügbare Einstellungen anzuzeigen, z. B. die Option, das CSS während der Kompilierung zu komprimieren.

Integrieren Sie LESSHat und Normalize.less

Holen Sie sich jetzt die Dateien für LESSHat, eine Mixin-Bibliothek, die sich wunderbar mit CSSHat verbindet, sowie Normalize.less, eine Version von "Normalize.css", die in weniger freundlicher Syntax geschrieben ist.

Nachdem Sie die beiden Dateien heruntergeladen und in Ihr Projekt eingefügt haben, gehen Sie zurück zu Prepros und Sie werden sehen, dass beide automatisch erkannt wurden. Wir werden beide in unser style.less-Hauptverzeichnis importieren und möchten nicht, dass sie in einzelne CSS-Dateien kompiliert werden, also klicken Sie auf jedes und deaktivieren Sie "Auto Compile".

Öffnen Sie nun Ihre style.less-Datei in Ihrem bevorzugten Code-Editor und fügen Sie diese beiden Zeilen oben hinzu:

1	@import "lesshat.less";
2	@import "normalize.less";

Speichern Sie Ihre Datei und Prepros kompiliert sie automatisch für Sie. Danach sollten Sie das folgende Popup in der unteren rechten Ecke Ihres Bildschirms sehen:

Sie sollten jetzt auch die Datei style.css im css-Ordner Ihres Projekts sehen.

Integrieren Sie FontAwesome

Wir werden jetzt FontAwesome in das Projekt einbinden, indem wir die Schriftdateien selbst sowie "FontAwesome.less" hinzufügen, eine vorgefertigte LESS-Bibliothek, die es unglaublich einfach macht, FontAwesome-Symbole in Ihren Designs zu platzieren. Alles, was wir tun müssen, ist die Datei zu importieren und dann sind die FontAwesome-Klassen sofort verfügbar.

Wie dies in der Praxis funktioniert, werden Sie später im Tutorial sehen, wenn wir unser Element "großer Pfeil nach unten" hinzufügen.

Erstellen Sie zunächst einen Unterordner namens font-awesome in Ihrem LESS-Ordner. Es gibt einige Dateien in der Bibliothek von FontAwesome, also werden wir sie hier aufbewahren, um unsere Ärmel zu organisieren

Laden Sie FontAwesome als Zip herunter von: https://github.com/FortAwesome/Font-Awesome

Extrahieren Sie den Ordner und kopieren Sie alle Dateien aus dem Ordner less, und fügen Sie sie dann in den soeben in Ihrem Projekt erstellten font-awesome-Ordner ein. Kopieren Sie dann den gesamten fonts-Ordner aus Ihrem entpackten FontAwesome-Download und fügen Sie ihn als Unterordner in Ihr Projekt ein.

Ihre vollständige Projektdatei- und Ordnerstruktur sollte jetzt so aussehen:

Prepros erkennt wieder neue LESS-Dateien, also deaktivieren Sie "Auto Compile" bei allen Dateien, die jetzt in der Benutzeroberfläche angezeigt werden.

Fügen Sie Ihrer style.less-Datei die folgende Zeile unter den zuvor hinzugefügten Zeilen hinzu:

1	@import "font-awesome/font-awesome.less";

Ihr Projekt verfügt jetzt über alle WENIGER Importe und Schriftartendateien, die Sie benötigen, und die automatische Kompilierung ist aktiviert, sodass wir mit der Übersetzung Ihrer PSD in Code beginnen können.

Hintergrundbild als Base64 einbinden

Im vorherigen Tutorial haben wir das Muster "Satin Weave" gewählt, um unseren Hintergrund aufgrund seiner geringen Größe und geringen Anzahl von Farben zu kacheln. Wir werden jetzt das PNGHat-Plugin verwenden, um es in eine Zeichenfolge von Base64-Code zu konvertieren.

Öffnen Sie die PSD in Photoshop. Wir wissen, dass die Abmessungen des Musters 24 Pixel breit und 12 Pixel hoch sind. Verwenden Sie also Ihr Festzelt, um eine Auswahl dieser Größe an einer beliebigen Stelle in Ihrem Design zu erstellen.

Stellen Sie nun sicher, dass die Hintergrundebene ausgewählt ist, auf die das Muster angewendet wurde, und öffnen Sie Ihr PNGHat-Fenster. Alles, was Sie tun müssen, ist in der oberen Reihe des Fensters auf die Option "Base 64" zu klicken und dann auf "Ausgewählte Ebenen exportieren" zu klicken.

Sie werden einen Dialog sehen, der Sie um Bestätigung bittet, dass Sie "Bild nach Auswahl zuschneiden?". Klicken Sie auf Ja und Sie sehen Ihre Base64-String-Ausgabe im unteren Bereich des PNGHat-Fensters. Klicken Sie auf die Schaltfläche Kopieren.

Gehen Sie zurück zu Ihrer style.less-Datei und fügen Sie den Code, den Sie gerade von PNGHat kopiert haben, in Ihren Abschnitt "Variablen" ein. Löschen Sie alles aus dem eingefügten Code außer url(data.......); und fügen Sie dann @satinweave: am Anfang der Zeile hinzu. Sie sollten am Ende haben:

@satinweave: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAMAgMAAAAFXpXmAAAABGdBTUEAALGPC/xhBQAAAAlQTFRF8vLy7+/v8fHxxV2ZvQAAADRJREFUCNdVysENADAIQlGWkRj3rodOWeDW0w8+0axlg5wlFW/FGyEdTUpeESKOqXBN8+cB4yUS37/ediwAAAAASUVORK5CYII=);

Wir sind jetzt bereit, unsere neue, einfach zu verwendende @satinweave-Variable in einen Stil zu platzieren, damit sie in unserem Design erscheint. Wenn wir schon dabei sind, werden wir auch ein paar grundlegende Regeln für die box-sizing- und Link-Einstellungen für die gesamte Site hinzufügen.

Fügen Sie dem Abschnitt "Styles" Ihrer Datei styles.less den folgenden Code hinzu:

* {
    .box-sizing(border-box);
}
body {
	background-image: @satinweave;
	overflow-x: hidden;
}
a, a:link, a:visited, a:hover, a:active {
	text-decoration: none;
}

Speichern Sie Ihre Datei, damit Prepros Ihre Änderungen in Ihre style.css-Datei kompiliert.

Gehen Sie zu Prepros, klicken Sie auf die Schaltfläche Weitere Optionen und wählen Sie Live-Vorschau-URL kopieren (höchstwahrscheinlich http://localhost:8000) und fügen Sie sie in Ihren Browser ein.

Dadurch erhalten Sie eine Vorschau Ihrer statischen Site, die jedes Mal automatisch neu geladen wird, wenn Prepros Ihren Code kompiliert.

Sie sollten jetzt Ihre reine Base64-Musterkachelung im Hintergrund der Seite sehen.

CSS-Elemente hinzufügen

CSS3 mit CSSHat generieren

Es könnte nicht einfacher sein, CSSHat das CSS3 für jedes Designelement ausgeben zu lassen. Wählen Sie einfach die betreffende Ebene bei geöffnetem CSSHat-Fenster aus und es wird automatisch der benötigte Code generiert.

Es gibt einige Optionen, aus denen Sie in den Einstellungen des CSSHat-Fensters auswählen können. In unserem Fall möchten wir, dass unser Code als LESS ausgegeben wird, und wir möchten, dass alle kleinen Schaltflächen am unteren Rand des CSSHat-Fensters (Kommentare, Dimensionen, Präfixe, Regeln) deaktiviert sind. Ihr CSSHat-Fenster sollte so aussehen:

Beachten Sie, dass Sie CSSHat Höhen- und Breitencode in px-Werten generieren lassen können, indem Sie auf die vierte Schaltfläche klicken (die wie ein kleines Quadrat mit kleineren Quadraten an den Ecken aussieht). Ich schreibe jedoch lieber meine eigenen, damit ich rem / em / %-Werte leichter dort verwenden kann, wo ich sie brauche.

Wenn der Code für Ihre ausgewählte Ebene generiert wurde, klicken Sie einfach auf die Schaltfläche Kopieren am unteren Rand des Fensters, um sie in Ihre style.less-Datei einzufügen.

Der Elementadditionsprozess

Wir fügen nun den Rest Ihrer Designelemente über CSS hinzu.

Da CSSHat die Sache so einfach macht, können wir einen ziemlich standardmäßigen Prozess verwenden, der einfach wiederholt wird, bis Ihr Design vollständig codiert ist.

Für jedes Element fügen wir zunächst den entsprechenden HTML-Code zur Datei index.html hinzu.

Danach beinhaltet jedes neue Element das Hinzufügen eines oder mehrerer LESS-Mixins, die wir verwenden, um das von CSSHat generierte CSS3 zu speichern. Es ist hilfreich, Ihren CSSHat-generierten Code vom Rest Ihres Stilcodes zu trennen, damit Sie ihn leicht aktualisieren können, wenn Sie Ihr Design ändern. Sie sollten neue Mixins zum Abschnitt "Mixins" Ihrer style.less-Datei hinzufügen, wie oben beschrieben.

Schließlich fügen Sie die tatsächlichen CSS-Stile hinzu, die zu Ihrem Stylesheet ausgegeben werden. Diese Stile enthalten Ihre Mixins sowie zusätzlichen Code, den ich zur Verfügung stellen werde, um das Layout, die Abmessungen und Aspekte zu steuern, die Photoshop nicht verarbeiten kann, wie z. B. numerische Schriftstärken und "eine Seite nach der anderen" Rahmen. Ihre Stile sollten dem Abschnitt "Stile" Ihrer style.less-Datei hinzugefügt werden.

Wir erstellen jedes Designelement in der gleichen Reihenfolge wie im vorherigen Teil dieses Tutorials, damit Sie bei Bedarf leicht zurückgreifen können.

Fügen Sie die obere Verkleidung hinzu

HTML hinzufügen:

Fügen Sie Folgendes zwischen Ihren öffnenden und schließenden Body-Tags hinzu.

1	<br><div class="toptrim"></div>

CSSHat:

Wählen Sie die "obere Trim"-Ebene Ihrer PSD aus und kopieren Sie den von CSSHat generierten Code:

1	opacity: .5;
2	background-color: #ddd;
3	.box-shadow(~"0 2px 1px #fff, inset 0 -2px 4px #c8c8c8");

Neue Mischung:

Erstellen Sie in Ihrer style.less-Datei ein neues Mixin namens TopTrim und fügen Sie Ihren CSSHat-Code wie folgt ein:

.TopTrim(){
opacity: .5;
background-color: #ddd;
.box-shadow(~"0 2px 1px #fff, inset 0 -2px 4px #c8c8c8");
}

Neuer Stil:

Wir binden jetzt Ihr neues Mixin in den Abschnitt "Styles" Ihrer style.less-Datei ein. Fügen Sie den folgenden neuen Stilcode hinzu:

//Top trim
.toptrim {
height: 8px;
margin-bottom: 62px;
.TopTrim();
}

Im obigen Code ziehen wir unsere CSSHat-generierten Stile über das TopTrim-Mixin heraus und legen die benötigten Layout-Abmessungen fest.

Ergebnis:

Sie sollten jetzt Ihren "Top-Trim" oben auf Ihrer Website sehen.

Erstellen Sie den Menü-Wrapper

HTML hinzufügen:

Fügen Sie unter dem zuletzt hinzugefügten HTML-Code Folgendes hinzu:

1	<nav class="menuwrap">
2	</nav>

CSSHat zum neuen Mixin:

Wählen Sie die "menuwrap"-Ebene Ihrer PSD aus, kopieren Sie den von CSSHat generierten Code und fügen Sie ihn in ein neues Mixin namens MenuWrapBG ein:

.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%)");
}

Neuer Stil:

Fügen Sie den folgenden neuen Stilcode hinzu:

//Menu
.menuwrap {
min-height: 61px;
max-width: 1200px;
width:100%;
margin: 0 auto;
padding: 5px;
.MenuWrapBG;
}

Ergebnis:

Sie sollten jetzt sehen:

Der Menühintergrund

HTML hinzufügen:

Aktualisieren Sie Ihren vorhandenen Menücode wie folgt:

1	<nav class="menuwrap">
2	<ul class="mainmenu">
3	</ul>
4	</nav>

CSSHat zum neuen Mixin:

Wählen Sie die menubg-Ebene Ihrer PSD aus und kopieren Sie den von CSSHat generierten Code in ein neues Mixin namens 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%)");
}

Neuer Stil:

Fügen Sie den folgenden neuen Stilcode hinzu:

ul.mainmenu {
    padding: 0 15px;
	margin: 0;
	list-style-type: none;
	min-height:50px;
	.MainMenuBG();
}

Ergebnis:

Sie sollten jetzt sehen:

Hinzufügen der Menüpunkte

HTML hinzufügen:

Aktualisieren Sie Ihren vorhandenen Menücode wie folgt:

1	<nav class="menuwrap">
2	<ul class="mainmenu">
3	<li><a href="#">Page</a></li>
4	<li class="current"><a href="#">Current</a></li>
5	<li><a href="#">Page</a></li>
6	<li><a href="#">Page</a></li>
7	</ul>
8	</nav>

CSSHat zu neuem Menüelement-Hintergrund-Mixin:

Wählen Sie in Ihrer PSD eines Ihrer Menüelement-Rechtecke aus und kopieren Sie den von CSSHat generierten Code in ein neues Mixin namens MenuItemBG:

1	.MenuItemBG(){
2	.background-image(~"linear-gradient(bottom, #eee 0%, #e4e4e4 25.49%, #fbfbfb 100%)");
3	}

CSSHat zu neuem Menüelement-Text-Mixin:

Wählen Sie in Ihrer PSD den Text eines Ihrer Menüelemente aus und kopieren Sie den von CSSHat generierten Code in ein neues Mixin namens MenuItemText:

.MenuItemText(){
color: #5b5b5b;
font-family: "Roboto";
font-size: 18px;
text-shadow: 0 1px 0 #fff;
}

Aktualisieren Sie Ihren Menüstil:

Aktualisieren Sie den vorhandenen ul.mainmenu-Stil wie folgt.

ul.mainmenu {
    padding: 0 15px;
	margin: 0;
	list-style-type: none;
	min-height:50px;
	.MainMenuBG();
	li {
		display: block;
		float: left;
		padding: 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;
			height: 47px;
			line-height: 47px;
			padding: 0 30px;
			//added font weight
			font-weight: 400;
			.MenuItemText();
		}
	}
}

Wir verwenden LESS-Regelverschachtelung, damit alle li-Kinder von ul.mainmenu betroffen sind.

Sie werden sich auch erinnern, dass wir im vorherigen Tutorial das Linienwerkzeug manuell verwenden mussten, um eine Farbauswahl für unsere Menüelementrahmen zu erleichtern, da Photoshop nicht in der Lage war, jede Rahmenseite einzeln festzulegen. Oben sehen Sie, dass wir diese Rahmenstile mit dem in dieser Phase ausgewählten Farbcode #dddddd integrieren.

Wir haben auch einige transparente Ränder oben und links der Menüelemente hinzugefügt. Der Grund dafür ist, dass unser aktueller Element-/Hover-Effekt auf allen vier Seiten Rahmen verwendet, daher müssen wir sicherstellen, dass die Menüelemente in ihren Standard- und Hover-Zuständen eine übereinstimmende Breite haben.

Und schließlich haben wir dem Menüeintragstext manuell die korrekte font-weight von 400 hinzugefügt, da Photoshop nur mit Werten wie "normal" oder "fett" arbeiten kann.

Ergebnis:

Sie sollten jetzt sehen:

Erstellen Sie "Aktuelle" und Hover-Zustände

In diesem Fall benötigen wir kein zusätzliches HTML, da wir im letzten Schritt bereits einen Menüpunkt mit der Klasse "current" hinzugefügt haben.

CSSHat zu neuem aktuellen Menüelement-Hintergrund-Mixin:

Wählen Sie in Ihrer PSD das Rechteck Ihres "aktuellen" Menüelements aus und kopieren Sie den von CSSHat generierten Code in ein neues Mixin namens 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 zu neuem aktuellen Menüelement-Text-Mixin:

Wählen Sie nun den Text Ihres "aktuellen" Menüeintrags aus und kopieren Sie den von CSSHat generierten Code in ein neues Mixin namens CurrentMenuItemText:

.CurrentMenuItemText(){
color: #fff;
font-family: "Roboto";
font-size: 18px;
text-shadow: 0 -1px 0 #b50020;
}

Menüstil aktualisieren:

Aktualisieren Sie den vorhandenen ul.mainmenu-Stil wie folgt.

ul.mainmenu {
    padding: 0 15px;
	margin: 0;
	list-style-type: none;
	min-height:50px;
	.MainMenuBG();
	li {
		display: block;
		float: left;
		padding: 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);
		&:first-of-type{
			border-left: 1px solid rgba(0,0,0,0.05);
		}
		.MenuItemBG();
		a, a:link, a:visited {
			display:block;
			height: 47px;
			line-height: 47px;
			padding: 0 30px;
			//added font weight
			font-weight: 400;
			.MenuItemText();
		}
		&:hover {
			.CurrentMenuItemBG();
			a, a:link, a:visited {
				.CurrentMenuItemText()
			}
		}
	}
	li.current {
		.CurrentMenuItemBG();
		a, a:link, a:visited {
			.CurrentMenuItemText()
		}
	}
}

Und damit die Menüelemente auf mehrere Zeilen verschoben werden können, wenn es zwei viele für die verfügbare Breite gibt, fügen Sie den folgenden Clearfix-Code unter Ihrer bestehenden Menüklasse hinzu.

ul.mainmenu:before,
ul.mainmenu:after {
    content: " ";
    display: table;
}

ul.mainmenu:after {
    clear: both;
}

Ergebnis:

Sie sollten jetzt den "aktuellen" Stil sehen, der sowohl auf den aktuellen Menüeintrag als auch auf den Hover-Effekt angewendet wird:

Fügen Sie den Haupttext hinzu

HTML hinzufügen:

Fügen Sie den folgenden Code unter Ihrem Menü-HTML hinzu:

<div class="maintext">
    <p class="thintext">Did you know you can</p>
	<p class="thicktext">Have Your Photoshop</p>
	<p class="thintext">AND YOUR</p>
	<p class="thicktext">Pure Code Too?</p>
</div>

CSSHat zu New Mixin, Thin Text:

Wählen Sie in Ihrem PSD entweder die erste oder dritte Haupttextzeile (dünner grauer Text) aus und kopieren Sie den von CSSHat generierten Code in ein neues Mixin namens ThinText:

.ThinText(){
color: #6b6b6b;
font-family: "Roboto";
font-size: 48px;
}

CSSHat zu New Mixin, Dicker Text:

Wählen Sie in Ihrer PSD entweder die zweite oder vierte Haupttextzeile (dicker Text) aus und kopieren Sie den von CSSHat generierten Code in ein neues Mixin namens ThickText:

.ThickText(){
color: #ef3d5d;
font-family: "Roboto";
font-size: 80px;
font-weight: bold;
}

Neue Stile:

Fügen Sie den folgenden neuen Stilcode hinzu:

//Main text lines
.maintext {
    padding: 70px 0;
	text-align: center;
}
.thintext {
	margin: 0.425em 0;
	//added font weight
	font-weight: 100;
	.ThinText();
}

.thicktext {
	margin: 0.425em 0;
	.ThickText();
}

Ergebnis:

Sie sollten dies jetzt unter Ihrem Menü sehen:

Erstellen Sie den Hintergrund des Infobereichs

HTML hinzufügen:

Fügen Sie den folgenden Code hinzu:

1	<div class="panel">
2	</div>

CSSHat zum neuen Mixin:

Wählen Sie in Ihrem PSD das Hintergrundrechteck des Info-Panels aus und kopieren Sie den von CSSHat generierten Code in ein neues Mixin namens PanelBG:

//Panel mixins
.PanelBG(){
border: 1px solid #d7d7d7;
.border-radius(15px);
background-color: #fff;
.box-shadow(~"0 3px 4px rgba(193,193,193,.27)");
}

Neuer Stil:

Fügen Sie den folgenden neuen Stilcode hinzu:

.panel {
    max-width: 1200px;
	width:100%;
	margin: 0 auto;
	padding-bottom: 50px;
	text-align: center;
	.PanelBG();
}

Ergebnis:

Sie sollten jetzt den Hintergrund Ihres Infobereichs sehen, der derzeit noch leer ist:

Hintergrund und Text der Bedienfeldkopfzeile

HTML hinzufügen:

Aktualisieren Sie den HTML-Code Ihres Infobereichs wie folgt:

1	<div class="panel">
2	<div class="panelhead">IN THIS TUTORIAL:</div>
3	</div>

CSSHat zu New Mixin, Panel-Header-Hintergrund:

Wählen Sie in Ihrer PSD Ihre Panel-Header-Hintergrundebene aus und kopieren Sie den von CSSHat generierten Code in ein neues Mixin namens 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%)");
}

Zweiter Schatten des Panel-Headers hinzufügen:

Jetzt fügen wir dem PanelHeadBG-Mixin, das wir bereits erstellt haben, einen zweiten Schatten hinzu. Sie werden sich aus Teil 1 dieses Tutorials daran erinnern, dass wir zusätzliche Schatten auf zweiten Ebenen erstellen mussten, da Photoshop nicht in der Lage war, mehrere Schlagschatten auf einer Ebene zu verarbeiten.

Wählen Sie in Ihrem PSD die zweite Schattenebene des Panel-Headers aus und kopieren Sie nur den Code zwischen den Klammern in der box-shadow-Zeile, der wie folgt lauten sollte:

1	0 5px 3px rgba(0,0,0,.27)

Fügen Sie in dem gerade erstellten PanelHeadBG-Mixin ein Komma vor der schließenden Klammer der bestehenden box-shadow-Zeile hinzu und fügen Sie dann den Code ein, den Sie gerade von CSSHat übernommen haben, um Ihnen Folgendes zu geben:

1	.box-shadow(~"0 3px 0 #cc2241, inset 0 0 5px rgba(222,42,74,.6), 0 5px 3px rgba(0,0,0,.27)");

CSSHat zu New Mixin, Panel-Header-Text:

Wählen Sie in Ihrem PSD Ihren Panel-Header-Text aus und kopieren Sie den von CSSHat generierten Code in ein neues Mixin namens PanelHeadText:

.PanelHeadText(){
color: #fff;
font-family: "Roboto";
font-size: 24px;
text-shadow: 0 -1px 0 #b50020;
}

Neuer Stil:

Fügen Sie den folgenden neuen Stilcode hinzu:

.panelhead {
    margin: 60px -15px;
	padding: 20px;
	.PanelHeadBG();
	//added font weight
	font-weight: 400;
	.PanelHeadText();
}

Beachten Sie, dass wir manuell eine font-weight von 400 hinzugefügt haben, da Photoshop keine numerischen Schriftstärkenwerte verarbeiten kann.

Ergebnis:

Sie sollten jetzt sehen:

Erstellen Sie den Panel-Text

HTML hinzufügen:

Aktualisieren Sie Ihren vorhandenen Panel-HTML-Code erneut, diesmal wie folgt:

<div class="panel">
    <div class="panelhead">IN THIS TUTORIAL:</div>
	<p>Learn how to design in Photoshop and output<br />standards ready pure CSS3 + Base64 code.</p>
	<p>That means no images and minimal HTTP<br />requests for ultra efficient loading.</p>
	<p class="usingthese">CSSHat <span class="highlight">+</span> PNGHat <span class="highlight">+</span> LESS <span class="highlight">+</span> FontAwesome</p>
</div>

CSSHat zu neuem Mixin, Standard-Panel-Text:

Wählen Sie in Ihrem PSD die leichtere Textebene des Infobereichs aus und kopieren Sie den von CSSHat generierten Code in ein neues Mixin namens PanelText:

.PanelText(){
color: #6b6b6b;
font-family: "Roboto";
font-size: 36px;
}

CSSHat zu neuem Mixin, größerer Panel-Text:

Wählen Sie nun die Ebene aus, die den dickeren Text des Infopanels enthält, und kopieren Sie den von CSSHat generierten Code in ein neues Mixin namens UsingTheseText:

.UsingTheseText(){
color: #6b6b6b;
font-family: "Roboto";
font-size: 48px;
}

Neuer Stil:

Aktualisieren Sie den vorhandenen .panel-Stil auf:

.panel {
    max-width: 1200px;
	width:100%;
	margin: 0 auto;
	padding-bottom: 50px;
	text-align: center;
	.PanelBG();
	.PanelText();
	font-weight: 100;
	p {
		margin: 1.2em 0;
	}
}

Dies fügt das PanelText-Mixin sowie eine numerische Schriftstärke und eine gewisse Randkontrolle für Absätze im Info-Panel hinzu.

Fügen Sie außerdem den folgenden neuen Stilcode unterhalb der .panel-Klasse hinzu:

.usingthese {
    //added font weight
	font-weight: 900;
	.UsingTheseText();
}

.highlight {
	color: #EF3D5C;
}

Dies wendet den größeren und dickeren Schriftstil auf die untere Textzeile an und fügt farbige Hervorhebungen hinzu.

Ergebnis:

Sie sollten jetzt sehen:

Fügen Sie den großen Abwärtspfeil hinzu

HTML hinzufügen:

Fügen Sie den folgenden Code unter Ihrem Infofeld hinzu:

1	<div class="downarrow"><i class="fa fa-arrow-down"></i></div>

Da wir FontAwesome.less früher in unser Projekt integriert haben, platziert dieser HTML-Code unseren Abwärtspfeil einfach durch Anwendung der Klassen fa und fa-arrow-down automatisch auf ein i-Element (Icon).

Zuerst erscheint es in seinem kleinen, schwarzen Standardzustand, also müssen wir es nur wie jedes andere Textelement formatieren.

CSSHat zum neuen Mixin:

Wählen Sie in Ihrer PSD Ihre große Abwärtspfeilebene aus und kopieren Sie den von CSSHat generierten Code in ein neues Mixin namens DownArrow:

.DownArrow(){
opacity: .3;
color: #6b6b6b;
font-family: "FontAwesome";
font-size: 200px;
}

Neuer Stil:

Fügen Sie den folgenden neuen Stilcode hinzu:

.downarrow {
    margin: 80px auto;
	text-align: center;
	i {
		.DownArrow();
	}
}

Ergebnis:

Sie sollten dies jetzt unter Ihrem Infofeld sehen:

Starten des "Start"-Buttons

HTML hinzufügen:

Fügen Sie den folgenden Code unter dem großen Pfeil html ein:

<div class="buttonrow">
<a href="https://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>

Wie bei unserem Abwärtspfeil platziert unsere Verwendung der FontAwesome-Klassen fa und fa-caret-right automatisch das Symbol, das wir verwenden möchten, in diesem Fall ein nach rechts zeigender Pfeil.

CSSHat zu New Mixin, Schaltflächenhintergrund:

Wählen Sie in Ihrer PSD die Rechteckebene der Startschaltfläche aus und kopieren Sie den von CSSHat generierten Code in ein neues Mixin namens 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%)");
}

Zweiter Schatten für Schaltflächenhintergrund hinzufügen:

Genau wie beim Panel-Header fügen wir jetzt dem gerade erstellten Mixin einen zweiten Schatten hinzu.

Wählen Sie in Ihrer PSD die zweite Schattenebene der Schaltfläche aus und kopieren Sie nur den Code zwischen den Klammern in der box-shadow-Zeile:

1	0 5px 3px rgba(0,0,0,.27)

Fügen Sie im StartButtonBG-Mixin ein Komma vor der schließenden Klammer der bestehenden box-shadow-Zeile hinzu und fügen Sie dann den Code ein, den Sie gerade von CSSHat übernommen haben, um Ihnen Folgendes zu geben:

1	.box-shadow(~"0 3px 0 #cc2241, inset 0 0 5px rgba(222,42,74,.6), 0 5px 3px rgba(0,0,0,.27)");

CSSHat zum neuen Mixin, Schaltflächentext:

Wählen Sie die Textebene Ihrer Startschaltfläche aus und kopieren Sie den von CSSHat generierten Code in ein neues Mixin namens StartButtonText:

.StartButtonText(){
color: #fff;
font-family: "Roboto";
font-size: 36px;
text-shadow: 0 -1px 0 #b50020;
}

Neuer Stil:

Fügen Sie den folgenden neuen Stilcode hinzu:

.buttonrow {
    text-align: center;
	margin: 20px auto;
}
.start {
	border: 0;
	padding: 0.75em 1em;
	display: inline-block;
	.StartButtonBG();
	.StartButtonText();
}

Die erste .buttonrow-Klasse dient lediglich dazu, die Schaltfläche zu zentrieren, während die zweite .start-Klasse sowohl den Schaltflächenhintergrund als auch den Textstil anwendet.

Ergebnis:

Sie sollten jetzt sehen:

Schaltflächenkreis und Rechtspfeil

In diesem Fall benötigen wir kein zusätzliches HTML, da wir mit dem im letzten Schritt hinzugefügten HTML-Button arbeiten.

CSSHat zu New Mixin, Pfeilkreis:

Wählen Sie in Ihrer PSD die kleine Kreisebene über Ihrer Schaltfläche aus und kopieren Sie den von CSSHat generierten Code in ein neues Mixin namens ArrowCircle:

.ArrowCircle(){
.border-radius(23px);
background-color: #ef3d5d;
.background-image(~"linear-gradient(bottom, #ef4f6b 0%, #e32d4f 100%)");
}

CSSHat zum neuen Mixin, Pfeil nach rechts:

Wählen Sie nun die kleine nach rechts zeigende weiße Pfeilebene aus und kopieren Sie den von CSSHat generierten Code in ein neues Mixin namens RightArrow:

.RightArrow(){
color: #fff;
font-family: "FontAwesome";
font-size: 36px;
}

Neuer Stil:

Fügen Sie den folgenden neuen Stilcode hinzu:

.arrowcircle {
    display: inline-block;
	text-align: center;
	padding-left: 7px;
	margin-right: 10px;
	.size(47px);
	.ArrowCircle();
}

i.rightarrow {
	font-style: normal;
	display: block;
	line-height: 50px;
	.RightArrow();
}

Ergebnis:

Sie sollten jetzt sehen:

Styling der unteren Verkleidung

HTML hinzufügen:

Fügen Sie den folgenden Code unter Ihrem Startschaltflächen-HTML hinzu:

1	<div class="bottomtrim"><div class="centercircle"></div></div>

CSSHat zum neuen Mixin:

Wählen Sie in Ihrer PSD die Ebene aus, die die beiden kleinen konzentrischen grauen Kreise enthält, und kopieren Sie den von CSSHat generierten Code in ein neues Mixin namens CenteredCircle:

.CenteredCircle(){
border: 5px solid #ddd;
.border-radius(20px);
background-color: #f1f1f1;
.background-image(~"radial-gradient(center center, 100px 100px, #ddd 0%, #ddd 39.99%, #f1f1f1 44.75%, #f1f1f1 100%)");
}

Optimieren Sie den radialen Farbverlaufscode:

Dies ist der einzige Ort, an dem ich festgestellt habe, dass die CSSHat-Ausgabe nicht ganz mit der übereinstimmt, die ich in der PSD hatte. Ändern Sie die background-image Zeile, ersetzen center center, 100px 100px durch center, ellipse cover wie folgt:

1	.background-image(~"radial-gradient(center, ellipse cover, #ddd 0%, #ddd 39.99%, #f1f1f1 44.75%, #f1f1f1 100%)");

Neuer Stil:

Fügen Sie den folgenden neuen Stilcode hinzu:

.bottomtrim {
    margin: 120px 0;
	height: 15px;
	border-top: 5px solid #ddd;
	border-bottom: 5px solid #ddd;
	text-align: center;
}

.centercircle {
	display: inline-block;
	margin-top: -17px;
	.size(40px);
	.CenteredCircle();
}

Die erste Klasse .bottomtrim erzeugt die beiden grauen Linien unseres unteren Trims, während die .centeredcircle-Klasse unsere konzentrischen grauen Kreise über den beiden Linien skaliert und positioniert.

Ergebnis:

Sie sollten jetzt dies am unteren Rand Ihres Designs sehen:

Einpacken

Das ist es! Sie sollten jetzt Ihr fertiges statisches Design in seiner ganzen reinen Codepracht haben, das wie folgt aussieht:

Extras

Für die Zwecke dieses Tutorials haben wir alles ziemlich einfach gehalten, aber Sie können mit dem Code, der in diesem Prozess beteiligt ist, noch viel mehr tun, wenn Sie es vorziehen.

In einigen Fällen haben wir die Stile verdoppelt, indem wir Schriftfamiliendeklarationen und -farben wiederverwenden, sodass Sie Ihre Schriftfamilien und -farben als Variablen definieren und diese stattdessen für eine spätere einfachere Aktualisierung verwenden können.

CSSHat unterstützt auch die Ausgabe in Stylus + Nib und Sass / SCSS + Compass. Wenn also einer dieser Präprozessoren Ihr bevorzugter Präprozessor ist, können Sie stattdessen diese verwenden.