Advertisement
  1. Code
  2. HTML & CSS

Erste Schritte mit CSS3 Power-Werkzeuge

by
Read Time:16 minsLanguages:
This post is part of a series called CSS3 Mastery.
The 30 CSS Selectors You Must Memorize
Quick Tip: Mimic Equal Columns with CSS3 Gradients

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

CSS3 ist eine der coolsten neuen Webtechnologien, die Webentwicklern derzeit zur Verfügung steht. Mit einigen der vielen Funktionen ist es möglich, die Effekte zu reproduzieren, die Sie möglicherweise zuvor in Photoshop erstellt haben, mit CSS-Code, der wartungsfreundlicher, schneller zu laden und mit den neuesten Trends angesagt ist. Lesen Sie weiter, um mehr über die verfügbaren Power-Werkzeuge zu erfahren und wie Sie sie kombinieren können, um die ultimativen grafischen Effekte zu erzielen.

CSS3 hat viele Funktionen, aber einige davon müssen Sie unbedingt lernen, wenn Sie Photoshop-ähnliche Effekte reproduzieren möchten. Ich nenne diese meine "Power-Werkzeuge".  Sie umfassen Folgendes:

  1. Grenzradien
  2. Box-Schatten
  3. Textschatten
  4. Farbverläufe
  5. Mehrere Hintergründe

Jede dieser Funktionen kann dazu beitragen, einige der Bilder zu ersetzen, die Sie in der Vergangenheit möglicherweise in Photostop erstellt haben. Auf diese Weise machen Sie Ihre Website wartungsfreundlicher, da Sie eine Eigenschaft ändern können, indem Sie einfach Ihre CSS-Datei ändern, anstatt ein Bild in Photoshop zu bearbeiten. Sie beschleunigen auch das Laden Ihrer Website, da Bilder viel Bandbreite verbrauchen. Lassen Sie uns diese Funktionen nacheinander erkunden.


Power-Werkzeug #1: Randradius

Browser-Unterstützung:

  • Safari: 3.2+
  • Firefox: 3.0+
  • Chrome: 3.0+
  • Opera: 10.5+
  • Internet Explorer: 9.0+

Sie haben wahrscheinlich schon eine Million Mal von Grenzradius gehört. Es ist super einfach zu bedienen und wird von allen modernen Browsern unterstützt. Wenn Sie es noch nicht wissen, können Sie mit dem Randradius abgerundete Ecken mit CSS erstellen – keine Bilder erforderlich! Werfen wir einen Blick auf die Syntax.

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 sie unterstützen, einschließlich IE9, Opera und Safari 5.

Das Anwenden eines 10-Pixel-Randradius auf ein div erzeugt den folgenden Effekt:

Okay, einfach! Kommen wir zum nächsten Power-Werkzeug.


Power-Werkzeug #2: Box-Schatten

Browser-Unterstützung:

  • Safari: 3.2+
  • Firefox: 3.5+
  • Chrome: 3.0+
  • Opera: 10.5+
  • Internet Explorer: 9.0+

Boxschatten sind eine weitere gut unterstützte Funktion. Ihre Syntax sieht so aus:

Auch hier müssen wir die Vendor-Präfixe für Webkit und Mozilla verwenden. Der erste und zweite Parameter der Box-Shadow-Eigenschaft sind die Versatzpositionen von den linken und oberen Koordinaten des Elements. Durch Festlegen eines positiven Werts für diese Eigenschaften wird der Schatten vom Element nach rechts und unten verschoben, und durch Festlegen eines negativen Werts wird der Schatten vom Element nach links und nach oben verschoben. Der blur_radius ist die Menge an Unschärfe, die Sie Ihrem Schatten hinzufügen möchten (wie hart oder unscharf Sie es möchten). Der letzte Parameter ist schließlich die Farbe, die der Schatten haben soll. Das Hinzufügen eines Schattens zu unserem zuvor verwendeten abgerundeten Div erzeugt einen gut aussehenden Effekt.

Ein weiteres nettes Feature von CSS-Box-Schatten ist das Schlüsselwort inset. Wenn das Schlüsselwort inset vorhanden ist, wird der Schatten innerhalb der Box und nicht außerhalb gerendert. Dies kann insbesondere bei Knöpfen ein schönes deprimiertes Aussehen erzeugen. So würde unser Div mit einem eingefügten Schatten aussehen.

Die letzte erwähnenswerte Eigenschaft von Box-Schatten ist die Möglichkeit, mehrere Schatten auf demselben Element zu haben. Dies ist sehr nützlich und kann zusätzliches Markup in Ihrem HTML-Code eliminieren, nur um einen zusätzlichen Schatten anzuwenden. Um mehrere Schatten zu erstellen, müssen Sie sie nur durch Kommas trennen. Hier ist ein Beispiel:


Power-Werkzeug #3: Textschatten

Browser-Unterstützung:

  • Safari: 3.2+
  • Firefox: 3.5+
  • Chrome: 3.0+
  • Opera: 10.1+
  • Internet Explorer: Kommt hoffentlich bald!

Textschatten sind wie Boxschatten, außer dass sie Schatten für Text und nicht für das gesamte Element sind. Glücklicherweise ist für Textschatten kein Herstellerpräfix erforderlich.

Die Optionen für Textschatten sind dieselben wie für Box-Schatten, außer dass es keine Unterstützung für eingefügten Textschatten gibt. Hier ist eine Demo, die ansonsten unsichtbaren Text von der Seite verschwinden lässt.

Dadurch entsteht folgender Effekt:

Wie bei Boxschatten ist es möglich, mehrere Textschatten zu haben, indem Sie sie einfach durch Kommas trennen. Hier ist ein Beispiel, das einen flammenden Texteffekt erzeugt.

Textschatten können einige tolle Effekte erzeugen und andere Effekte sehr gut ergänzen.


Power-Werkzeug #4: Farbverläufe

Browser-Unterstützung:

  • Safari: 4+
  • Firefox: 3.6+
  • Chrome: 5+
  • Opera: Kommt hoffentlich bald!
  • Internet Explorer: Kommt hoffentlich bald!

Farbverläufe sind eine der leistungsstärksten Funktionen, die Ihnen zur Verfügung stehen, wenn Sie diese fantastischen Effekte erstellen möchten. Obwohl die vollständige Browserunterstützung noch nicht ganz vorhanden ist, können Sie Browsern ohne Unterstützung jederzeit Fallback-Styling bereitstellen. Denken Sie daran: Websites müssen nicht in jedem Browser gleich aussehen. Sie können zwei Arten von Farbverläufen erstellen: lineare Farbverläufe und radiale Farbverläufe. Wie Sie vielleicht erwarten, bewegen sich lineare Farbverläufe entlang einer geraden Linie und radiale Farbverläufe um einen Kreis. Farbverläufe können überall dort verwendet werden, wo Sie in der Vergangenheit ein Bild verwendet haben, z. B. für den Hintergrund, das Rahmenbild oder Aufzählungszeichen.

Leider gibt es für Webentwickler zwei verschiedene Syntaxen: eine für Mozilla und eine für Webkit.

Syntax für Webkit

Safari und Chrome verwenden beide die Webkit-Rendering-Engine, sodass sie immer dieselbe Syntax verwenden. Ihre Gradientensyntax ist ziemlich einfach:

Webkit verwendet dieselbe Syntax für lineare und radiale Farbverläufe. Ändern Sie einfach den Typ-Parameter, um zwischen ihnen zu wechseln.

Syntax für Mozilla

Firefox verwendet separate Syntaxen für lineare und radiale Farbverläufe, die sich beide stark von ihren Webkit-Gegenstücken unterscheiden.

Sehen wir uns diese Syntaxen separat an.

Lineare Farbverläufe

Der Einfachheit halber ist hier die Syntax eines Webkits nur für lineare Farbverläufe.

Die Syntax von Firefox sieht so aus.

