Kategorien
Design HTML/CSS

CSS Matic – „What You See Is What You Get“ für die CSS-Entwicklung

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.

cssmatic-homepage

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.

freepik-startseite

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

cssmatic-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

cssmatic-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

cssmatic-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

cssmatic-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

Kategorien
(Kostenlose) Services Essentials Icons & Fonts

The Noun Project: Icons für jeden Zweck als globale Wikipedia für Piktogramme

The Noun Project, zu deutsch: das Hauptwort-Projekt, entstand Ende 2010 als erfolgreiches Kickstarter-Venture. Ziel des Projekts ist die Erschaffung einer visuellen Sprache, die international verstanden wird und nicht auf zusätzliche Erklärungen in Wortform angewiesen ist. Lässt man den ganzen teil-ideologischen Overhead beiseite, handelt es sich schlicht um eine große Sammlung von Icons zu jedem erdenklichen Thema. Diese Sammlung kann kostenfrei von jedermann genutzt werden.

The Noun Project: Schnell wachsendes Icon-Verzeichnis mit vielen, stark unterschiedlichen Symbolen

Wer möchte, betrachtet The Noun Project, wie eben bereits vorgeschlagen, schlicht als große Sammlung freier Icons und Icon-Sets. Damit liegt man nicht verkehrt. Alle Icons stehen als einzelne SVG-Dateien zum Download bereit. So können Sie mit entsprechender Vektor-Software bearbeitet, insbesondere frei skaliert werden, was für moderne Retina-Displays wichtige Voraussetzung ist.

Icons in The Noun Project stehen unter einer von drei möglichen Lizenzen. Etwa die Hälfte aller verfügbaren Symbole steht unter Public Domain Lizenz, kann also völlig frei, ohne jede Quellenangabe verwendet werden. Die andere Hälfte teilt sich zwischen zwei CC-Lizenzen auf.

Die eine, die CC0 entspricht inhaltlich der Public Domain Lizenz, ist dabei aber angelegt, dessen Schwächen, insbesondere in Bezug auf die international unterschiedlichen Rechtslagen, auszugleichen. Die CC-BY Lizenz erlaubt ebenfalls den kostenfreien Einsatz zu privaten und kommerziellen Zwecken, verlangt dabei jedoch die Attribution, also die Nennung der Herkunft und des Erstellers im Wege eines textlichen Zusatzes in Printprodukten und im Wege eines Links bei Online-Publikationen. Die jeweils zu verwendende Attribution ist an jedem so zu verwendenden Icon direkt platziert und kopierbar.

Wer Icons verwenden möchte, die unter CC-BY lizenziert sind, jedoch die Attribution nicht vornehmen möchte oder kann, der hat seit kurzem die Option, das entsprechende Icon kaufen. Der Einheitspreis scheint bei 1,99 Dollar zu liegen. Zumindest ist mir kein anderer Preis untergekommen. Nach Zahlung dieser Lizenzgebühr ist der Verwender berechtigt, den Link zum eigentlichen Urheber bzw. die textliche Nennung zu unterlassen.

Wer glaubt, dass eine korrekte Benennung der Ersteller aller etwa verwendeten Icons schwierig sein könnte, der hat nur dann Recht, wenn es sich um die Verwendung einer Vielzahl von Icons unterschiedlichster Ersteller etwa auf einem einseitigen Poster, einem Flyer oder einer Visitenkarte handelt. Dort wird es in der Tat rein faktisch schwierig, überhaupt den erforderlichen Platz zu finden.

In größeren Projekten, etwa Websites, Büchern oder Zeitschriften kann die Linksetzung, respektive textliche Nennung auf Unterseiten, wie einer Seite mit Credits oder einer About-Page oder dem Impressum gesammelt erfolgen. Eine entsprechende Informationsseite im Noun Project informiert dezidiert über die Erfordernisse und Möglichkeiten.

Das Besondere an den Inhalten des Noun Projects ist, dass es sich nicht auf Mainstream-Icons fokussiert, wie das 99% aller sonst üblichen Icon-Verzeichnisse tun. Stattdessen werden, nicht zuletzt im Rahmen sogenannter Iconathons, spezielle Themengebiete konzentriert bearbeitet und mit visuellen Elementen erschlossen. Die Ergebnisse der Iconathons stehen stets als Public Domain frei zur Verfügung. Im Blog des Noun Project informieren die Organisatoren über anstehende und vergangene Iconathons und deren Zielsetzung. Illustre Gastgeber, meist aus dem öffentlichen Bereich oder aus der Wohlfahrt, wie zum Beispiel das Rote Kreuz, stellen den jeweiligen Rahmen bereit.

Neben dieser populären Methode, den Fundus der Kollektion zu erhöhen, kann über ein simples Upload-Formular jeder selbst zum Wachstum der Seite beitragen. Besonders interessant finde ich, dass man am jeweiligen Icon die Möglichkeit hat, eine eigene Alternative anzubieten. So kann eine gezielte Verbesserung der Qualität des Verzeichnisses in Angriff genommen werden.

Mittlerweile stehen deutlich mehr als 3.000 Symbole zum Download bereit, Tendenz stark steigend. Icons findet man über ein Suchfeld oder indem man durch den Bestand blättert, der nach verschiedenen Kriterien sortiert werden kann.

The Noun Project will eine visuelle Sprache für die ganze Welt etablieren

So, damit ist der objektive Teil des Dienstes hinreichend erklärt. Kommen wir zurück zur Zielsetzung des Noun Project. Das folgende Video, gehostet auf Vimeo, vermittelt einen Eindruck:

The Noun Project tritt demnach zu nichts geringerem an, als eine global verständliche Bildersprache zu erschaffen. Es geht mithin auf seinem Gebiet den Wikipedia-Weg, will dabei jedoch Sprachbarrieren elegant zu Fall bringen. Nach der Theorie, dass ein Bild mehr sagt als tausend Worte, soll The Noun Project weltweit für die Völkerverständigung sorgen.

Das ist eine zweifellos interessante Idee. Sicherlich ist es in multikulturellen Gesellschaften nützlich, wenn man Piktogramme zur Verfügung hat, die unabhängig von Sprachen funktionieren. Dass das weltweit funktionieren kann, darf indes durchaus bezweifelt werden. Denn immerhin gibt es sogar in der Symbolik mindestens kulturelle Unterschiede. Viele Piktogramme werden zudem in manchen Teilen der Welt gar nicht benötigt und schon aus diesem Grunde im Auftretensfalle auch nicht verstanden.

So bereiteten mir als wenig exotischem West-Europäer etliche Symbole, etwa zur Beschilderung rumänischer Wälder oder der Rikshas aus Bangladesh spontane Verständnisprobleme, die nur durch Nachlesen der Intentionen zu beheben waren. Auch das Cheburashka-Icon ruft in mir keinen Aha-Effekt hervor…


Cheburashka: Na, wer das nicht versteht…

Insofern will ich den Machern den ideologischen Overhead gern lassen. Es fühlt sich vielleicht besser an, so ein Schild vor sich herzutragen; irgendwie historisch, von der Bedeutung her. Allerdings sollte man selbst, als Endanwender, mit gestutzten Erwartungen an das Verzeichnis gehen. Eine tolle Icon-Ressource ist es in jedem Falle…

Links zum Beitrag:

Screenshots im Überblick: