Schlagwort: freepik

Die Zeiten, in denen CSS rein mit der Hand geschrieben werden musste, sind schon seit einiger Zeit vorbei. In den letzten Jahren konnten sich immer mehr kleine Helferlein etablieren, die einzelne Aspekte des CSS-Design visuell unterstützen. Aus Spanien kommt eine neue Web-App, die vier Teilbereiche komfortabel abzudecken versteht. Die Entwickler des Dienstes CSS Matic sind alte Bekannte.

Freepik.com und Thumbr.it zeichnen für CSS Matic verantwortlich

Dr. Web-Leserinnen und -Leser kennen die Suchmaschine Freepik.com. Im Sommer 2012 stellten wir den Service vor. Wir konnten Freepik mit Einschränkungen empfehlen. Positiv erschien uns die hohe Zahl gefundener Ressourcen für die verschiedenste Bedarfslagen und Desktop-Softwares. Weniger erwärmen konnten wir uns für das Konzept der Drittverlinkung. So ist es bei Freepik stets erforderlich, die Lizenz der gefundenen Ressource noch einmal gründlich auf deren Quell-Website gegen zu checken. Freepik selber hostet (zumindest in der Regel) den entsprechenden Download nicht.

Seit einigen Wochen ist das Freepik-Team sehr aktiv mit der Erstellung eigenen Contents beschäftigt. Man darf gespannt sein, ob es da nicht bald etwa zu einem exklusiven Freebie für die Leser von Dr. Web und Noupe Magazine kommen könnte ;-)

Nach eigenen Aussagen wollte der Gründer von Freepik, der Spanier Alejandro Sánchez Blanes, der Design Community etwas zurück geben für die große Unterstützung, deren er und sein Team sich in den letzten Jahren erfreuen durften. CSS Matic ist dieses Geschenk an die Community.

Ursprünglich ersonnen, um Standardaufgaben des Freepik-Teams rationeller zu gestalten, kann die Tool-Sammlung CSS Matic seit kurzem von jedermann kostenlos verwendet werden. Und in der Tat ist CSS Matic in der Lage, so manches andere Tool locker zu ersetzen. Mir persönlich gefällt dabei am besten, dass man den Werkzeugen anmerkt, dass sie einen frischen Ansatz, schon von der UI her, verfolgen. CSS-Tools gibt es immerhin einige, darunter viele, die offenbar seit Jahren von ihren Entwicklern nicht mehr angeschaut wurden.

CSS Matic – Verläufe erstellen, Rahmen gestalten, Schlagschatten definieren, Texturen entwerfen

Zugegebenermaßen ist nicht jedes Helferlein aus dem Vierkant-Portfolio CSS Matics gleichermaßen nützlich oder gleichermaßen hochwertig umgesetzt. Die Reihenfolge der Präsentation auf der Website wird der Wertigkeit der Tools in etwa gerecht.

CSS Matic – Gradient Generator

Der Verlaufs-Generator ist mit Abstand das ausgefeilteste Tool der Sammlung. Verläufe lassen sich auf der Basis etlicher Presets oder komplett from scratch entwickeln. Dabei sind auch Verläufe über mehrere Farben möglich und werden visuell über Ankerpunkte zurecht geschoben. Der Farbraum ist wählbar, Sättigungswerte und weiteres sind anpassbar. Der fertige Verlauf kann als CSS oder sogar als Sass exportiert werden. Mitexportiert werden können auf Anforderung auch die Code-Kommentare, die etwa das Prefixing erläutern. Nützlich für Entwickler, die CSS nicht atmen.

CSS Matic – Border Radius

Weit weniger aufwändig, dabei aber nicht minder nützlich, ist das Tool „Border Radius“. Dieses erlaubt die Erstellung von CSS-Rahmen, die für jede Ecke unterschiedlich, aber auch simpel rundherum einheitlich visuell definiert werden können. Der entstehende CSS-Code ändert sich bei Manipulationen live mit und kann über die Zwischenablage in das eigene Projekt übernommen werden.

CSS Matic – Noise Texture

Unter dem Punkt „Noise Texture“ schiebt man sich eine Textur auf einem farbigen oder transparenten Hintergrund zusammen, die dann als PNG mit dem entsprechenden CSS exportiert werden kann. Die Farbe des Hintergrunds, die Farbe des Rauschens, sowie Transparenzen und Dichte des Rauscheffekts kann ebenso definiert werden, wie die Pixelwerte des zu erzeugenden PNG.

CSS Matic – Box Shadow

Natürlich darf auch der Klassiker unter den CSS-Tools nicht fehlen, der Schlagschatten-Generator. Jeder Entwickler kennt mittlerweile bald ein halbes Dutzend davon. Die gute Nachricht: Der Schlagschatten-Generator von CSS Matic braucht sich nicht zu verstecken. Alle wichtigen Parameter stehen zur Konfiguration bereit. Der CSS-Code kann über die Zwischenablage auskopiert werden und berücksichtigt, wie alle anderen Tools des Kastens das auch tun, etwa erforderliches Browser-Prefixing.

Alles in allem sollte CSS Matic in der Bookmark-Liste engagierter Web Developer einen festen Platz erhalten. Man spart sich ein paar weitere Dienste. Zudem entwickelt Freepik in letzter Zeit einen Drive, der soviel Elan repräsentiert, dass es mich nicht wundern würde, wenn CSS Matic funktional noch lange nicht am Ende der Fahnenstange angekommen wäre. Insofern lohnt es sicher, den Service im Auge zu behalten.

Links zum Beitrag

• The Ultimate CSS Tools For Developers | CSS Matic
• Freepik: Suchmaschine für kostenlose Design-Ressourcen | Dr. Web Magazin