Share
CSS3 ist eine der coolsten neuen Webtechnologien, die Webentwicklern derzeit zur Verfügung steht. Mit einigen seiner zahlreichen Funktionen können Sie die Effekte reproduzieren, die Sie zuvor möglicherweise in Photoshop ausgeführt haben. Der CSS-Code ist wartungsfähiger, schneller zu laden und mit den neuesten Trends ausgestattet. Lesen Sie weiter, um zu erfahren, welche Elektrowerkzeuge Ihnen zur Verfügung stehen und wie Sie diese kombinieren können, um die besten grafischen Effekte zu erzielen.
CSS3 hat viele Funktionen, aber einige von ihnen sind unbedingt zu lernen, wenn Sie Photoshop-ähnliche Effekte reproduzieren möchten. Ich nenne das meine "Elektrowerkzeuge". Dazu gehören folgende:
Jede dieser Funktionen kann dazu beitragen, einige der Bilder zu ersetzen, die Sie möglicherweise zuvor in Photostop erstellt haben. Auf diese Weise können Sie Ihre Website leichter verwalten, da Sie eine Eigenschaft ändern können, indem Sie Ihre CSS-Datei ändern, anstatt ein Bild in Photoshop zu bearbeiten. Sie beschleunigen auch das Laden Ihrer Website, da Bilder viel Bandbreite beanspruchen. Lassen Sie uns diese Funktionen einzeln untersuchen.
Browser-Unterstützung:
Mittlerweile haben Sie wahrscheinlich schon eine Million Mal vom Grenzradius gehört. Es ist sehr einfach zu bedienen und wird von allen modernen Browsern unterstützt. Wenn Sie es noch nicht wissen, können Sie mit dem Grenzradius abgerundete Ecken mit CSS erzeugen - keine Bilder erforderlich! Schauen wir uns die Syntax an.
-Webkit-Border-Radius: Größe; -moz-border-radius: Größe; Grenzradius: Größe;
Es gibt drei Syntaxen, die Sie verwenden müssen. Der erste ist für Webkit-basierte Browser wie Safari und Chrome. der zweite ist für Mozilla-basierte Browser wie Firefox; und die letzte ist die Version ohne Präfix für Browser, die dies unterstützen, einschließlich IE9, Opera und Safari 5.
Durch Anwenden eines 10-Pixel-Rahmenradius auf ein div wird der folgende Effekt erzielt:
OK, einfach! Fahren wir mit dem nächsten Elektrowerkzeug fort.
Browser-Unterstützung:
Box-Schatten sind eine weitere gut unterstützte Funktion. Ihre Syntax sieht so aus:
-Webkit-Box-Schatten: offset_x offset_y blur_radius color; -moz-box-shadow: offset_x offset_y blur_radius color; Box-Schatten: offset_x offset_y blur_radius color;
Wieder müssen wir die Herstellerpräfixe für Webkit und Mozilla verwenden. Der erste und der zweite Parameter der Box-Shadow-Eigenschaft sind die Versatzpositionen von den linken und oberen Koordinaten des Elements. Wenn Sie für diese Eigenschaften einen positiven Wert festlegen, wird der Schatten vom Element nach rechts und unten verschoben. Wenn Sie einen negativen Wert festlegen, wird der Schatten vom Element nach links und oben verschoben. Der blur_radius ist die Menge an Unschärfe, die Sie zu Ihrem Schatten hinzufügen möchten (wie hart oder unscharf Sie es wollen). Der letzte Parameter ist schließlich die Farbe, die der Schatten haben soll. Durch Hinzufügen eines Schattens zu unserem zuvor verwendeten gerundeten div wird ein schön aussehender Effekt erzeugt.
-Webkit-Box-Schatten: 5px 5px 10px # 555; -moz-box-shadow: 5px 5px 10px # 555; Box-Schatten: 5px 5px 10px # 555;
Ein weiteres nettes Feature von CSS-Boxschatten ist das Schlüsselwort inset. Wenn das Schlüsselwort "inset" vorhanden ist, wird der Schatten nicht innerhalb, sondern außerhalb der Box gerendert. Dies kann vor allem für Tasten einen schönen, gedrückten Look erzeugen. So würde unser Div mit einem Schatten im Schatten aussehen.
-Webkit-Box-Schatten: 0 0 20px # 333 Einschub; -Moz-Box-Schatten: 0 0 20px # 333 Einfügung; Box-Schatten: 0 0 20px # 333 Einfügung;
Das letzte erwähnenswerte Feature von Box-Schatten ist die Möglichkeit, mehrere Schatten auf demselben Element zu haben. Dies ist sehr nützlich und kann zusätzliche Markierungen in Ihrem HTML-Code verhindern, um einen zusätzlichen Schatten anzuwenden. Um mehrere Schatten zu erstellen, müssen Sie sie nur durch Kommas trennen. Hier ist ein Beispiel:
-Webkit-Box-Schatten: 0 0 20px # 333 Einfügung, 20px 15px 30px gelb, -20px 15px 30px Kalk, -20px -15px 30px blau, 20px -15px 30px rot; -moz-box-shadow: 0 0 20px # 333 Einfügung, 20px 15px 30px gelb, -20px 15px 30px Kalk, -20px -15px 30px blau, 20px -15px 30px rot; Box-Schatten: 0 0 20px # 333 Einfügung, 20px 15px 30px gelb, -20px 15px 30px Kalk, -20px -15px 30px blau, 20px -15px 30px rot;
Browser-Unterstützung:
Textschatten sind wie Feldschatten, nur dass sie Schatten für Text und nicht für das gesamte Element sind. Glücklicherweise ist für Textschatten kein Herstellerpräfix erforderlich.
Text-Schatten: offset_x offset_y blur_radius color;
Die Optionen für Textschatten sind die gleichen wie für Boxschatten, es wird jedoch keine Textschattenunterstützung unterstützt. Hier ist eine Demo, mit der ansonsten unsichtbarer Text von der Seite entfernt wird.
color: #fff / * Textfarbe in Weiß * / Text-Schatten: 0 0 50px # 333;
Dies bewirkt den folgenden Effekt:
Wie bei Box-Schatten ist es möglich, mehrere Text-Schatten zu verwenden, indem Sie sie durch Kommas voneinander trennen. Hier ist ein Beispiel, das einen flammenden Texteffekt erzeugt.
Text-Schatten: 0 0 4px #ccc, 0 -5px 4px # ff3, 2px -10px 6px # fd3, -2px -15px 11px # f80, 2px -18px 18px # f20;
Textschatten können erstaunliche Effekte erzeugen und andere Effekte sehr gut ergänzen.
Browser-Unterstützung:
Farbverläufe sind eine der leistungsfähigsten Funktionen, die Ihnen zur Verfügung stehen, wenn Sie diese fantastischen Effekte erstellen möchten. Obwohl die vollständige Browserunterstützung immer noch nicht ganz gegeben ist, können Sie den Browsern jederzeit Fallback-Styling ohne Unterstützung zur Verfügung stellen. Denken Sie daran: Websites müssen nicht in jedem Browser gleich aussehen. Es gibt zwei Arten von Gradienten, die Sie erstellen können: lineare Gradienten und radiale Gradienten. Wie zu erwarten, bewegen sich lineare Farbverläufe entlang einer geraden Linie und radiale Farbverläufe gehen um einen Kreis. Farbverläufe können überall dort verwendet werden, wo Sie ein Bild verwendet haben, z. B. für den Hintergrund, ein Rahmenbild oder für Aufzählungszeichen.
Leider gibt es für Webentwickler zwei verschiedene Syntaxtypen: eine für Mozilla und eine für Webkit.
Safari und Chrome verwenden beide die Webkit-Rendering-Engine. Sie verwenden daher immer dieselbe Syntax. Ihre Gradientensyntax ist ziemlich einfach:
-Webkit-Farbverlauf (, [, ]?, [, ] [, ] *)
Webkit verwendet für lineare und radiale Farbverläufe dieselbe Syntax. Ändern Sie einfach die Art Parameter um zwischen ihnen zu wechseln.
Firefox verwendet separate Syntaxen für lineare und radiale Farbverläufe, die sich stark von ihren Webkit-Pendants unterscheiden.
-moz-linearer gradient ([|| ,]? , [, ] *) -moz-Radialgradient ([ || ,] [ || ,]? , [, ] *)
Lassen Sie uns diese Syntax separat betrachten.
Zur Vereinfachung finden Sie hier die Syntax eines Webkits nur für lineare Gradienten.
-Webkit-Gradient (linear, start_x start_y, end_x end_y, stop, stop ...)
Die Syntax von Firefox sieht so aus.
-moz-linearer Gradient (Winkel start_x start_y, stop, stop ...)
Geben Sie in der Webkit-Syntax die Parameter start_x und start_y an, und legen Sie die Startposition des Farbverlaufs fest, während end_x und end_y die Endposition des Farbverlaufs angeben. Als Werte für diese Positionsparameter können Sie einen der Standard-CSS-Dimensionswerte verwenden, einschließlich Prozentwerte sowie die Schlüsselwörter left, top, bottom, right und center. Mit Stopps können Sie bestimmte Farben angeben, die an bestimmten Punkten des Verlaufs verwendet werden sollen. Sie können beliebig viele Farbstopps haben, aber Sie müssen mindestens zwei haben: eine Start- und eine Endfarbe. Für zusätzliche Farbstopps können Sie die Funktion color-stop () verwenden, die eine Position als Prozentsatz oder Dezimalzahl zwischen 0 und 1 sowie eine Farbe bereitstellt. Zum Beispiel: Farbstopp (50%, schwarz) würde einen schwarzen Stopp auf genau der Hälfte des Verlaufs erzeugen. Anstatt 0% und 100% für die Start- und Endfarben zu schreiben, gibt es die Komfortfunktionen von () und bis (). Sie müssen nur die Farbe angeben.
Die Firefox-Syntax ist viel unkomplizierter und hat viele Möglichkeiten, das gleiche Ziel zu erreichen. Das einzige, was an der Syntax statisch ist, sind die Farbstopps, bei denen es sich lediglich um eine Farbe handelt, auf die eine Position als Prozentsatz folgt. Bei den Start- und Endpositionen können Sie 0% und 100% weglassen. Wenn Sie die Position bei einem der anderen Farbstopps lassen, werden sie gleichmäßig über den Verlauf verteilt. Im Gegensatz zur Webkit-Syntax hat die Firefox-Syntax keine Endposition, sondern nur eine Startposition und einen Winkel. Der Farbverlauf verlässt die Startposition im angegebenen Winkel. Wenn Sie den Winkel auslassen, wird er senkrecht von diesem Punkt ausgehen. Wenn Sie den Startpunkt alle weglassen, wird der Verlauf von oben nach unten ausgeführt. Diese Syntax ist etwas verwirrend und etwas weniger flexibel als die einfache Syntax von Webkit. Daher ist es am besten, anhand von Beispielen zu lernen.
Hier ist ein einfaches Beispiel für CSS-Gradienten in Aktion. Dieser Farbverlauf verläuft von der oberen linken Ecke zur unteren linken Ecke (also von oben nach unten) und von Rot nach Weiß.
-Webkit-Gradient (linear, links oben, links unten, von (rot) bis (weiß)); -moz-linearer Farbverlauf (rot, weiß)
Wenn Sie dies als Hintergrundeigenschaft eines div festlegen, erhalten Sie folgendes Ergebnis:
Durch Hinzufügen eines Farbstops und Ändern des Neigungswinkels können wir einen anderen Effekt erzielen.
-Webkit-Gradient (linear, links oben, rechts unten, von (rot), Farbstopp (50%, weiß) bis (rot)); -moz-linearer Gradient (links oben, rot, weiß, rot);
Hier ist die Syntax für radiale Farbverläufe in Webkit.
-Webkit-Gradient (radial, inner_circle_center_x inner_circle_center_y, inner_circle_radius, äußere_circle_center_x äußere_circle_center_y, äußere_circle_radius, stop, stop ...)
Die Syntax von Firefox sieht so aus.
-Moz-Radialgradient (center_x center_y, Formgröße, Stop, Stop…)
Die Webkit-Syntax ist etwas komplizierter als die lineare Gradientensyntax, es gelten jedoch die gleichen Prinzipien. Radiale Farbverläufe in Webkit haben zwei Kreise: einen Anfangskreis und einen Endkreis. Sie geben die X- und Y-Positionen für jeden dieser Kreise zusammen mit ihren Radien an. Zum Schluss legen Sie die Farbstopps genauso fest wie bei linearen Farbverläufen.
Die Firefox-Syntax für radiale Farbverläufe ist der Syntax für lineare Farbverläufe ähnlich, da alle Teile außer den Farbstopps weggelassen werden können. Sie können die X- und Y-Positionen des Verlaufs in der Mitte ähnlich den Koordinaten des inneren Kreises in der Webkit-Syntax angeben. In Firefox gibt es jedoch keinen äußeren Kreis. Stattdessen können Sie eine Form und Größe des Verlaufs angeben. Die Form kann entweder ein Kreis oder eine Ellipse sein, wobei letztere derzeit nicht in Webkit erstellt werden kann. Die Größe akzeptiert viele verschiedene Schlüsselwörter, jedoch nicht die erwartete Pixelgröße. Im Mozilla Developer Center können Sie nachlesen, was jede dieser Konstanten bewirkt. Für dieses Tutorial verwenden wir einfach die Standardeinstellungen. Wenn Sie die X- und Y-Positionen in der Mitte auslassen, wird angenommen, dass sie die Mitte des Objekts sind, das Sie mit einem Farbverlauf füllen. Wenn Sie die Form und Größe weglassen, wird angenommen, dass der Farbverlauf ein Kreis ist, der das gesamte Feld ausfüllt.
-Webkit-Gradient (radial, Mitte, 0, Mitte, 50, von (weiß) bis (rot)); -moz-radialer Gradient (weiß, rot)
Wenn wir diesen Gradienten auf den Hintergrund eines div anwenden, erhalten wir dies.
Browser-Unterstützung:
Mehrere Hintergründe erleichtern das Erstellen komplexer Effekte in CSS, ohne dass zusätzliche Markierungen in HTML erstellt werden müssen. Durch diese Unterstützung können Elemente neben der Standardhintergrundfarbe mehrere Farbverläufe und Bildhintergründe aufweisen. Es gibt keinen Unterschied in der Syntax mehrerer Hintergründe aus einzelnen Hintergründen - trennen Sie sie einfach durch Kommas und los geht's!
Hier ist ein Beispiel für ein div mit einem Hintergrund mit Farbverlauf und einem schönen Struktureffekt unter Verwendung eines Bildes:
Hintergrund: URL (noise.png), -webkit-gradient (linear, links oben, links unten, von (# 999) bis (# 333)); Hintergrund: URL (Noise.png), -moz-linearer Gradient (# 999, # 333);
Wir müssen es zweimal deklarieren, da es, wie wir gelernt haben, für jeden Browser eine unterschiedliche Gradientensyntax gibt. Dies bewirkt den folgenden Effekt:
Jetzt, da wir fünf großartige Elektrowerkzeuge zur Verfügung haben, wollen wir sie kombinieren, um einen noch großartigeren Effekt zu erzielen.
Es gibt so viele verschiedene Arten von Schaltflächen, die Sie für das Design auswählen können. Um einfach zu sein, lassen Sie uns etwas emulieren, das bereits existiert - der Schaltflächenstil von Mac OS X.
Wir beginnen mit unserem HTML-Code für diese Demo. Es ist wirklich ziemlich einfach, nur zwei DIVs und etwas Text.
Taste
Nun beginnen wir mit unserem Basis-CSS. Lassen Sie uns zunächst das Panel gestalten.
.Panel Hintergrund: -webkit-gradient (linear, links oben, links unten, von (#bbbcbb) bis (# 959695)); Hintergrund: -moz-linearer Gradient (#bbbcbb, # 959695); Hintergrundfarbe: # b7b9b7; Breite: 100px;
Das Panel ist nur ein schöner Behälter für unseren Button. Der Farbverlauf verläuft von oben nach unten zwischen zwei schönen grauen Farben. Für Browser, die keine Farbverläufe unterstützen, wird eine Hintergrundfarbe für den Fallback angegeben.
Lassen Sie uns nun die aktuelle Schaltfläche im CSS betrachten.
.Taste Anzeige: Inline-Block; Marge: 20px; Polsterung: 3px 6px; Schriftfamilie: 'Lucida Grande', Arial, serifenlos; Schriftgröße: 13px; -webkit-border-radius: 3px; -moz-border-radius: 3px; Grenzradius: 3px; Rand: 1px festes rgba (0, 0, 0, 0,6); Hintergrund: -webkit-gradient (linear, links oben, links unten, von (#fbfcfb) bis (# 9d9e9d)); Hintergrund: -moz-linearer Gradient (#fbfcfb, # 9d9e9d); Hintergrundfarbe: # c0c2c0; Text-Schatten: rgba (255, 255, 255, 0.4) 0px 1px; -webkit-box-shadow: rgba (255, 255, 255, 0.4) 0 1px; -moz-box-shadow: rgba (255, 255, 255, 0.4) 0 1px; Box-Schatten: rgba (255, 255, 255, 0.4) 0 1px; -webkit-user-select: keine; -moz-user-select: keine; Cursor: Standard;
Hier gibt es eine anständige Menge an Code, der alle oben beschriebenen Elektrowerkzeuge verwendet, mit Ausnahme mehrerer Hintergründe. Dieser Code besteht aus mehreren Abschnitten, die wir nacheinander verwenden werden. Die ersten beiden Zeilen sind nur einige einfache Layoutinformationen. Festlegen, dass die Schaltfläche angezeigt werden soll: Inline-Block bewirkt, dass er automatisch an den Inhalt angepasst wird, unabhängig davon, wie viel Text Sie in die Schaltfläche einfügen. Der nächste Abschnitt enthält einige Informationen zur Schriftart. Schließlich können wir im dritten Abschnitt unser erstes Elektrowerkzeug verwenden: den Grenzradius. Bei unserem schönen Button geben wir ihm einen schönen Radius von 3px. Als nächstes geben wir dem Button einen Rahmen. Beachten Sie, dass wir hier rgba als Farbe verwenden. Dies ermöglicht es uns, die Farbe wie hier teilweise transparent zu machen, wodurch eine schöne graue Farbe entsteht. Im nächsten Abschnitt des Codes richten wir den Hintergrund der Schaltfläche ein. Wir geben ihm einen Farbverlaufshintergrund sowie eine durchgehende Farbe für den Fallback in Browsern, die noch keine Farbverläufe unterstützen. Als Nächstes verwenden wir Textschatten, um den Text in die Schaltfläche ein wenig eingraviert aussehen zu lassen. Wieder verwenden wir hier rgba, um dem Textschatten ein teilweise transparentes Weiß zu geben. Der ultimative Stiftabschnitt des Codes erstellt einen Boxschatten. Nun, dies sieht eigentlich nicht wie ein Schatten aus, es sieht tatsächlich wie eine zweite Umrandung aus, aber es gibt ein schönes Highlight am unteren Rand der Schaltfläche, damit es in den Hintergrund eingraviert erscheint und die Umrandungsfarbe ergänzt. Dies ist ein nützlicher Trick, um zu wissen, ob Sie möchten, dass etwas so aussieht, als hätte es mehrere Ränder - ich verwende es häufig. Schließlich ist der letzte Abschnitt des CSS-Codes ein schöner Trick, der die Textauswahl in Webkit-basierten Browsern und Firefox verhindert und den Cursor auf den Standardpfeil statt auf den Textauswahlcursor setzt.
Bisher sieht unser Code so aus, dass unser Button so aussieht:
OK, also noch nicht so schlimm! Gehen wir weiter zum niedergedrückten Look der Schaltfläche.
.Taste: aktiv Hintergrund: # B5B5B5; -webkit-box-shadow: rgba (255, 255, 255, 0.4) 0 1px, schwarz 0px 1px 3px Einfügung, rgba (0, 0, 0, 0.4) 0px -5px 12px Einfügung; -moz-box-shadow: rgba (255, 255, 255, 0.4) 0 1px, schwarz 0px 1px 3px Einfügung, rgba (0, 0, 0, 0.4) 0px -5px 12px Einfügung; Box-Schatten: rgba (255, 255, 255, 0,4) 0 1px, schwarz 0px 1px 3px Einfügung, rgba (0, 0, 0, 0.4) 0px -5px 12px Einfügung; Text-Schatten: rgba (255, 255, 255, 0.3) 0px 1px;
Wenn die Taste gedrückt wird, ändern wir einige Dinge. Zuerst setzen wir den Hintergrund auf eine unifarbene Farbe und entfernen den Farbverlauf, den wir zuvor gesetzt hatten. Dies liegt daran, dass wir den depressiven Look mit einem Boxschatten und nicht mit einem Farbverlauf erzeugen. Das nächste, was wir tun, ist das Setzen von Schatten, oder vielmehr mehrerer Schatten. Der erste Schatten in der Liste ist derselbe, den wir im Normalzustand hatten: die Hervorhebung am unteren Rand der Schaltfläche. Der zweite und der dritte Schatten sind die, durch die unsere Taste gedrückt wird. Der erste davon ist ein schwarzer Schatten, der von einem Pixel auf 1 Pixel gesetzt wird und 3 Pixel Unschärfe aufweist - ein ziemlich dunkel wirkender Schatten. Der letzte Schatten ist ebenfalls schwarz, aber ein leicht transparentes Schwarz, das aus den unteren 5 Pixeln mit 12 Pixeln Unschärfe aufgebaut wird. Dadurch wird das dunkle Aussehen auf der Unterseite der Schaltfläche erzeugt, wenn diese gedrückt wird. Das letzte, was wir tun müssen, wenn diese Taste gedrückt wird, ist nur die Deckkraft des Textschattens um eine Stufe zu reduzieren, so dass er nicht wie ein dicker Daumen auffällt.
Das ist es! Unser Button ist komplett. So sieht die heruntergedrückte Version aus:
Das Ersetzen von Bildern durch CSS3 hat viele Vorteile. Dies erleichtert Ihnen die Arbeit als Webentwickler, da Sie Photoshop nicht jedes Mal öffnen müssen, wenn Sie Änderungen an Ihrer Benutzeroberfläche vornehmen müssen. Dadurch wird das Laden Ihrer Website oder Webanwendung schneller, da nicht so viele Bilder heruntergeladen werden müssen. Und es ermöglicht Ihnen, eine reichhaltigere, interaktivere und wünschenswertere Erfahrung für Benutzer zu schaffen, so dass sie immer wieder zurückkommen.
Ich werde Ihnen ein wenig Inspiration von den Dingen geben, die Sie mit CSS3 machen könnten. Dies sind nicht unbedingt die realsten Beispiele, aber sie zeigen, was mit etwas Arbeit möglich ist.
Die erste von Jeff Batterton entwickelte Demo ist ein mit reinem CSS3 erstelltes iPhone - es werden keine Bilder verwendet. Es ist sehr beeindruckend und verwendet CSS-Farbverläufe, Textschatten, Box-Schatten, Übergänge und Transformationen. Leider sieht es derzeit nur in Webkit-basierten Browsern wie Safari und Chrome korrekt aus. Es kann Ihre Aufgabe sein, die Demo in Firefox zum Laufen zu bringen!
Eine weitere, vielleicht sogar noch erstaunlichere Demo wurde von Louis Harboe geschrieben. Es ist eine Neuauflage einiger iOS-Icons in reinem CSS und sehr realistische Wiedergaben dabei! Diese Demo funktioniert auch nur in Webkit-basierten Browsern. Wenn Sie wissen möchten, wie einige dieser Symbole reproduziert wurden, können Sie zu Louis Harboes Blog gehen, wo er den Prozess beschreibt.
Ich hoffe, Ihnen hat dieser Artikel gefallen! Fühlen Sie sich frei, mich auf Twitter zu treffen oder Ihre Kommentare in den Kommentaren zu hinterlassen!
Accentsconagua