In der Webkit-Syntax geben die Parameter start_x und start_y die Startposition des Farbverlaufs an, und end_x und end_y geben die Endposition des Farbverlaufs an. Als Werte für diese Positionsparameter können Sie beliebige CSS-Standarddimensionswerte, einschließlich Prozentsätze, sowie die Keywords left, top, bottom, right und center verwenden. Stopps sind eine Möglichkeit für Sie, bestimmte Farben anzugeben, die an bestimmten Punkten entlang des Verlaufs verwendet werden sollen. Sie können so viele Farbstopps haben, wie Sie möchten, 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 prozentuale oder dezimale Position zwischen 0 und 1 sowie eine Farbe bereitstellt. Beispiel: color-stop(50%, black) würde einen schwarzen Farbstop genau auf halbem Weg durch den Farbverlauf erzeugen. Anstatt 0% und 100% für die Anfangs- und Endfarbe zu schreiben, gibt es die Komfortfunktionen from() und to(). Dazu müssen Sie lediglich die Farbe angeben.

Die Syntax von Firefox ist viel weniger geradlinig und bietet viele Möglichkeiten, dasselbe Ziel zu erreichen. Das einzige, was an der Syntax statisch ist, sind die Farbstopps, die nur eine Farbe sind, gefolgt von einer Position in Prozent. Für die Start- und Endposition können Sie 0% und 100% weglassen, und wenn Sie die Position eines der anderen Farbstopps weglassen, werden sie gleichmäßig über den Verlauf verteilt. Anders als die Webkit-Syntax hat die Firefox-Syntax keine Endposition, sondern nur eine Startposition und einen Winkel. Der Gradient läuft von der Startposition im angegebenen Winkel aus. Wenn Sie den Winkel weglassen, läuft er von diesem Punkt senkrecht aus. Wenn Sie den Startpunkt komplett weglassen, verläuft der Farbverlauf von oben nach unten. 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-Verläufe in Aktion. Dieser Verlauf geht von der oberen linken Ecke zur unteren linken Ecke (also von oben nach unten) und von Rot nach Weiß.

Wenn wir dies als Hintergrundeigenschaft eines div festlegen, erhalten wir das folgende Ergebnis:

Indem wir einen Farbstopp hinzufügen und den Winkel des Farbverlaufs ändern, können wir einen anderen Effekt erzielen.

Radiale Farbverläufe

Hier ist die Syntax für radiale Farbverläufe in Webkit.

Die Syntax von Firefox sieht so aus.

Die Webkit-Syntax ist etwas komplizierter als die lineare Gradientensyntax, aber es gelten immer noch die gleichen Prinzipien. Radiale Farbverläufe in Webkit haben zwei Kreise: einen Startkreis und einen Endkreis. Sie geben die X- und Y-Mittelpunktpositionen für jeden dieser Kreise zusammen mit ihren Radien an. Schließlich legen Sie die Farbstopps auf die gleiche Weise fest wie für lineare Verläufe.

Die Firefox-Syntax für radiale Farbverläufe ähnelt der Syntax für lineare Farbverläufe, da alle Teile außer den Farbstopps weggelassen werden können. Sie können die X- und Y-Mittelpositionen des Farbverlaufs ähnlich wie die Koordinaten des inneren Kreises in der Webkit-Syntax angeben, aber in Firefox gibt es keinen äußeren Kreis. Stattdessen können Sie eine Form und Größe des Farbverlaufs angeben. Die Form kann entweder ein Kreis oder eine Ellipse sein, wobei letztere derzeit in Webkit nicht erstellt werden können. Die Größe akzeptiert viele verschiedene Schlüsselwörter, aber keine Pixelgröße, wie Sie vielleicht erwartet hätten. Sie können im Mozilla Developer Center nachlesen, was jede dieser Konstanten bewirkt. Für dieses Tutorial verwenden wir nur die Standardeinstellungen. Wenn Sie die mittleren X- und Y-Positionen weglassen, wird davon ausgegangen, dass sie die Mitte des Objekts sind, das Sie mit einem Farbverlauf füllen. Wenn Sie Form und Größe weglassen, wird angenommen, dass der Farbverlauf ein Kreis ist, der das gesamte Feld ausfüllt.

