Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Dieter Petereit 1. Januar 2014

CSS und SVG: 2 neue, kostenlose Dienste für Hintergründe und Verläufe in HTML 5

Zum Jahresende hin stolpere ich über zwei Dienste, die sich auf die Erstellung von Website-Hintergründen mit HTML 5 konzentrieren. Dabei setzt das Tool CSS Color Gradient Generator von ScriptsConnect auf CSS 3 und das Tool SVGeneration auf SVG. Mit mehreren Farbmodellen und Unterstützung für mehr als nur CSS kann der CSS Generator punkten, während SVGeneration bei Verläufen noch nicht Halt macht, sondern mit etlichen realistisch wirkenden Texturen zu gefallen weiß. Beide erleichtern uns die Arbeit, schauen wir also mal genauer hin…

CSS3 Color Gradient Selector and Generator

css-color-gradient-generator

Der CSS Color Gradient Generator stellt über eine übersichtliche Formular-Umgebung alle erforderlichen Parameter bereit, die Sie benötigen, um einen Verlauf mittels CSS3 umfassend zu konfigurieren. Dabei arbeitet der Generator in unterstützten Browsern im WYSIWYG-Modus. Auf der rechten Seite des Browserfensters wird stets verzögerungsfrei dargestellt, was die Änderung der Parameter auf der linken Seite bewirkt. Oben rechts sehen Sie dabei die grafische Preview, darunter den generierten CSS-Code, der sich mit und ohne Kommentare darstellen lässt und sich ebenfalls dynamisch ändert.

Neben CSS kann die Ausgabe auch in SCSS und Less erfolgen. Als Farbformat ist man nicht auf das übliche Hex festgelegt. Zur Wahl stehen zusätzlich jeweils zwei RGB- und HSL-Varianten. Die ansehnlichen Presets eignen sich gut als Basis für eigene Verläufe. Sie orientieren sich durchgängig an aktuell gängigen, im Sinne von populären Farben.

Der CSS Color Gradient Generator kümmert sich ungefragt um das Browser-Prefixing und liefert sogar einen Fallback für ältere Internet Exploder mit. Das Tool kann frei verwendet werden. Ist der Verlauf fertig parametrisiert, kopieren Sie schlicht den Code aus dem Textfeld rechts unten aus und fügen ihn in Ihrem Projekt wieder ein.

Haben Sie bereits einen CSS-Verlauf, den Sie visuell bearbeiten wollen, so verwenden Sie die Funktion Import from CSS unterhalb des Ausgabefensters. Im sich nun öffnenden Textfeld kopieren Sie Ihren Code ein und klicken auf Submit. Jetzt können Sie ihn in gleicher Weise wie die mitgelieferten Presets bearbeiten.

SVGeneration: mehr als nur Verläufe

svgeneration

Das Tool SVGeneration ist wie der CSS Generator weiter oben eine Web-App, die kostenlos genutzt werden kann. Die fast 60 SVG-Vorlagen, die der Betreiber bereits zur Verfügung gestellt hat, können unter MIT-Lizenz, also ohne Attribution, frei Verwendung finden. Wenn Sie mögen, reichen Sie Ihre eigenen Kreationen ein. Bei entsprechender Qualität stehen die Chancen nicht schlecht, in den Bestand übernommen zu werden.

Alle Vorlagen auf SVGeneration sind über zwei Editoren frei anpassbar, dabei aufgrund des SVG-Formats nicht auf Verläufe beschränkt. So finden Sie auf der Site viele, interessante Hintergrund-Texturen, etwa in Metall- oder Stoffoptik. Auch viele Flat Designs warten darauf, von Ihnen entdeckt und bearbeitet zu werden.

Der Einstieg ist einfach. Suchen Sie über den Showcase ein Design aus, das Ihnen zusagt und klicken mittig auf Generate. Sie gelangen in einen sog. Easy Editor, mit dessen Hilfe Sie im WYSIWYG-Modus an den Texturen schrauben können. An dieser Stelle werden Sie auch über etwaige Einschränkungen des gewählten Patterns hinsichtlich der Browser-Kompatibilität informiert. Generell empfehlen die Betreiber den Einsatz von etwa Modernizr, um entsprechend unfähige Browser direkt anders behandeln zu können.

Im Easy Editor können Sie nun über Schieberegler und Farbwähler die Optik des vorgewählten Musters anpassen. Entspricht alles den Vorstellungen, downloaden Sie SVG und CSS und bauen beides auf Ihrer Website wieder ein. Der zweite Editor namens Code Edit erlaubt weitergehende Änderungen direkt am SVG-Code. Zu beachten ist dabei allerdings, dass man, soweit man hier tatsächlich Änderungen vornimmt, nicht mehr zum Easy Editor wechseln kann. Tut man es dennoch, sind die getätigten Änderungen verloren.

Zusätzlich zu den leicht anpassbaren Vorlagen finden Sie auf SVGeneration eine Sammlung von Ressourcen zum Thema, gut nicht nur für Einsteiger.

svgeneration-editor

Links zum Beitrag:

  • CSS Color Gradient Selector and Generator | Homepage
  • SVGeneration | Homepage
  • ScriptsConnect | Macher des CSS Generators

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.