WENIGER CSS-Tutorial Erstellen einer Slick-Menü-Navigationsleiste

Dieser Artikel ist Teil unseres "HTML5 / CSS3-Tutorials" - engagiert, um Sie zu einem besseren Designer und / oder Entwickler zu machen. Klick hier um mehr Artikel aus derselben Serie zu sehen.

Die Welt des Webdesigns und der Entwicklung entwickelt sich sehr schnell. Wir können dies an der großen Anzahl von neuen Dingen erkennen, die (fast) jeden Tag in der Community eingeführt werden. Sei es Apps oder neue Frameworks, die unseren täglichen Job als Webdesigner oder Entwickler effektiver und effizienter machen.

Meine heutige Aufmerksamkeit bei der Entwicklung des Webdesigns ist LESS, eine programmierbare Stylesheet-Sprache, die die Schreibweise der CSS-Syntax durch Kombination einiger Programmierkonzepte wie Variablen, Mixins, Funktionen und Operationen erweitert.

Es eröffnet neue Möglichkeiten beim Schreiben von CSS-Syntax. Durch die Anwendung von Mixins in CSS wie in einem Programm können wir beispielsweise Standardstile und -werte speichern, die nach Möglichkeit in der gesamten Datei angewendet werden können. Damit müssen wir nicht immer wieder dieselben Stile schreiben.

Nun, lass uns einige Übungen mit LESS machen, um einen besseren Einblick in das, was es zu bieten hat, zu bekommen.

Gestalten mit WENIGER

In diesem Lernprogramm versuchen wir, eine glatte Menü-Navigationsleiste zu entwerfen, die sich an der von Apple.com orientiert. Beachten Sie, dass unser abschließendes Tutorial-Produkt nicht exakt mit dem Original übereinstimmt, da es nur vom Originalprodukt "inspiriert" wird.

Zu Beginn möchten Sie vielleicht zuerst die folgenden hilfreichen Ressourcen lesen. Sie erklären einige grundlegende Implementierungen der LESS-Sprache, die für Sie hilfreich sein werden, bevor Sie weiter in dieses Tutorial einsteigen.

• WENIGER ist mehr: Machen Sie Ihre CSS-Codierung mit WENIGER einfacher
• Schreiben Sie besseres CSS mit weniger
• Eine Einführung in WENIGER und Vergleich mit Sass

Vorbereitung

Zuallererst gibt es einige wesentliche Dinge, die wir für dieses kleine Projekt brauchen, nämlich:

1. WENIGER Texteditor

Wir benötigen einen Texteditor, um das Navigationsmenü zu codieren. Die meisten derzeit auf dem Markt verfügbaren Texteditoren (wie Dreamweaver, Notepad ++, InType, Sublime Text 2) müssen jedoch noch unterstützt werden .Weniger Dateierweiterungen standardmäßig, daher wird die Syntax möglicherweise nicht richtig hervorgehoben.

Für dieses Tutorial verwenden wir einen speziellen Texteditor für LESS mit dem Namen ChrunchApp. Wir können öffnen und bearbeiten .Weniger Erweiterungsdateien und kompilieren Sie es mit dieser Anwendung in statisches CSS. Da es sich um eine Adobe Air-Anwendung handelt, kann sie in jedem größeren Desktop-Betriebssystem (Win, OSX und Linux) installiert werden..

Für den HTML-Editor können Sie jeden Editor verwenden, den Sie bereits jetzt verwenden können. Ich persönlich mag Sublime Text 2.

2. Less.js

Laden Sie als Nächstes die LESS JavaScript Library von ihrer offiziellen Website herunter. Die aktuelle Version ist 1.2.1. Legen Sie es in Ihren Übungsordner.

Verknüpfen Sie dann die Datei mit dem HTML-Dokument.

3. Präfix-frei

Wir werden auch einige CSS3-Funktionen verwenden, um einige Effekte im Navigationsmenü zu erzielen, die Herstellerpräfixe enthalten (-moz-, -O-, -Webkit-), damit es in verschiedenen Browsern korrekt dargestellt wird. Ich persönlich bevorzuge jedoch die Verwendung von Präfixen, da die CSS-Datei dadurch aufgebläht wird.