Wenn wir diesen Farbverlauf auf den Hintergrund eines div anwenden, erhalten wir dies.


Power-Werkzeug #5: Mehrere Hintergründe

Browser-Unterstützung:

  • Safari: 3.2+
  • Firefox: 3.6+
  • Chrome: 3.0+
  • Opera: 10.5+
  • Internet Explorer: 9.0+

Mehrere Hintergründe machen es einfach, komplexe Effekte in CSS zu erstellen, ohne zusätzliches Markup in Ihrem HTML erstellen zu müssen. Dies zu unterstützen bedeutet, dass Elemente neben der Standardhintergrundfarbe mehrere Farbverläufe und Bildhintergründe haben können. Es gibt keinen Unterschied in der Syntax mehrerer Hintergründe von einzelnen Hintergründen - einfach durch Kommas trennen und los geht's!

Hier ist ein Beispiel für ein div mit einem Hintergrund mit Farbverlauf und einem schönen strukturierten Effekt mit einem Bild:

Wir müssen es zweimal deklarieren, da es, wie wir gelernt haben, für jeden Browser eine andere Gradientensyntax gibt. Dadurch entsteht folgender Effekt:


Die Power vereinen: Einen fantastischen CSS3-Button erstellen

Jetzt, da uns fünf großartige Power-Werkzeuge zur Verfügung stehen, kombinieren wir sie, um einen noch beeindruckenderen Effekt zu erzielen.

Es gibt so viele verschiedene Arten von Schaltflächen, die Sie auswählen können. Um es einfach zu machen, emulieren wir etwas, das bereits existiert - den Mac OS X-Schaltflächenstil.

Wir beginnen mit unserem HTML-Code für diese Demo. Es ist wirklich ganz einfach, nur zwei DIVs und etwas Text.

Jetzt beginnen wir mit unserem grundlegenden CSS. Lassen Sie uns zuerst das Panel stylen.

Das Panel ist nur ein schöner Behälter für unseren Button. Es hat einen Farbverlauf von oben nach unten zwischen zwei schönen grauen Farben. Für Browser, die keine Farbverläufe unterstützen, wird eine Fallback-Hintergrundfarbe angegeben.

Schauen wir uns nun das CSS für die eigentliche Schaltfläche an.

Es gibt hier eine anständige Menge an Code, der alle oben beschriebenen Power-Werkzeuge verwendet, mit Ausnahme mehrerer Hintergründe. Dieser Code besteht aus mehreren Abschnitten, die wir nacheinander verwenden. Die ersten beiden Zeilen sind nur einige einfache Layout-Informationen. Festlegen der anzuzeigenden Schaltfläche: Inline-Block erweitert sie automatisch an den Inhalt, egal wie viel Text Sie in die Schaltfläche einfügen. Der nächste Abschnitt enthält einige Informationen zur Schriftart der Schaltfläche. Im dritten Abschnitt schließlich kommen wir zu unserem ersten Power-Werkzeug: Randradius. Im Fall unseres schönen Buttons 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. Dadurch können wir die Farbe wie hier teilweise transparent machen, wodurch eine schöne graue Farbe entsteht. Im nächsten Codeabschnitt richten wir den Hintergrund der Schaltfläche ein. Wir geben ihm einen Hintergrund mit Farbverlauf sowie eine Volltonfarbe für den Fallback in Browsern, die noch keine Farbverläufe unterstützen. Als nächstes verwenden wir Textschatten, um den Text leicht in die Schaltfläche eingraviert aussehen zu lassen. Auch hier verwenden wir rgba, um dem Textschatten ein teilweise transparentes Weiß zu geben. Der letzte Abschnitt des Codes erstellt einen Kastenschatten. Nun, dies sieht nicht wirklich wie ein Schatten aus, es sieht tatsächlich aus wie ein zweiter Rand, aber es gibt dem unteren Rand der Schaltfläche ein schönes Highlight, damit es in den Hintergrund eingraviert aussieht und die Randfarbe ergänzt. Dies ist ein nützlicher Trick, um zu wissen, ob Sie jemals möchten, dass etwas so aussieht, als hätte es mehrere Ränder - ich benutze es oft. Schließlich ist der letzte Abschnitt des CSS-Codes ein netter Trick, der die Textauswahl in Webkit-basierten Browsern und Firefox verhindert und den Cursor auf den Standardpfeil anstatt auf den Textauswahl-Cursor setzt.

