{"id":535,"date":"2014-02-18T23:12:40","date_gmt":"2014-02-18T22:12:40","guid":{"rendered":"http:\/\/paulchr.ablass.me\/blog\/?p=535"},"modified":"2014-02-18T23:12:40","modified_gmt":"2014-02-18T22:12:40","slug":"color-stops-in-verlaeufen-an-der-selben-position-bei-unterschiedlich-hohen-elementen","status":"publish","type":"post","link":"https:\/\/paulchr.ablass.me\/blog\/2014\/02\/18\/color-stops-in-verlaeufen-an-der-selben-position-bei-unterschiedlich-hohen-elementen\/","title":{"rendered":"color stops in Verl\u00e4ufen an der selben Position bei unterschiedlich hohen Elementen"},"content":{"rendered":"<h3>Das Problem<\/h3>\n<p>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 <a href=\"https:\/\/developer.mozilla.org\/de\/docs\/Web\/CSS\/radial-gradient\">kreisf\u00f6rmige<\/a> als auch <a href=\"https:\/\/developer.mozilla.org\/de\/docs\/Web\/CSS\/linear-gradient\">lineare Verl\u00e4ufe<\/a> mit Css umgesetzt werden. Der <a href=\"http:\/\/www.colorzilla.com\/gradient-editor\/\">Ultimate CSS Gradient Generator<\/a> ist ein wunderbares Tool zur Umsetzung solcher Verl\u00e4ufe. Der ben\u00f6tigte lineare Verlauf sieht so aus:<\/p>\n<pre><code>background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 15%,rgba(0,0,0,0.75) 20%,rgba(0,0,0,0.85) 25%,rgba(0,0,0,0.95) 30%,rgba(0,0,0,1) 45%,rgba(0,0,0,1) 100%);<\/code><\/pre>\n<p>Der Verlauf wird dadurch einwandfrei gezeichnet- aber es gibt ein Problem: Auf unterschiedlich hohen Seiten sind die <a href=\"https:\/\/developer.mozilla.org\/de\/docs\/Web\/CSS\/linear-gradient#Gradient_with_multiple_color_stops\"><em>color stops<\/em><\/a> zwar prozentual an der selben Position, nicht aber wenn es um die tats\u00e4chliche Position in Pixeln vom Beginn der Seite geht. 15% von 1000 Pixel entspricht nat\u00fcrlich einem anderen Wert als 15% von 833 Pixel. Ich habe eine <a href=\"http:\/\/paulchr.ablass.me\/demo\/linear-gradient-colorstops-px\/\">Demo-Seite<\/a> gebaut, auf der das Problem grafisch aufbereitet gezeigt wird.<\/p>\n<h3>Die L\u00f6sung(en)<\/h3>\n<p>Es gibt mindestens zwei L\u00f6sungswege f\u00fcr dieses Problem. Der eine besteht darin, dem Verlauf eine Gr\u00f6\u00dfe zuzuweisen, w\u00e4hrend die andere L\u00f6sung mit Pixelwerten f\u00fcr die Position der <em>color stops<\/em> arbeitet.<\/p>\n<h4>Die Gr\u00f6\u00dfe des Hintergrunds begrenzen<\/h4>\n<p>Mit der <code><a href=\"https:\/\/developer.mozilla.org\/de\/docs\/Web\/CSS\/background-size\">background-size<\/a><\/code>-Eigenschaft kann die Gr\u00f6\u00dfe eines Hintergrunds angegeben werden. Da ich in meinem Fall die H\u00f6he des Verlaufs auf 650 Pixel begrenzen wollte, habe ich folgendes probiert:<\/p>\n<pre><code>background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 15%,rgba(0,0,0,0.75) 20%,rgba(0,0,0,0.85) 25%,rgba(0,0,0,0.95) 30%,rgba(0,0,0,1) 45%,rgba(0,0,0,1) 100%);\r\nbackground-size: 100% 650px;<\/code><\/pre>\n<p>Dadurch wird gew\u00e4hrleistet, dass der Verlauf sich nicht mehr der Seitenh\u00f6he anpasst, sondern exakt 650 Pixel in der H\u00f6he annimmt. Das bringt allerdings ein neues Problem mit sich: Sobald die Seite h\u00f6her als 650 Pixel ist, fehlt ab dieser Position der Hintergrund. Der Verlauf h\u00f6rt eiskalt auf und bleibt von 651 Pixel bis (beliebig hohe Zahl &lt; 651 Pixel) transparent. Das Hinzuf\u00fcgen einer Hintergrundfarbe mittels <code>background-color<\/code> funktioniert leider nicht, da diese ansonsten den (semi-)transparenten oberen Teil des Verlaufs \u00fcberlagert.<br \/>\nDaher schied diese L\u00f6sung leider aus und ein anderer Versuch musste unternommen werden, den Verlauf auf die gew\u00fcnschte Art und Weise zeichnen zu lassen.<\/p>\n<h4>Pixelwerte in der Verlaufs-Eigenschaft<\/h4>\n<p>Beim Herumexperimentieren mit der Gr\u00f6\u00dfe des Verlaufs entwickelte sich eine Idee: W\u00e4re es nicht auch m\u00f6glich, die Position der <em>color stops<\/em> Pixel zu definieren? Damit sollten die <em>color stops<\/em> auch bei verschieden hohen Verl\u00e4ufen an der selben Position stehen. Gesagt, getan:<\/p>\n<pre><code>background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 98px,rgba(0,0,0,0.75) 163px,rgba(0,0,0,0.85) 195px,rgba(0,0,0,0.95) 228px,rgba(0,0,0,1) 293px,rgba(0,0,0,1) 100%);<\/code><\/pre>\n<p>Wie auf der <a href=\"http:\/\/paulchr.ablass.me\/demo\/linear-gradient-colorstops-px\/\">Demo-Seite<\/a> ersichtlich ist, funktioniert diese Methode ausgezeichnet und l\u00f6st das Problem.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 Umsetzung solcher Verl\u00e4ufe. Der ben\u00f6tigte [&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],"tags":[155,157,156,154],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2Vohc-8D","jetpack-related-posts":[{"id":608,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/04\/24\/css3-verlaeufe-als-grafik-exportieren\/","url_meta":{"origin":535,"position":0},"title":"Css3-Verl\u00e4ufe als Grafik exportieren","author":"Paul-Christian Abla\u00df","date":"24. April 2014","format":false,"excerpt":"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\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":535,"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":535,"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":132,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/02\/24\/responsive-iframe-und-video-elemente\/","url_meta":{"origin":535,"position":3},"title":"Responsive iframe- und video-Elemente","author":"Paul-Christian Abla\u00df","date":"24. Februar 2013","format":false,"excerpt":"Beim Einbetten von Videos innerhalb von iframe- oder video-Elementen in responsiven Websites gibt es in der Regel Probleme bei einer Gr\u00f6\u00dfenver\u00e4nderung ihres Containerelements. Obwohl die Breite des iframe's mittels der Css-Eigenschaft max-width auf 100% gesetzt werden kann, ist davon nicht dessen H\u00f6he betroffen. Um dieses Problem zu beheben, gibt es\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":281,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/04\/25\/lesetipp-magic-numbers-in-css\/","url_meta":{"origin":535,"position":4},"title":"Lesetipp: Magic Numbers in CSS","author":"Paul-Christian Abla\u00df","date":"25. April 2013","format":false,"excerpt":"Als Nicht-Informatiker kannte ich den Begriff der magischen Zahl bisher nicht, wohl aber das Problem: Bestimmte Zahlenwerte, die nur in Browser A mit Schriftgr\u00f6\u00dfe B, Schriftart C und Zoomstufe D funktionieren. Sei es top: 42px;, um ein Flyout-Men\u00fc haargenau unterhalb des Schriftzuges seines Elternelements zu positionieren oder auch letter-spacing: -4px;\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":185,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/03\/20\/compass-und-das-wordpress-eigene-style-css\/","url_meta":{"origin":535,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/535"}],"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=535"}],"version-history":[{"count":8,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/535\/revisions"}],"predecessor-version":[{"id":555,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/535\/revisions\/555"}],"wp:attachment":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/media?parent=535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/categories?post=535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/tags?post=535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}