Share
Was Sie erstellen werdenIm vorherigen Tutorial haben wir uns mit der Vorbereitung eines Designs in Photoshop befasst, das für die Konvertierung in reinen CSS3- und Base64-Code vorbereitet ist. In diesem Tutorial behandeln wir die eigentliche Codegenerierung mithilfe der Photoshop-Plugins CSSHat und PNGHat von Source sowie FontAwesome und dem CSS-Präprozessor LESS.
Lass uns direkt eintauchen!
Zunächst müssen Sie auf Ihrem Computer einen neuen Ordner für Ihre statische Website erstellen. In diesem Fall benenne ich meinen Ordner codiert.
Erstellen Sie in diesem Ordner eine neue Datei mit dem Namen index.html und füge folgenden Code hinzu:
Photoshop für reinen Code mit CSSHat und PNGHat
Hier richten wir die grundlegende HTML-Shell für die Site und die Verlinkung in Roboto ein, die Google-Schriftart, die wir in unserer PSD verwendet haben, sowie das CSS-Stylesheet.
Als nächstes erstellen Sie zwei Unterordner in Ihrem codiert Ordner, einer mit Namen css und der andere genannt WENIGER. In der WENIGER Ordner erstellen Sie eine Datei mit dem Namen style.less. Alle Stile für Ihre Site werden in diese Datei geschrieben und anschließend in kompiliert css> style.css.
Da gehen wir mit dir style.less Der Code der Datei sollte in dieser Reihenfolge angeordnet sein:
Ich empfehle, in jedem Abschnitt oben in jedem Abschnitt einen Kommentar hinzuzufügen style.less Eine Datei, mit der Sie nachverfolgen können, wo die verschiedenen Codetypen platziert werden sollen.
Wenn Sie möchten, können Sie separate Dateien (Partials) erstellen, um jeden dieser Codetypen unterzubringen, und jede dieser Dateien in Ihre LESS-Hauptdatei zu importieren. Zur Vereinfachung wird hier jedoch nur eine Datei verwendet.
Prepros ist eine Anwendung, die alle Arten von Front-End-Aufgaben für Webdesigner und -Entwickler erledigt. Es kompiliert unser WENIGER, aktualisiert den Browser automatisch, wenn Änderungen an unseren Dateien vorgenommen werden, und synchronisiert sogar mehrere Geräte, wenn wir dies wünschen. Laden Sie Prepros herunter und installieren Sie sie. Diese können Sie kostenlos erhalten unter: http://alphapixels.com/prepros/
Führen Sie die Anwendung aus und ziehen Sie die codiert Ordner auf der Hauptoberfläche, um es als neues Projekt hinzuzufügen.
Prepros erkennt automatisch die style.less Datei in Ihrem Projektordner und standardmäßig ist "Auto Compile" aktiviert. Immer wenn Sie eine Änderung in speichern style.less Prepros wird es erkennen und dann in kompilieren css> style.css.
Sie können auch klicken style.less In der Benutzeroberfläche werden zusätzliche Einstellungen angezeigt, z. B. die Möglichkeit, das CSS während des Kompilierens zu komprimieren.
Nun holen Sie sich die Dateien für LESSHat, eine Mixin-Bibliothek, die sich sehr gut mit CSSHat verbindet, sowie für Normalize.less, eine Version von "Normalize.css", die in LESS-freundlicher Syntax geschrieben ist.
Nachdem Sie die beiden Dateien heruntergeladen und in Ihr Projekt eingefügt haben, kehren Sie zu Prepros zurück, und Sie werden sehen, dass beide Dateien automatisch erkannt wurden. Wir importieren beide in unser Hauptverzeichnis style.less und wir möchten nicht, dass sie in einzelne CSS-Dateien kompiliert werden. Klicken Sie auf jede einzelne Datei und deaktivieren Sie "Auto Compile"..
Jetzt öffne deine style.less Datei in Ihrem bevorzugten Code-Editor und fügen Sie diese beiden Zeilen an der Spitze hinzu:
@import "lesshat.less"; @import "normalize.less";
Speichern Sie Ihre Datei und Prepros kompiliert sie automatisch für Sie. Danach sollten Sie das folgende Popup in der rechten unteren Ecke Ihres Bildschirms sehen:
Sie sollten jetzt auch die Datei sehen style.css in Ihrem Projekt css Mappe.
Wir integrieren jetzt FontAwesome in das Projekt, indem wir die Font-Dateien selbst hinzufügen sowie "FontAwesome.less", eine vorgefertigte LESS-Bibliothek, die es unglaublich einfach macht, FontAwesome-Symbole in Ihren Designs zu platzieren. Wir müssen nur die Datei importieren und dann sind die FontAwesome-Klassen sofort verfügbar.
Wie das in der Praxis funktioniert, erfahren Sie später im Tutorial, wenn Sie das Element "Großer Pfeil nach unten" hinzufügen.
Erstellen Sie zunächst einen Unterordner mit dem Namen font-awesome in deinem WENIGER Mappe. Es gibt einige Dateien in der Bibliothek von FontAwesome, also behalten wir sie hier, um unsere Dateien zu organisieren
Laden Sie FontAwesome als zip herunter: https://github.com/FortAwesome/Font-Awesome
Extrahieren Sie den Ordner und kopieren Sie alle Dateien aus seinem Ordner Weniger Ordner und fügen Sie sie in den Ordner ein Font-Awesome Ordner, den Sie gerade in Ihrem Projekt erstellt haben. Dann kopiere das Ganze Schriftarten Ordner aus Ihrem entpackten FontAwesome-Download und fügen Sie ihn als Unterordner in Ihr Projekt ein.
Ihre vollständige Projektdatei und Ordnerstruktur sollte jetzt so aussehen:
Prepros erkennt neue LESS-Dateien erneut. Deaktivieren Sie daher "Auto Compile" für alle Dateien, die jetzt in der Benutzeroberfläche angezeigt werden.
Fügen Sie folgende Zeile hinzu style.less Datei unter den Zeilen, die Sie zuvor hinzugefügt haben:
@import "font-awesome / font-awesome.less";
Ihr Projekt verfügt jetzt über alle erforderlichen LESS-Importe und Schriftartendateien sowie die automatische Kompilierung. Wir können also Ihre PSD in Code übersetzen.
Im vorherigen Tutorial haben wir das Muster mit dem Namen "Satin Weave" ausgewählt, das aufgrund seiner geringen Größe und der geringen Anzahl von Farben über den Hintergrund gelegt wird. Wir werden jetzt das PNGHat-Plugin verwenden, um es in einen String aus Base64-Code zu konvertieren.
Öffnen Sie die PSD in Photoshop. Wir wissen, dass die Abmessungen des Musters 24px breit und 12px hoch sind. Machen Sie also mit Ihrem Laufrahmen eine Auswahl dieser Größe an beliebiger Stelle in Ihrem Design.
Stellen Sie jetzt sicher, dass die Hintergrundebene ausgewählt ist, auf die das Muster angewendet wurde, und öffnen Sie das PNGHat-Fenster. Sie müssen nur auf die Option "Base 64" in der oberen Zeile des Fensters klicken und dann auf "Ausgewählte Ebenen exportieren" klicken..
Es erscheint ein Dialog, in dem Sie zur Bestätigung aufgefordert werden, dass Sie das Bild durch Auswahl zuschneiden möchten. Klicken Ja und Sie sehen Ihre Base64-String-Ausgabe im unteren Bereich des PNGHat-Fensters. Drücke den Kopieren Taste.
Geh zurück zu deinem style.less Datei und fügen Sie den Code, den Sie gerade aus PNGHat kopiert haben, in Ihren Abschnitt "Variablen" ein. Löschen Sie alles aus dem eingefügten Code mit Ausnahme von URL (Daten…); und dann hinzufügen @satinweave: am Anfang der Zeile. Sie sollten am Ende mit:
@satinweave: URL (Daten: image / PNG; Base64, iVBORw0KGgoAAAANSUhEUgAAABgAAAAMAgMAAAAFXpXmAAAABGdBTUEAALGPC / xhBQAAAAlQTFRF8vLy7 + / + v8fHxxV2ZvQAAADRJREFUCNdVysENADAIQlGWkRj3rodOWeDW0w8 0axlg5wlFW / FGyEdTUpeESKOqXBN8 + cB4yUS37 / ediwAAAAASUVORK5CYII =);
Wir sind jetzt bereit, unser neues, benutzerfreundliches Gerät zu platzieren @satinweave variabel in einen Stil, so wird es in unserem Design erscheinen. Während wir gerade dabei sind, werden wir ein paar grundlegende Regeln für die gesamte Site hinzufügen Box-Sizing und Verbindungseinstellungen.
Fügen Sie den folgenden Code dem "Styles" - Abschnitt Ihres hinzu styles.less Datei:
* .box-size (border-box); body Hintergrundbild: @satinweave; Überlauf-x: ausgeblendet; a, a: link, a: besucht, a: hover, a: active text-decoration: none;
Speichern Sie Ihre Datei, damit Prepros Ihre Änderungen in Ihre style.css Datei.
Gehen Sie zu Prepros und klicken Sie auf Mehr Optionen Taste und wählen Sie Live-Vorschau-URL kopieren, (höchstwahrscheinlich http: // localhost: 8000), und fügen Sie ihn in Ihren Browser ein.
Dies gibt Ihnen eine Vorschau Ihrer statischen Site, die jedes Mal automatisch geladen wird, wenn Prepros Ihren Code kompiliert.
Das reine Base64-Muster sollte jetzt im Hintergrund der Seite angeordnet sein.
Einfacher geht es nicht, wenn CSSHat CSS3 für jedes Gestaltungselement ausgibt. Wählen Sie einfach die betreffende Ebene bei geöffnetem CSSHat-Fenster aus, und es wird automatisch der Code generiert, den Sie benötigen.
In den Einstellungen des CSSHat-Fensters können Sie aus einigen Optionen auswählen. In unserem Fall möchten wir, dass unser Code als LESS ausgegeben wird, und wir möchten, dass alle kleinen Schaltflächen (Kommentare, Dimensionen, Präfixe, Regel) unten im CSSHat-Fenster deaktiviert werden. Ihr CSSHat-Fenster sollte folgendermaßen aussehen:
Beachten Sie, dass Sie mit CSSHat einen Höhen- und Breitencode für Sie generieren können px Klicken Sie auf die vierte Schaltfläche (die wie ein kleines Quadrat mit kleineren Quadraten an den Ecken aussieht). Ich ziehe es jedoch vor, mein eigenes zu schreiben, damit ich es leichter verwenden kann rem / em / % Werte wo ich sie brauche.
Wenn der Code für die ausgewählte Ebene generiert wurde, klicken Sie einfach auf Kopieren Taste am unteren Rand des Fensters, bereit zum Einfügen in Ihr style.less Datei.
Nun fügen wir die restlichen Designelemente über CSS hinzu.
Da CSSHat die Sache so einfach macht, können wir einen ziemlich großen Standardprozess verwenden, der so lange wiederholt wird, bis Ihr Design vollständig codiert ist.
Für jedes Element fügen wir zunächst den entsprechenden HTML-Code hinzu index.html Datei.
Danach werden für jedes neue Element ein oder mehrere LESS-Mixins hinzugefügt, die wir verwenden, um das von CSSHat generierte CSS3 zu speichern. Es ist hilfreich, den von CSSHat generierten Code vom restlichen Style-Code getrennt zu halten, damit Sie ihn leicht aktualisieren können, wenn Sie Ihr Design ändern. Sie sollten neue Mixins zum "Mixins" - Bereich Ihres hinzufügen style.less Datei, wie oben beschrieben.
Schließlich fügen Sie die tatsächlichen CSS-Stile hinzu, die in Ihrem Stylesheet ausgegeben werden. Diese Stile enthalten Ihre Mixins sowie zusätzlichen Code, den ich zur Steuerung des Layouts, der Abmessungen und der Aspekte bereitstelle, die Photoshop nicht verarbeiten kann, wie z. B. numerische Schriftstärke und "eine Seite zu einer Zeit". Ihre Stile sollten zum Abschnitt "Stile" Ihres hinzugefügt werden style.less Datei.
Wir erstellen jedes Gestaltungselement in der gleichen Reihenfolge wie im vorherigen Teil dieses Lernprogramms, damit Sie im Bedarfsfall leichter darauf zurückgreifen können.
Fügen Sie Folgendes zwischen Ihren öffnenden und schließenden Body-Tags ein.
Wählen Sie die "Top Trim" -Ebene Ihrer PSD und kopieren Sie den generierten CSSHat-Code:
Deckkraft: .5; Hintergrundfarbe: #ddd; .box-shadow (~ "0 2px 1px #fff, Einfügung von 0 -2px 4px # c8c8c8");
In deiner style.less Datei Erstellen Sie ein neues Mixin mit dem Namen TopTrim und fügen Sie Ihren CSSHat-Code wie folgt ein:
.TopTrim () Deckkraft: .5; Hintergrundfarbe: #ddd; .box-shadow (~ "0 2px 1px #fff, Einfügung von 0 -2px 4px # c8c8c8");
Wir werden jetzt Ihr neues Mixin in den "Styles" - Bereich Ihrer einfügen style.less Datei. Fügen Sie den folgenden neuen Stilcode hinzu:
// Top trim .toptrim height: 8px; Rand unten: 62px; .TopTrim ();
Im obigen Code ziehen wir unsere durch CSSHat generierten Styles über das TopTrim-Mixin heraus und legen die Layout-Dimensionen fest, die wir benötigen.
Sie sollten jetzt sehen, dass Ihre "obere Kante" oben auf Ihrer Website verläuft.
Fügen Sie unter dem zuletzt hinzugefügten HTML-Code Folgendes hinzu:
Wählen Sie die "menuwrap" -Ebene Ihrer PSD aus, kopieren Sie den generierten CSSHat-Code und fügen Sie ihn in ein neues Mixin mit dem Namen ein MenuWrapBG:
.MenuWrapBG () .border-radius (12px); Hintergrundfarbe: # f9f9f9; .box-shadow (~ "0 1px 2px #fff, Einfügung 0 1px 10px rgba (0,0,0, .15)"); Hintergrundbild (~ "linearer Gradient (unten, #fff 0%, # f3f3f3 100%)");
Fügen Sie den folgenden neuen Stilcode hinzu:
// Menü .menuwrap min-height: 61px; Max-Breite: 1200px; Breite: 100%; Marge: 0 auto; Polsterung: 5px; .MenuWrapBG;
Sie sollten jetzt sehen:
Aktualisieren Sie Ihren vorhandenen Menücode wie folgt:
Wählen Sie Ihre PSDs aus Menubg Layer und kopieren Sie den generierten CSSHat-Code in ein neues Mixin namens MainMenuBG:
.MainMenuBG () border: 1px fest # e4e4e4; Randradius (11px); Hintergrundfarbe: #fff; Box-Schatten (~ 3px4px rgba (193,193,193, 0,75)); Hintergrundbild (~ "linearer Gradient (unten, # e5e5e5 0%, #fff 100%)");
Fügen Sie den folgenden neuen Stilcode hinzu:
ul.mainmenu padding: 0 15px; Marge: 0; Typ des Listentyps: keine; min-Höhe: 50px; .MainMenuBG ();
Sie sollten jetzt sehen:
Aktualisieren Sie Ihren vorhandenen Menücode wie folgt:
Wählen Sie in Ihrer PSD eines Ihrer Menüelement-Rechtecke aus und kopieren Sie den generierten CSSHat-Code in ein neues Mixin mit dem Namen MenuItemBG:
.MenuItemBG () .background-image (~ "linearer Gradient (unten, #eee 0%, # e4e4e4 25,49%, #fbfbfb 100%)");
Wählen Sie in Ihrer PSD den Text eines Ihrer Menüelemente aus und kopieren Sie den generierten CSSHat-Code in ein neues Mixin mit dem Namen MenuItemText:
.MenuItemText () color: # 5b5b5b; Schriftfamilie: "Roboto"; Schriftgröße: 18px; Text-Schatten: 0 1px 0 #fff;
Aktualisieren Sie das vorhandene ul.mainmenu Stil wie folgt.
ul.mainmenu padding: 0 15px; Marge: 0; Typ des Listentyps: keine; min-Höhe: 50px; .MainMenuBG (); li display: block; Schwimmer: links; Polsterung: 0; Randoberseite: 1px festes rgba (0,0,0,0); border-bottom: 1px festes #dddddd; Border-Right: 1px festes #dddddd; links: 1px feste rgba (0,0,0,0); &: first-of-type border-left: 1px solid #dddddd; .MenuItemBG (); a, a: link, a: besuchte Anzeige: Block; Höhe: 47px; Zeilenhöhe: 47px; Polsterung: 0 30px; // hinzugefügte Schriftstärke font-weight: 400; .MenuItemText ();
Wir verwenden LESS-Regelverschachtelung, also alle li Kinder von ul.mainmenu wird betroffen sein.
Sie können sich auch an das vorherige Tutorial erinnern, dass wir das Linien-Tool manuell verwenden mussten, um die Farbauswahl für die Menüelement-Ränder zu erleichtern, da Photoshop nicht in der Lage ist, jede Randseite einzeln festzulegen. Wie Sie sehen, integrieren wir diese Randstile mit dem Farbcode #dddddd Wir haben in dieser Phase ausgewählt.
Wir haben auch einige transparente Rahmen an den oberen und linken Seiten der Menüelemente hinzugefügt. Der Grund dafür ist, dass unser aktueller Element- / Hover-Effekt Rahmen auf allen vier Seiten verwendet. Daher müssen wir sicherstellen, dass die Menüelemente in ihren Standard- und Hover-Zuständen übereinstimmen.
Und zum Schluss haben wir das Richtige manuell hinzugefügt Schriftgewicht von 400 auf den Menüpunkt Text, da Photoshop nur mit Werten wie "normal" oder "fett" arbeiten kann.
Sie sollten jetzt sehen:
In diesem Fall benötigen wir keinen zusätzlichen HTML-Code, da im letzten Schritt bereits ein Menüelement mit der Klasse "current" hinzugefügt wurde.
Wählen Sie in Ihrer PSD das Rechteck Ihres "aktuellen" Menüelements aus und kopieren Sie den generierten CSSHat-Code in ein neues Mixin mit dem Namen CurrentMenuItemBG:
.CurrentMenuItemBG () border: 1px solid # e62d4e; Hintergrundfarbe: # ef3d5d; .box-shadow (~ "0 1px 0 # cc2241, Einfügung 0 2px 5px rgba (250,171,185, .6)"); Hintergrundbild (~ "linearer Gradient (unten, # ef3d5d 0%, # dc2344 25,49%, # fc6b85 100%)");
Wählen Sie nun den Text Ihres "aktuellen" Menüpunkts aus und kopieren Sie den generierten CSSHat-Code in ein neues Mixin namens CurrentMenuItemText:
.CurrentMenuItemText () color: #fff; Schriftfamilie: "Roboto"; Schriftgröße: 18px; Text-Schatten: 0 -1px 0 # b50020;
Aktualisieren Sie das vorhandene ul.mainmenu Stil wie folgt.
ul.mainmenu padding: 0 15px; Marge: 0; Typ des Listentyps: keine; min-Höhe: 50px; .MainMenuBG (); li display: block; Schwimmer: links; Polsterung: 0; Randoberseite: 1px festes rgba (0,0,0,0); Rand unten: 1px feste rgba (0,0,0,0,05); rechtsbündig: 1px feste rgba (0,0,0,0,05); links: 1px feste rgba (0,0,0,0); &: first-of-type border links: 1px solid rgba (0,0,0,0,05); .MenuItemBG (); a, a: link, a: besuchte Anzeige: Block; Höhe: 47px; Zeilenhöhe: 47px; Polsterung: 0 30px; // hinzugefügte Schriftstärke font-weight: 400; .MenuItemText (); &: hover .CurrentMenuItemBG (); a, a: link, a: besuchte .CurrentMenuItemText () li.current .CurrentMenuItemBG (); a, a: link, a: besuchte .CurrentMenuItemText ()
Fügen Sie den folgenden Clearfix-Code unterhalb Ihrer vorhandenen Menüklasse hinzu, damit die Menüelemente auf mehrere Zeilen verschoben werden können, wenn für die verfügbare Breite zwei Vielfache vorhanden sind.
ul.mainmenu: before, ul.mainmenu: after content: ""; Anzeige: Tisch; ul.mainmenu: after clear: beide;
Jetzt sollte der "aktuelle" Stil sowohl auf den aktuellen Menüpunkt als auch auf den Hover-Effekt angewendet werden:
Fügen Sie den folgenden Code unter Ihrem Menü-HTML-Code hinzu:
Wussten Sie, dass Sie es können?
Haben Sie Ihren Photoshop
UND DEIN
Reiner Code auch?
Wählen Sie in Ihrer PSD entweder die erste oder dritte Haupttextzeile (dünner grauer Text) aus, und kopieren Sie den generierten CSSHat-Code in ein neues Mixin mit dem Namen ThinText:
.ThinText () color: # 6b6b6b; Schriftfamilie: "Roboto"; Schriftgröße: 48px;
Wählen Sie in Ihrer PSD entweder die zweite oder vierte Haupttextzeile (dicker Text) aus und kopieren Sie den generierten CSSHat-Code in ein neues Mixin mit dem Namen ThickText:
.ThickText () color: # ef3d5d; Schriftfamilie: "Roboto"; Schriftgröße: 80px; Schriftdicke: fett;
Fügen Sie den folgenden neuen Stilcode hinzu:
// Haupttextzeilen .maintext padding: 70px 0; Text ausrichten: Mitte; .thintext margin: 0.425em 0; // hinzugefügte Schriftstärke font-weight: 100; .ThinText (); .thicktext margin: 0.425em 0; .ThickText ();
Sie sollten dies jetzt unter Ihrem Menü sehen:
Fügen Sie den folgenden Code hinzu:
Wählen Sie in Ihrer PSD das Hintergrundrechteck Ihres Infopanels aus und kopieren Sie den generierten CSSHat-Code in ein neues Mixin mit dem Namen PanelBG:
// Panel mixins .PanelBG () border: 1px fest # d7d7d7; Grenzradius (15px); Hintergrundfarbe: #fff; .box-shadow (~ 3px 4px rgba (193,193,193, .27));
Fügen Sie den folgenden neuen Stilcode hinzu:
.Panel Max-Breite: 1200px; Breite: 100%; Marge: 0 auto; Polsterung unten: 50px; Text ausrichten: Mitte; .PanelBG ();
Der Hintergrund des Infofensters sollte jetzt leer sein:
Aktualisieren Sie den HTML-Code Ihres Info-Panels folgendermaßen:
IN DIESEM TUTORIAL:
Wählen Sie in Ihrer PSD die Hintergrundebene des Panel-Headers aus und kopieren Sie den generierten CSSHat-Code in ein neues Mixin mit dem Namen PanelHeadBG:
.PanelHeadBG () .border-radius (10px); Hintergrundfarbe: # ef3d5d; .box-shadow (~ "0 3px 0 # cc2241, Einfügung 0 0 5px rgba (222,42,74, .6)"); Hintergrundbild (~ "linearer Gradient (unten, # ee2c4f 0%, # dc2344 10,5%, # fc6b85 100%)");
Wir werden nun dem bereits erstellten PanelHeadBG-Mix einen zweiten Schatten hinzufügen. In Teil 1 dieses Tutorials können Sie sich daran erinnern, dass wir zusätzliche Schatten auf den zweiten Ebenen erstellen mussten, da Photoshop nicht in der Lage ist, mehrere Schlagschatten auf einer Ebene zu verarbeiten.
Wählen Sie in Ihrer PSD die zweite Schattenebene Ihres Panel-Headers aus und kopieren Sie sie nur der Code zwischen den Klammern auf der Box Schatten Zeile, die sein sollte:
0 5px 3px rgba (0,0,0, .27)
In dem PanelHeadBG Mischen Sie in einem soeben erstellten Komma ein Komma vor der schließenden Klammer des vorhandenen Box Schatten Zeile, fügen Sie dann den Code ein, den Sie gerade aus CSSHat genommen haben, um Ihnen Folgendes zu geben:
.Box-Schatten (~ 0 3px 0 # cc2241, Einfügung 0 0 5px rgba (222,42,74, .6), 0 5px 3px rgba (0,0,0, .27) ");
Wählen Sie in Ihrer PSD den Text Ihres Bedienfeld-Headers aus und kopieren Sie den generierten CSSHat-Code in ein neues Mixin namens PanelHeadText:
.PanelHeadText () color: #fff; Schriftfamilie: "Roboto"; Schriftgröße: 24px; Text-Schatten: 0 -1px 0 # b50020;
Fügen Sie den folgenden neuen Stilcode hinzu:
.Panelhead Marge: 60px -15px; Polsterung: 20px; .PanelHeadBG (); // hinzugefügte Schriftstärke font-weight: 400; .PanelHeadText ();
Beachten Sie, dass wir a hinzugefügt haben Schriftgewicht von 400 manuell angegeben Photoshop kann numerische Schriftgewichtswerte nicht verarbeiten.
Sie sollten jetzt sehen:
Aktualisieren Sie Ihren vorhandenen Panel-HTML-Code erneut, und zwar folgendermaßen:
IN DIESEM TUTORIAL:Erfahren Sie, wie Sie in Photoshop entwerfen und ausgeben
Standards bereit, reiner CSS3 + Base64-Code.Das bedeutet keine Bilder und minimales HTTP
Anforderungen für ein äußerst effizientes Laden.CSSHat + PNGHat + WENIGER + FontAwesome
Wählen Sie in Ihrer PSD die leichtere Textebene des Infofensters aus, und kopieren Sie den generierten CSSHat-Code in ein neues Mixin mit dem Namen PanelText:
.PanelText () color: # 6b6b6b; Schriftfamilie: "Roboto"; Schriftgröße: 36px;
Wählen Sie nun die Ebene aus, die den Text des dickeren Gewichts-Info-Panels enthält, und kopieren Sie den generierten CSSHat-Code in ein neues Mixin mit dem Namen UsingTheseText:
.UsingTheseText () color: # 6b6b6b; Schriftfamilie: "Roboto"; Schriftgröße: 48px;
Aktualisieren Sie das vorhandene .Panel Stil zu:
.Panel Max-Breite: 1200px; Breite: 100%; Marge: 0 auto; Polsterung unten: 50px; Text ausrichten: Mitte; .PanelBG (); .PanelText (); Schriftgewicht: 100; p Marge: 1,2em 0;
Dies fügt das PanelText-Mixin sowie eine numerische Schriftstärke und einige Randkontrollen für Absätze im Infofenster hinzu.
Fügen Sie auch den folgenden neuen Style-Code unter dem hinzu .Panel Klasse:
.usingdiese // hinzugefügte Schriftgewichtung Schriftgewicht: 900; .UserTheseText (); .highlight color: # EF3D5C;
Dadurch wird der größere und dickere Schriftstil auf die untere Textzeile angewendet und farbige Hervorhebungen hinzugefügt.
Sie sollten jetzt sehen:
Fügen Sie den folgenden Code unter Ihrem Infopanel hinzu:
Da wir FontAwesome.less früher in unser Projekt integriert haben, wird dieser HTML-Pfeil automatisch über die Anwendung der Klassen eingefügt Fa und fa-Pfeil nach unten zu einem ich (Symbol) Element.
Zuerst wird es in seinem standardmäßigen kleinen schwarzen Zustand angezeigt, so dass wir es nur wie bei jedem anderen Textelement formatieren müssen.
Wählen Sie in Ihrer PSD Ihre große Abwärtspfeilebene aus und kopieren Sie den generierten CSSHat-Code in ein neues Mixin mit dem Namen DownArrow:
.DownArrow () Deckkraft: .3; Farbe: # 6b6b6b; Schriftfamilie: "FontAwesome"; Schriftgröße: 200px;
Fügen Sie den folgenden neuen Stilcode hinzu:
.Downarrow Marge: 80px Auto; Text ausrichten: Mitte; i .DownArrow ();
Sie sollten dies jetzt unter Ihrem Infopanel sehen:
Fügen Sie den folgenden Code unter dem HTML-Code für große Pfeile hinzu:
Wie bei unserem Abwärtspfeil verwenden wir die FontAwesome-Klassen Fa und fa-caret-right Platzieren Sie automatisch das gewünschte Symbol, in diesem Fall einen nach rechts zeigenden Pfeil.
Wählen Sie in Ihrer PSD Ihre Rechteckebene für die Startschaltfläche aus und kopieren Sie den generierten CSSHat-Code in ein neues Mixin mit dem Namen StartButtonBG:
.StartButtonBG () .border-radius (10px); Hintergrundfarbe: # ef3d5d; .box-shadow (~ "0 3px 0 # cc2241, Einfügung 0 0 5px rgba (222,42,74, .6)"); Hintergrundbild (~ "linearer Gradient (unten, # ee2c4f 0%, # dc2344 10,5%, # fc6b85 100%)");
Genau wie beim Panel-Header fügen wir dem soeben erstellten Mixin einen zweiten Schatten hinzu.
Wählen Sie in Ihrer PSD die zweite Schattenebene Ihrer Schaltfläche aus und kopieren Sie sie nur der Code zwischen den Klammern auf der Box Schatten Linie:
0 5px 3px rgba (0,0,0, .27)
In dem StartButtonBG Mischen Sie ein Komma vor der schließenden Klammer des vorhandenen Box Schatten Zeile, fügen Sie dann den Code ein, den Sie gerade aus CSSHat genommen haben, um Ihnen Folgendes zu geben:
.Box-Schatten (~ 0 3px 0 # cc2241, Einfügung 0 0 5px rgba (222,42,74, .6), 0 5px 3px rgba (0,0,0, .27) ");
Wählen Sie die Textebene Ihrer Startschaltfläche aus und kopieren Sie den generierten CSSHat-Code in ein neues Mixin mit dem Namen StartButtonText:
.StartButtonText () color: #fff; Schriftfamilie: "Roboto"; Schriftgröße: 36px; Text-Schatten: 0 -1px 0 # b50020;
Fügen Sie den folgenden neuen Stilcode hinzu:
.buttonrow text-align: center; Marge: 20px auto; .start border: 0; Polsterung: 0,75em 1em; Anzeige: Inline-Block; .StartButtonBG (); .StartButtonText ();
Der Erste .knöpfen Die Klasse dient lediglich dazu, die Taste zu zentrieren, während die zweite Taste .Start Die Klasse wendet sowohl den Schaltflächenhintergrund als auch den Textstil an.
Sie sollten jetzt sehen:
In diesem Fall benötigen wir keinen zusätzlichen HTML-Code, da wir mit der im letzten Schritt hinzugefügten Schaltfläche HTML arbeiten.
Wählen Sie in Ihrer PSD die kleine Kreisebene über Ihrer Schaltfläche aus und kopieren Sie den generierten CSSHat-Code in ein neues Mixin mit dem Namen PfeilKreis:
.ArrowCircle () . Randradius (23px); Hintergrundfarbe: # ef3d5d; Hintergrundbild (~ "linearer Gradient (unten, # ef4f6b 0%, # e32d4f 100%)");
Wählen Sie nun die kleine, nach rechts zeigende weiße Pfeilebene aus und kopieren Sie den generierten CSSHat-Code in e
Accentsconagua