Aus diesem Grund entschied ich mich für prefix-free, eine von Lea Verou erstellte JavaScript-Bibliothek, die die Herstellerpräfixe automatisch im Hintergrund behandelt. Wir müssen also nur die offizielle Syntax von W3C schreiben.

Laden Sie die Datei herunter und verknüpfen Sie sie mit der HTML-Datei.

In Ordnung, wir sind alle aufgestellt; Beginnen wir nun mit der Strukturierung des HTML-Markups.

HTML-Markup

Die Navigation ist recht einfach. Es werden fünf Menüs in einem ungeordneten Listentag enthalten. Öffnen Sie Ihren bevorzugten HTML-Editor und fügen Sie die folgende Markierung ein:

WENIGER Styling

In diesem Abschnitt beginnen wir, die Navigation mit der Sprache LESS zu gestalten. Für diejenigen, die sich mit Programmiersprache noch nicht auskennen, würde sich das Schreiben der CSS-Syntax mit LESS etwas komisch und umständlich anfühlen. Aber machen Sie sich keine Sorgen, sobald Sie etwas Übung haben, wird es sicherlich angenehmer als die Art, wie wir reines CSS schreiben (es ist meine Erfahrung, es macht auch ein bisschen süchtig)..

Untersuchen wir den Navigationsstil aus unserer Inspirationsquelle.

Wie wir in der Abbildung oben sehen können, hat die Apple.com-Navigation die folgenden 6 Hauptstile:

• Schatten
• Rand
• Teiler
• Farbverläufe
• Hover-Effekt
• Text

Wir speichern diese Stile und speichern sie darin Konfig als Standardstil Aufbau; Einige Designer könnten es auch nennen lib.css das steht für Bibliothek. Verknüpfen Sie diese Datei mit unserem Dokument.

Stellen Sie sicher, dass Sie es vor der LESS JavaScript-Bibliothek ablegen.

Definieren Sie eine Farbbasis mit Variablen

In diesem Schritt definieren wir die Navigationsfarbbasis anhand von Variablen. Die Variable in LESS wird mit der deklariert @ Symbol.

@theme: # 555;

Diese @Thema Variable ist unsere Standardfarbe; Wir werden es auf jede erdenkliche Weise einsetzen, um ein perfektes Farbschema zu erzielen und die Farbzusammensetzung voraussichtlich konsistenter zu machen.

Definieren Sie den Standard-Schattenstil mit Mixins

Eine der Funktionen, die ich von LESS liebe, ist Mixins. Es ist ein Programmierkonzept, das mehrere vordefinierte Stile speichert, die in LESS später in Klassen oder IDs im Stylesheet vererbt werden können.

.Schatten Box-Schatten: 0 1px 2px 0 @theme; 

Im obigen Code habe ich nicht die vorangestellte Version von Box Schatten Eigenschaft, da die Präfix-freie Bibliothek sie automatisch behandelt. Die Schattenfarbe wird auch von der Farbe der Motivvariable übernommen.

Rahmenstil mit parametrischen Mixins definieren

Die Navigationsleiste benötigt eine bestimmte Randfarbe mit einer leicht abgerundeten Ecke. Wir können den Randstil mit parametrischen Mixins kompilieren. Es hat tatsächlich die gleiche Funktionalität wie Mixins. Der einzige Unterschied besteht darin, dass es auch veränderbare Parameter hat, sodass die Werte besser einstellbar sind.

.border (@radius: 3px) border-radius: @radius; border: 1px festes @theme - # 050505; 

Im obigen Code richten wir den Standardrahmen ein @Radius zum 3px Wie bereits erwähnt, kann dieser Wert später geändert werden.

Definieren Sie den Verlauf, den Teiler und den Hover-Stil mit der Operation