Bisher sieht dieser Code unsere Schaltfläche so aus:

Okay, also noch nicht so schlimm! Kommen wir zum deprimierten Aussehen des Buttons.

Wenn die Taste gedrückt wird, ändern wir eine Reihe von Dingen. Zuerst stellen wir den Hintergrund auf eine einfache Farbe ein und entfernen den Farbverlauf, den wir zuvor festgelegt hatten. Dies liegt daran, dass wir den depressiven Look mit einem Boxschatten anstelle eines Farbverlaufs erstellen. Als nächstes setzen wir diesen Schatten – oder besser gesagt mehrere 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 dritte Schatten sind diejenigen, die unseren Knopf gedrückt aussehen lassen. Der erste davon ist ein schwarzer eingefügter Schatten, der vom oberen 1 Pixel abgesetzt wird und 3 Pixel Unschärfe aufweist – ein ziemlich dunkel aussehender Schatten. Der letzte Schatten ist ebenfalls schwarz, aber ein leicht transparentes Schwarz, das von den unteren 5 Pixeln mit 12 Pixeln Unschärfe aufgebaut wird. Dadurch entsteht beim Drücken ein abgedunkeltes Aussehen am unteren Rand der Schaltfläche. Das letzte, was wir tun müssen, wenn diese Schaltfläche gedrückt wird, ist nur die Deckkraft des Textschattens um eine Kerbe zu reduzieren, damit er nicht wie ein wunder Daumen auffällt.

Das ist es! Unser Button ist fertig. So sieht die heruntergedrückte Version aus:


Schlussfolgerung

Das Ersetzen von Bildern durch CSS3 hat viele Vorteile. Es erleichtert Ihre Arbeit als Webentwickler, da Sie Photoshop nicht jedes Mal öffnen müssen, wenn Sie eine Änderung an Ihrer Benutzeroberfläche vornehmen müssen. Es beschleunigt das Laden Ihrer Website oder Webanwendung, da nicht so viele umfangreiche Bilder heruntergeladen werden müssen. Und es ermöglicht Ihnen, ein reichhaltigeres, interaktiveres und wünschenswerteres Erlebnis für Benutzer zu schaffen, sodass sie immer wiederkommen, um mehr zu erfahren.

Ich werde Ihnen ein wenig Inspiration für Dinge 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.

iPhone mit Pure CSS3

Die erste Demo, erstellt von Jeff Batterton, ist ein iPhone, das mit reinem CSS3 erstellt wurde - keine Bilder verwendet. Es ist sehr beeindruckend und verwendet CSS-Verläufe, Textschatten, Boxschatten, Ü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!

Pure CSS3-iOS-Symbole

Eine andere Demo, vielleicht noch erstaunlicher, wurde von Louis Harboe geschrieben. Es ist eine Nachbildung einiger der iOS-Symbole in reinem CSS und noch dazu sehr realistisch! Diese Demo funktioniert auch nur in Webkit-basierten Browsern. Wenn Sie mehr darüber erfahren möchten, wie einige dieser Symbole reproduziert wurden, können Sie den Blog von Louis Harboe besuchen, in dem er den Prozess beschreibt.

Ich hoffe, Ihnen hat dieser Artikel gefallen! Fühlen Sie sich frei, mich auf Twitter zu treffen, oder hinterlassen Sie Ihre Gedanken in den Kommentaren!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.