Online-Ressourcen für die Generierung von CSS3 Gradients

Die Fähigkeit, komplexe Gradient Mischungen zu erzeugen, ist eine der wirklich dramatischen Verbesserungen in CSS3. Bis zum Aufkommen von CSS3, verließ sich Designer auf gekachelten Bilddateien strukturierten Hintergründen hinter Seiten und Design-Elemente zu erstellen (wie Tags). Diese Bilddateien verlangsamt Seiten und sah klebrig, wenn sie in die Seiten langsam heruntergeladen ein Benutzer geöffnet hatte.

Das ist die gute Nachricht.

Der Nachteil ist, dass selbst für einen einfachen linearen Gradienten die Syntax definieren, ist ein Streit, weil verschiedene Browser für die Definition selbst diese einfachen Gradienten unterschiedliche Syntax. Und wenn es um die Definition diagonal oder radiale Gradienten kommt, werden die Unterschiede zwischen den Browser-Syntax noch krasser.

Nur um ein Gefühl dafür, untersuchen Sie die CSS erforderlich, um das Hintergrundbild in der Abbildung unten zu erzeugen:

Hintergrund: -moz-Radial-Gradienten (Mitte, Ellipse Abdeckung, rgba (228,245,252,1) 0%, rgba (191,232,249,1) 50%, rgba (159,216,239,1) 51%, rgba (42,176,237,1) 100%) - / * FF3.6 + * / Hintergrund: -webkit-Gradienten (radial, mitte, 0px, mitte, 100%, Farbe-Stop (0%, rgba (228,245,252,1)), color-Anschlag (50% , rgba (191,232,249,1)), color-Anschlag (51%, rgba (159,216,239,1)), color-Anschlag (100%, rgba (42,176,237,1))) - / * Chrome, Safari4 + * / Hintergrund: - webkit-radial-Gradienten (Mitte, Ellipse Abdeckung, rgba (228,245,252,1) 0%, rgba (191,232,249,1) 50%, rgba (159,216,239,1) 51%, rgba (42,176,237,1) 100%) - / * Chrome10 +, Safari5.1 + * / Hintergrund: -o-radial-Gradienten (Mitte, Ellipse Abdeckung, rgba (228,245,252,1) 0%, rgba (191,232,249,1) 50%, rgba (159,216,239,1) 51%, rgba (42,176,237,1) 100%) - / * Opera 12+ * / Hintergrund: -ms-radial-Gradienten (Mitte, Ellipse Abdeckung, rgba (228,245,252,1) 0%, rgba (191,232,249,1) 50%, rgba ( 159,216,239,1) 51%, rgba (42,176,237,1) 100%) - / * IE10 + * / Hintergrund: radial-Gradienten (Ellipse in der Mitte, rgba (228,245,252,1) 0%, rgba (191,232,249,1) 50%, rgba (159,216,239,1) 51%, rgba (42,176,237,1) 100%) - / * W3C * /

Also, was ist ein schlechter Designer zu tun? Zum Glück gibt es einige wirklich nützliche CSS Gradient Generatoren online. Hier sind drei der besten:

ColorZilla Ultimate CSS Gradient Generator

Wahrscheinlich die mächtigste der CSS3 Gradient-Generatoren, die Ultimative CSS Gradient Generator können Designer Steigungen mit Schiebereglern definieren, die bequem zu jeder fühlen, die einen Gradienten in Illustrator, CorelDraw oder andere Zeichenprogramme, hier definiert:

Die ultimative CSS Gradient Generator bietet auch Optionen für SVG-Bilder zu erzeugen, die 9 im Internet Explorer erkannt wird (die Unterstützung für CSS3 Gradienten begrenzt ist).

CSS3 Gradient Generator

Der CSS3 Gradient Generator, erstellt von Damian Galarza, hat ein paar weniger Features als die ultimative CSS Gradient Generator, aber eine sehr saubere, zugängliche Schnittstelle macht es einfach grundlegende linear und diagonal Mischungen zu schaffen, während CSS-Code auf dem Bildschirm erscheinen zu beobachten.

Diese Ressource ist besonders praktisch für für Knöpfe Gradienten Hintergrund erstellen, da das Vorschaufenster ein schönes, sauberes vorkonfigurierte knopfgroßen Quadrat ist.

CSS Gradient Hintergrund Maker

Einige Jungs in einer Garage bis in der Nähe von Seattle setzen eine einfach zu bedienende und leistungsfähige CSS3 Gradient Generator sie den Anruf CSS Gradient Hintergrund Maker. Sie haben eine alternative Anlauf bekamen sie Microsoft anrufen, und die Gradienten Sie hier generieren arbeiten - ja, Internet Explorer (Versionen 10 und höher), sondern auch alle anderen aktuellen Browsern.

Die CSS Gradient Hintergrund Maker könnte der schnellste Weg sein Gradienten der Haufen zu schaffen, wie es mit mehr als einem Dutzend vorge Sets kommt.

Wie CSS3 Gradient Generatoren arbeiten

Alle drei der CSS3 Gradient Generatoren hier aufgeführt sind, und auch andere, schaffen Stücke von CSS3-Code, der Designer kopieren und in CSS-Dateien einfügen können. Sie Generatoren bieten nicht viel Hilfe, wie das zu tun - sie erwarten, dass Sie in der Lage sein, CSS3 Hintergründe für Elemente und Klasse und div-Selektoren in einer CSS-Datei zu handhaben zu definieren.

Aber der Prozess ist nicht allzu schwer. Zum Beispiel, wenn Sie eine Klasse-Stil erstellen und benennen es .background, können Sie kopieren und einen Gradienten Stil in diesem Selektor einfügen wie hier gezeigt:

.Hintergrund {/ * IE10 Consumer Preview * / background-image: -ms-Radial-Gradienten (Mitte, Kreis engst Seite, #FFFFFF 0%, # 00A3EF 100%) - / * Mozilla Firefox * / background-image: -moz -radial-Gradienten (Mitte, Kreis engst Seite, #FFFFFF 0%, # 00A3EF 100%) - / * Opera * / background-image: -o-radial-Gradienten (Mitte, Kreis engst Seite, #FFFFFF 0% , # 00A3EF 100%) - / * Webkit (Safari / Chrome 10) * / background-image: -webkit-Gradienten (radial, mitte, 0, mitte, 140, Farbe-Stop (0, # FFFFFF), Farbe -stop (1, # 00A3EF)) - / * Webkit (Chrome 11+) * / background-image: -webkit-radial-Gradienten (Mitte, Kreis engst Seite, #FFFFFF 0%, # 00A3EF 100%) - / * W3C Markup, IE10 Release Preview * / background-image: radial-Gradienten (Kreis am nächsten Seite in der Mitte, #FFFFFF 0%, # 00A3EF 100%) -}

Und dann können Sie den Hintergrund zu jedem Element in der HTML-Datei. Dabei wird der Hintergrund zu einem Tag angewendet:

(Inhalt hier)