{"id":608,"date":"2014-04-24T22:19:04","date_gmt":"2014-04-24T20:19:04","guid":{"rendered":"http:\/\/paulchr.ablass.me\/blog\/?p=608"},"modified":"2014-04-24T22:19:04","modified_gmt":"2014-04-24T20:19:04","slug":"css3-verlaeufe-als-grafik-exportieren","status":"publish","type":"post","link":"https:\/\/paulchr.ablass.me\/blog\/2014\/04\/24\/css3-verlaeufe-als-grafik-exportieren\/","title":{"rendered":"Css3-Verl\u00e4ufe als Grafik exportieren"},"content":{"rendered":"<p>Der Export von Verl\u00e4ufen aus Grafiken in Css3 ist dank Tools wie dem <a href=\"http:\/\/www.colorzilla.com\/gradient-editor\/\">Ultimate CSS Gradient Generator<\/a> ein Kinderspiel. Manchmal besteht jedoch die Notwendigkeit, diesen Prozess umzukehren und einen Css3-Verlauf in eine Grafik umzuwandeln. Bislang kannte ich nur zwei M\u00f6glichkeiten, dies zu bewerkstelligen:<\/p>\n<ul>\n<li>Einen Screenshot des Verlaufs anfertigen. Diese Methode ist jedoch ungeeignet, wenn der Verlauf Transparenzen enth\u00e4lt.<\/li>\n<li>Den Verlauf in Photoshop\/ dem Grafikprogramm der Wahl nachbauen. Bei Verl\u00e4ufen mit vielen <em>color stops<\/em> und Transparenzen ist das allerdings ein Heidenaufwand und auch ziemlich <del datetime=\"2014-04-24T15:03:27+00:00\">langweilig<\/del> <ins datetime=\"2014-04-24T15:03:27+00:00\">monoton<\/ins><\/li>\n<\/ul>\n<p>Darum habe ich mich etwas schlau gemacht und eine unglaublich einfache Methode gefunden, bei der die Art des Verlaufs (viele <em>color stops<\/em>, Transparenzen) keine Rolle spielt und die au\u00dferdem noch sehr schnell geht.<\/p>\n<h3>tl;dr<\/h3>\n<p>In Kurzform: Mit dem PhantomJS-Task <em>rasterize<\/em> wird der in einer separaten Datei liegende Verlauf gerendert und der Output als .png-Datei abgespeichert.<\/p>\n<h3>PhantomJS unter Mac OS X installieren<\/h3>\n<p><a href=\"http:\/\/phantomjs.org\/\">PhantomJS<\/a> bezeichnet sich selbst als <q><em>headless WebKit scriptable with a JavaScript API<\/em><\/q>. Dahinter steckt eine \u00fcber das Terminal bedienbare Webkit-Engine ohne GUI, mit der beispielsweise Tasks f\u00fcr Tests oder Screenshots automatisiert werden k\u00f6nnen.<\/p>\n<p>Die Installation ist schnell erledigt: Gem\u00e4\u00df Anleitung <a href=\"http:\/\/ariya.ofilabs.com\/2012\/02\/phantomjs-and-mac-os-x.html\">PhantomJS and Mac OS X<\/a> wird ein Zip-Archiv heruntergeladen, entpackt und die ausf\u00fchrbare PhantomJS-Datei in den Ordner <code>\/usr\/bin\/local\/<\/code> (<a href=\"http:\/\/en.wikipedia.org\/wiki\/PATH_%28variable%29\">$PATH<\/a>) verschoben.<br \/>\nDa PhantomJS f\u00fcr seine Tasks auf JavaScript- oder Coffeescript-Dateien zur\u00fcckgreift und ich diese nicht in <code>\/usr\/bin\/local\/<\/code> rumliegen lassen wollte, habe ich einen anderen Ordner als Speicherort gew\u00e4hlt und einen auf <code>\/usr\/bin\/local\/<\/code> verweisenden <a href=\"http:\/\/de.wikipedia.org\/wiki\/Symbolische_Verkn%C3%BCpfung\">Symlink<\/a> erstellt.<\/p>\n<pre><code>$ sudo ln -s \/Pfad\/zu\/PhantomJS \/usr\/local\/bin\/<\/code><\/pre>\n<h3>Eine Website rendern und den Output als .png speichern<\/h3>\n<p>Im extrahierten Zip-Archiv befindet sich auch ein <code>examples<\/code>-Verzeichnis, in dem die Datei <a href=\"https:\/\/github.com\/ariya\/phantomjs\/blob\/master\/examples\/rasterize.js\">rasterize.js<\/a> liegt. Diese beinhaltet den ben\u00f6tigten PhantomJS-Task, der eine Website rendert und den Output in einem definierbaren Dateiformat speichert (mehr dazu auf der Seite <a href=\"https:\/\/github.com\/ariya\/phantomjs\/wiki\/Screen-Capture\">Screen Capture<\/a> im PhantomJS-Wiki).<br \/>\nUm nun allein den Verlauf abzuspeichern, muss dieser in vanilla Css in einer Beispiel-Html-Datei eingebunden werden. Ich habe mir dazu eine Datei <code>gradient2image.html<\/code> erstellt, die lediglich folgenden Code beinhaltete:<\/p>\n<pre><code>&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\" \/&gt;\r\n    &lt;title&gt;gradient2image&lt;\/title&gt;\r\n    &lt;style&gt;\r\n      html,\r\n      body {\r\n        margin: 0;\r\n        padding: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 45px,rgba(0,0,0,0.75) 60px,rgba(0,0,0,0.85) 75px,rgba(0,0,0,0.95) 90px,rgba(0,0,0,1) 135px,rgba(0,0,0,1) 100%);\r\n       background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 45px,rgba(0,0,0,0.75) 60px,rgba(0,0,0,0.85) 75px,rgba(0,0,0,0.95) 90px,rgba(0,0,0,1) 135px,rgba(0,0,0,1) 100%);\r\n      }\r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\n<p>Zu beachten ist dabei, dass PhantomJS eine vollwertige Webkit-Engine mit allen St\u00e4rken und Schw\u00e4chen ist- daher m\u00fcssen auch <em>vendor prefixes<\/em> angegeben werden, da es ansonsten vorkommen kann dass der Verlauf nicht angezeigt wird.<\/p>\n<p>Nachdem die Datei angelegt ist, wird der rasterize-Task vom entsprechenden Ordner mit der Option, den Output als .png-Datei zu speichern, ausgef\u00fchrt.<\/p>\n<pre><code>$ phantomjs rasterize.js \/Pfad\/zur\/gradient2image.html \/gew\u00fcnschter\/Output-Pfad\/f\u00fcr\/rasterize-output.png<\/code><\/pre>\n<p>Et voil\u00e0- da ist er, der Verlauf. Sauber exportiert von Css3 in eine .png-Datei.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Der Export von Verl\u00e4ufen aus Grafiken in Css3 ist dank Tools wie dem Ultimate CSS Gradient Generator ein Kinderspiel. Manchmal besteht jedoch die Notwendigkeit, diesen Prozess umzukehren und einen Css3-Verlauf in eine Grafik umzuwandeln. Bislang kannte ich nur zwei M\u00f6glichkeiten, dies zu bewerkstelligen: Einen Screenshot des Verlaufs anfertigen. Diese Methode ist jedoch ungeeignet, wenn der [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[77,75],"tags":[155,166,154],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2Vohc-9O","jetpack-related-posts":[{"id":535,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/02\/18\/color-stops-in-verlaeufen-an-der-selben-position-bei-unterschiedlich-hohen-elementen\/","url_meta":{"origin":608,"position":0},"title":"color stops in Verl\u00e4ufen an der selben Position bei unterschiedlich hohen Elementen","author":"Paul-Christian Abla\u00df","date":"18. Februar 2014","format":false,"excerpt":"Das Problem In einem aktuellen Projekt kann auf Unterseiten einer Website ein Hintergrundverlauf zugeschaltet werden, der von transparent zu schwarz \u00fcbergeht. Das ist erst einmal kein Problem, immerhin k\u00f6nnen mittlerweile sowohl kreisf\u00f6rmige als auch lineare Verl\u00e4ufe mit Css umgesetzt werden. Der Ultimate CSS Gradient Generator ist ein wunderbares Tool zur\u2026","rel":"","context":"In &quot;Css&quot;","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":286,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/05\/05\/img-elemente-mit-inset-box-shadow-stylen-ein-workaround\/","url_meta":{"origin":608,"position":1},"title":"img-Elemente mit inset box-shadow stylen- ein Workaround","author":"Paul-Christian Abla\u00df","date":"5. Mai 2013","format":false,"excerpt":"[Editors Note: Es gibt eine Demo box-shadow inset f\u00fcr img-Elemente] In einem Design, dass ich vor kurzem umsetzen musste, gab es jede Menge Bilder die einen nach innen liegenden Schlagschatten aufwiesen. Einfache Sache, dachte ich mir: Dem img-Element einfach einen box-shadow mit der Eigenschaft inset zuweisen\u2013 et voil\u00e0, die Sache\u2026","rel":"","context":"In &quot;Css&quot;","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":644,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/06\/06\/compass-mehrere-css-transformationen-verknuepfen\/","url_meta":{"origin":608,"position":2},"title":"Compass: Mehrere Css-Transformationen verkn\u00fcpfen","author":"Paul-Christian Abla\u00df","date":"6. Juni 2014","format":false,"excerpt":"Compass bietet out of the box eine ganze Reihe von Mixins zur einfachen Nutzung von verschiedenen Css-Transformationen an. Leider gibt es bei der B\u00fcndelung dieser Transformationen in einem Mixin einige kleine Fallstricke, die ich erst nach und nach entdeckt habe und aus Archivierungsgr\u00fcnden festhalten m\u00f6chte. Die transform()-Mixins von Compass Es\u2026","rel":"","context":"In &quot;Tools&quot;","block_context":{"text":"Tools","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/tools\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":185,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/03\/20\/compass-und-das-wordpress-eigene-style-css\/","url_meta":{"origin":608,"position":3},"title":"Compass und das WordPress-eigene style.css","author":"Paul-Christian Abla\u00df","date":"20. M\u00e4rz 2013","format":false,"excerpt":"In WordPress-Themes muss innerhalb des Theme-Root-Verzeichnis' ein Stylesheet namens style.css liegen, ansonsten wird das entsprechende Theme nicht erkannt. Dies ist innerhalb meines normalen Compass-Setups nicht ganz unproblematisch, da ich normalerweise alle Stylesheets im Ordner css\/ lagere, also auch das normale style.css. Meine bisherige L\u00f6sung sah so aus, dass ich im\u2026","rel":"","context":"In &quot;Tools&quot;","block_context":{"text":"Tools","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/tools\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":696,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/07\/16\/ttxfonttools-auf-dem-mac-installieren\/","url_meta":{"origin":608,"position":4},"title":"TTX\/FontTools auf dem Mac installieren","author":"Paul-Christian Abla\u00df","date":"16. Juli 2014","format":false,"excerpt":"Was ist TTX\/FontTools? TTX\/FontTools ist ein kostenloses Kommandozeilenprogramm, dass Schriften im TrueType- und OpenType-Format in XML-Dateien umwandelt und dadurch das einfache Bearbeiten von Schriftmetadaten erm\u00f6glicht. Beispielsweise kann so unter anderem der Schriftname ver\u00e4ndert werden- ein Feature, dass ich heute ben\u00f6tigt habe. Wie installiere ich es? Von der Projektseite muss das\u2026","rel":"","context":"In &quot;Tools&quot;","block_context":{"text":"Tools","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/tools\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":337,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/07\/18\/initial-werte-fuer-css-eigenschaften\/","url_meta":{"origin":608,"position":5},"title":"Initial-Werte f\u00fcr Css-Eigenschaften","author":"Paul-Christian Abla\u00df","date":"18. Juli 2013","format":false,"excerpt":"Gelegentlich passiert es, dass mir nicht sofort der Initial-Wert f\u00fcr bestimmte Css-Eigenschaften einf\u00e4llt. Um in solchen Momenten nicht wild zu raten oder aber versehentlich einen falschen Wert aufzuschreiben (wieso das keine gute Idee ist, schreibt Divya Manian in Safe CSS Defaults), empfiehlt sich ein Blick in diese Liste von Initial-Werten\u2026","rel":"","context":"In &quot;Css&quot;","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/608"}],"collection":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/comments?post=608"}],"version-history":[{"count":4,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/608\/revisions"}],"predecessor-version":[{"id":612,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/608\/revisions\/612"}],"wp:attachment":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/media?parent=608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/categories?post=608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/tags?post=608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}