Die Bedienung ist einfach eine Programmiersprache, in der wir mathematische Formeln wie Addition, Division, Subtraktion und Multiplikation anwenden können, um ein gewünschtes Ergebnis zu erhalten. Schauen wir uns den folgenden Code an:

.Teiler Randart: fest; Randbreite: 0 1px 0 1px; Rahmenfarbe: transparent @theme - # 111 transparent @theme + # 333; 

Im obigen Code subtrahieren wir @Thema variabel durch # 111, Auf diese Weise wäre die Ausgabe der linken Randfarbe etwas dunkler. Während die rechte Randfarbe von der Addition von abgeleitet wird @Thema variabel mit hex farbe # 333, die Ausgabe wäre leichter.

Farbschema-Ebene

Nun, für einige von Ihnen, die mit Formeln verwechselt werden könnten, betrachten wir das Farbschema unten, um ein besseres Verständnis zu erhalten:

Der maximale dunkle Ton ist # 000 (schwarz), während der maximale Lichtton ist #F f f (weiß) und unsere aktuelle Farbbasis ist # 555. Also, wenn wir wollen, dass die Farbbasis ist 3 Stufen dunkler vom Strom, wir können es einfach abziehen # 333. Auf dieselbe Weise kann auch die Farbe aufgehellt werden.

Als Nächstes werden wir die Verlaufsfarbe bearbeiten.

