logbuch

Kategorie: Css

  • Css3-Verläufe als Grafik exportieren

    Der Export von Verläufen 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öglichkeiten, dies zu bewerkstelligen: Einen Screenshot des Verlaufs anfertigen. Diese Methode ist jedoch ungeeignet, wenn der […]

  • Lesetipp: Ein Zwischenstand zu responsive images

    A Q&A on the Picture Element ist ein guter Ausgangspunkt, um sich auf den aktuellen Stand der Entwicklung bei responsives images zu bringen. Zum einen wird ein kurzer Abriss des bisherigen Entwicklungsprozesses gegeben und zum anderen bietet der Artikel genug Links und Schlagworte für eine vertiefende Recherche. Die momentan™ angestrebte Implementierung für responsive images besteht […]

  • Lesetipp: faux bold vermeiden & verschieden fette Schriftschnitte richtig einbinden

    Gerrit van Aaken erklärt in Webfonts: Fette Fehlerquelle, wie das Einbinden von unterschiedlich fetten Schnitten einer Schrift funktioniert. Eine sehr gute, aktuelle, deutsche Zusammenfassung zu einer Technik, die zum Handwerkszeug eines Frontend Developers gehört und die leider oft falsch genutzt wird.

  • color stops in Verläufen an der selben Position bei unterschiedlich hohen Elementen

    Das Problem In einem aktuellen Projekt kann auf Unterseiten einer Website ein Hintergrundverlauf zugeschaltet werden, der von transparent zu schwarz übergeht. Das ist erst einmal kein Problem, immerhin können mittlerweile sowohl kreisförmige als auch lineare Verläufe mit Css umgesetzt werden. Der Ultimate CSS Gradient Generator ist ein wunderbares Tool zur Umsetzung solcher Verläufe. Der benötigte […]

  • Maskierungszeichen in Css

    Gelegentlich besteht die Notwendigkeit, bestimmte Zeichen(folgen) in Css zu maskieren, um zu verhindern dass sie gemäß ihres ursprünglichen Einsatzzweckes ausgeführt werden. Beispielsweise, wenn größere Codeblöcke mit dazugehörigen Kommentaren auskommentiert werden sollen: /* Auskommentierung .extended_subnav { width: 211px; position: absolute; z-index: 10; right: 0; /* Analog zum padding-right von .mod_subnav */ top: 30px; display: none; opacity: […]

  • Aggressives Firefox-Schriftcaching mit Versionsnummern austricksen

    Sämtliche Firefox-Versionen, die ich unter Ubuntu, Windows 7 und Mac OS X benutze, speichern einmal geladene Webfonts sehr aggressiv. Aggressiv bedeutet in diesem Fall, dass ein normales Löschen des Caches zum Neu-Laden der Schrift nicht ausreicht, stattdessen muss zusätzlich noch der Browser neu gestartet werden. Da dies im Entwicklungsprozess doch eher unschön ist, bin ich […]

  • Initial-Werte für Css-Eigenschaften

    Gelegentlich passiert es, dass mir nicht sofort der Initial-Wert für bestimmte Css-Eigenschaften einfällt. 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 für sehr viele Css-Eigenschaften. Eine […]

  • Sass-Mixin: rem mit px-Fallback

    Ich nutze im Css so gut wie ausschließlich rem (siehe dazu auch CSS-Tipp: rem als Einheit für Schriftgröße nutzen) als Einheit und trug das benötigte Pixel-Fallback bisher händisch ein. Mit der Zeit nervt das ziemlich, daher war ich sehr erfreut als ich vor kurzem das rem-Mixin für Sass von Hans Christian Reinl fand. Dieses Mixin […]

  • img-Elemente mit inset box-shadow stylen- ein Workaround

    [Editors Note: Es gibt eine Demo box-shadow inset für 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– et voilà, die Sache wäre geritzt. Simple Lösung, die […]

  • Lesetipp: Magic Numbers in CSS

    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öße B, Schriftart C und Zoomstufe D funktionieren. Sei es top: 42px;, um ein Flyout-Menü haargenau unterhalb des Schriftzuges seines Elternelements zu positionieren oder auch letter-spacing: -4px; zum Umgehen des Abstandes zwischen […]