.Gradient Hintergrund: linearer Gradient (oben, @theme + # 252525 0%, @theme + # 171717 50%, @theme - # 010101 51%, @theme + # 151515 100%);  .hovereffekt Hintergrund: linearer Gradient (oben, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Definieren Sie den Textstil mit Guard Mixins

Wir planen zwei Farben in der Navigationsleiste, eine dunkle Farbe und ein Licht. Wir verwenden zwei bedingte Anweisungen für den Text mit Guard Mixins.

Erstens, wenn dem Text eine Farbe gegeben wird, deren Helligkeit größer oder gleich 50% ist, die Text-Schatten sollte dunkel werden, in diesem Fall die Farbe # 000000.

.Textfarbe (@Txtcolor) Wenn (Helligkeit (@Txtcolor)> = 50%) Farbe: @Txtcolor; Text-Schatten: 1px 1px 0px # 000000; 

Wenn der Text dann eine Farbe erhält, ist die Helligkeit weniger als 50% Text-Schatten wird weiß werden.

.textcolor (@txtcolor) when (Helligkeit (@txtcolor) 
Weniger importieren
 
Lassen Sie uns jetzt ein anderes erstellen .Weniger Datei benannt styles.less und importieren Konfig hinein:
 
@import "config.less";
 
Schriftfamilie hinzufügen
 
Damit die Navigationsleiste ansprechender aussieht, fügen wir eine neue Schriftfamilie mit ein @Schriftart Regel. Überraschenderweise, @Schriftart Regel wird eigentlich schon seit IE6 unterstützt!
 
Dieses Mal verwenden wir die Asap-Schriftart. Laden Sie es von Font Squirrel herunter. Fügen Sie dann die folgenden Stile in unsere kürzlich erstellten ein styles.less Datei.
 
@ font-face font-family: 'AsapRegular'; src: url ('fonts / Asap-Regular-webfont.eot'); src: url ('fonts / Asap-Regular-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonts / Asap-Regular-webfont.woff') format ('woff'), url ('fonts / Asap-Regular-webfont.ttf') format ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') format ('svg'); Schriftgewicht: normal; font-style: normal;  
 
Styling des Körpers mit Farbfunktionen
 
Jetzt geben wir dem Hintergrund eine Hintergrundfarbe Karosserie (das sollte heller sein als die Farbbasis) sowie Angabe der Schriftfamilie und der Schriftgröße. Wir können den Effekt mit Farbfunktionen ansprechen:
 
Der folgende Code hellt den Hintergrund um 30% auf..
 
Körper Hintergrund: Aufhellen (@theme, 30%); Schriftfamilie: AsapRegular, Sans-Serif; Schriftgröße: 11pt; 
 
 
 
Gestaltung der Navigation mit verschachtelten Regeln
 
In LESS können wir Stile direkt unter dem übergeordneten Element verschachteln. Schauen wir uns den Code unten an.
 
Das nav Das Tag, das alle notwendigen Elemente für die Navigation enthält, erhält die folgenden Stile.
 
nav margin: 50px auto 0; Breite: 788px; Höhe: 45px; .Rand; .Schatten; 
 
Beachten Sie, dass ich, anstatt einige CSS-Regeln erneut anzugeben, nur eingefügt habe .Rand den Grenzstil geben und .Schatten Schatten hinzufügen. In realen Fällen können diese Klassen auch dort, wo sie benötigt werden, in einem anderen Element wiederverwendet werden.
 
 
 
Als nächstes geben wir Stile für die ul in der nav Nullfüllung und Rand haben. Vor nicht allzu langer Zeit werden wir uns dem Stil nähern, indem wir Folgendes schreiben:
 
nav … nav ul …
 
Es ist nichts falsch mit dieser Herangehensweise, in der Tat, ich habe es jedes Mal gemacht und bin ziemlich zufrieden damit. Diese Methode ist, wie viele CSS-Designer gesagt haben, wortreich und in manchen Fällen nicht einfach zu handhaben.
 
Jetzt können wir so etwas tun:
 
nav margin: 50px auto 0; Breite: 788px; Höhe: 45px; .Rand; .Schatten; ul padding: 0; Marge: 0; 
 
 
 
Das Menü wird dann in einer Reihe mit angezeigt Anzeige: Inline Eigentum.
 
nav margin: 50px auto 0; Breite: 788px; Höhe: 45px; .Rand; .Schatten; ul padding: 0; Marge: 0; li display: inline; 
 
 
 
In der nachstehenden Syntax geben wir den Menüstil für Anker-Tags an und fügen unsere vordefinierten Stile hinzu. .Textfarbe, .Teiler, .Gradient.
 
nav margin: 50px auto 0; Breite: 788px; Höhe: 45px; .Rand; .Schatten; ul padding: 0; Marge: 0; li display: inline; eine Textdekoration: keine; Anzeige: Inline-Block; Schwimmer: links; Breite: 156px; Höhe: 45px; Text ausrichten: Mitte; Zeilenhöhe: 300%; .textcolor (# f2f2f2); // Sie können diese Zeile ändern .divider; .Gradient; 
 
In dem obigen Code wenden wir eine Hex-Farbe an # f2f2f2 Da die Helligkeit über 50% liegt, erwarten wir, dass der Schatten (automatisch) dunkel wird. Der Rest des Codes ist meines Erachtens ziemlich selbsterklärend.
 
 
 
Wenn Sie jedoch das aktuelle Ergebnis oben betrachten, haben alle Menüs Teiler, sodass der letzte Abschnitt nach unten überläuft. Deshalb müssen wir den Randstil für das erste und letzte Kind der Navigationsleiste weglassen.
 
nav margin: 50px auto 0; Breite: 788px; Höhe: 45px; .Rand; .Schatten; ul padding: 0; Marge: 0; li display: inline; eine Textdekoration: keine; Anzeige: Inline-Block; Schwimmer: links; Breite: 156px; Höhe: 45px; Text ausrichten: Mitte; Zeilenhöhe: 300%; .textcolor (# f2f2f2); // Sie können diese Zeile ändern .divider; .Gradient;  li: first-child a border-left: none;  li: letztes Kind a border-right: none; 
 
 
 
Hover State
 
Für den letzten Schritt fügen wir den Hover-Effekt hinzu. In WENIGER können wir hinzufügen Pseudoelement sowie :schweben mit & Symbol.
 
nav margin: 50px auto 0; Breite: 788px; Höhe: 45px; .Rand; .Schatten; ul padding: 0; Marge: 0; li display: inline; eine Textdekoration: keine; Anzeige: Inline-Block; Schwimmer: links; Breite: 156px; Höhe: 45px; Text ausrichten: Mitte; Zeilenhöhe: 300%; .textcolor (# f2f2f2); // Sie können diese Zeile ändern .divider; .Gradient; &: hover . hovereffect;  li: first-child a border-left: none;  li: letztes Kind a border-right: none; 
 
 
 
Ändern Sie das Farbschema
 
Hier ist der coole Teil von LESS. Wenn wir das allgemeine Farbthema ändern möchten, können wir dies mit weniger Zeilenänderungen tun, als in reinem CSS erforderlich sind.
 
In diesem Fall werde ich die Navigationsfarbe etwas heller einstellen. Ändern Sie einfach die folgenden zwei Zeilen.
 
@theme: #ccc; //Ändere das
 
.Textfarbe (# 555); //Und das
 
Und hier ist das Ergebnis.
 
 
 
LESS in CSS kompilieren
 
Wenn wir das LESS JavaScript noch verwenden, wird es das .Weniger Datei und übersetzen sie in statisches CSS, damit der Standardbrowser sie interpretieren kann. Dies ist ein doppelter Job auf der Clientseite, ganz zu schweigen von Redundanz und verschwendet Bandbreite. Der Hauptaspekt von LESS liegt im Workflow, um die Arbeit mit statischen CSS so zu vereinfachen, dass sie dynamischer und programmierbarer werden.
 
Daher ist es wichtig, die LESS-Datei in statisches CSS zu kompilieren, wenn wir die Navigationsleiste live auf einer Website platzieren möchten.
 
Drücke den Crunch es! großer Knopf.
 
 
 
Speichern Sie das .less in unserer Übungsdatei, verknüpfen Sie es mit dem HTML-Dokument und heben Sie die Verknüpfung auf .Weniger & less.js Datei aus dem Dokument.
 
 .Schatten Box-Schatten: 0 1px 2px 0 # 555555;  .divider border-style: solid; Randbreite: 0 1px 0 1px; Rahmenfarbe: transparent # 444444 transparent # 888888;  .gradient Hintergrund: linearer Gradient (oben, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffect Hintergrund: linearer Gradient (oben, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face font-family: 'AsapRegular'; src: url ('fonts / Asap-Regular-webfont.eot'); src: url ('fonts / Asap-Regular-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonts / Asap-Regular-webfont.woff') format ('woff'), url ('fonts / Asap-Regular-webfont.ttf') format ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') format ('svg'); Schriftgewicht: normal; font-style: normal;  body background: # a2a2a2; Schriftfamilie: AsapRegular, Sans-Serif; Schriftgröße: 11pt;  nav margin: 50px auto 0; Breite: 788px; Höhe: 45px; Grenzradius: 3px; Grenze: 1px fest # 505050; Box-Schatten: 0 1px 2px 0 # 555555;  nav ul padding: 0; Marge: 0;  nav ul li display: inline;  nav ul li a Textdekoration: keine; Anzeige: Inline-Block; Schwimmer: links; Breite: 156px; Höhe: 45px; Text ausrichten: Mitte; Zeilenhöhe: 300%; Farbe: # f2f2f2; Text-Schatten: 1px 1px 0px # 000000; Bordüre: solide; Randbreite: 0 1px 0 1px; Rahmenfarbe: transparent # 444444 transparent # 888888; Hintergrund: linearer Gradient (oben, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li a: hover Hintergrund: linearer Farbverlauf (oben, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: erstes Kind a border-left: none;  nav ul li: letztes Kind a border-right: none;  
 
Schauen wir uns das Ergebnis noch einmal an.
 
 
 
Und wir sind fertig, bitte experimentieren Sie damit.
 
Fazit
 
Wir haben heute viele Dinge über LESS-Sprache gelernt, wie zum Beispiel:
 

• Variablen.
• Mixins
• Parametrische Mixins
• Operationen
• Bewachte Mixins
• Und geschachtelte Regeln

Obwohl es viele Dinge gibt, die weiter behandelt werden können, und viele Möglichkeiten gezeigt und erklärt werden, hoffen wir, dass Ihnen dieses grundlegende Tutorial gefallen hat.

• Demo
• Quelle herunterladen