Archiv

isolation: isolate: Das Vermischen bei den Blendmodi genau steuern (CSS3)

will it blend?

Gute Nachricht: Firefox 36 unterstützt die Eigenschaft isolation bei den Blendmodi. Das habe ich zum Anlass genommen, meinen Artikel zu isolation: isolate vom Juni 2014 zu aktualisieren.

In den beiden bisherigen Teilen meiner Artikelserie habe ich schon die Eigenschaft background-blend-mode und mix-blend-mode vorgestellt. Jetzt fehlt noch die Eigenschaft isolation. Bei der Eigenschaft geht es um die Frage: Mit welchen Elternelementen finden Vermischungen statt, wenn man mix-blend-mode verwendet?

Weiterlesen

Bildunterschrift an Bild anpassen mit min-content (inklusive IE)

Häufig möchte man, dass die Beschriftung zu einem Bild genauso breit wird wie das Bild selbst – und das soll möglichst natürlich auch dann funktionieren, wenn wir die Breite des Bildes nicht im Voraus wissen. Möglich wird das über den CSS3-Wert min-content. Und für den IE klappts über ein bisschen Trickserei mit Gridlayout.

Weiterlesen

CSS-Grids: Raster im IE10+ und in neuer Syntax definieren

css-grids

CSS-Grids sind das CSS3-Layoutmodul für Raster. Relevant sind heute zwei Versionen von CSS-Grids: die aktuelle Spezifikation und die veraltete Version von 2011.

Die aktuelle Version funktioniert in Chrome ab 57, in Firefox ab Version 52, in Safari 10.1 und ebenfalls in Edge ab 16.

Die veraltete Version ist im Internet Explorer 10+ und in Edge < 16 implementiert und deswegen ist diese alte Syntax heute noch relevant.

An einem kleinen Raster möchte ich ein paar Beispiele für die unterschiedliche Syntax/Herangehensweise zeigen.

Weiterlesen

CSS-Pseudoelemente der nächsten Generation

W3C Pseudo-Elements Module Level 4

Das W3C hat den Arbeitsentwurf für die CSS-Pseudoelemente überarbeitet. Ich war gespannt, welche Pseudoelemente wir in Zukunft benutzen können und habe einmal reingeschaut. Neben klassischen, schon lange bekannten Pseudoelementen findet sich im Arbeitsentwurf Nützliches wie ::selection oder ::placeholder, die bereits (teilweise in leicht modifizierter Variante) in den aktuellen Browsern funktionieren.

Im meinen Beitrag geht es neben diesen neuen Pseudolementen außerdem um die klassischen Pseudoelemente, um doppelte und einfache Doppelpunkte und um die Darstellung der Pseudoelemente in Browserentwicklertools.

Weiterlesen

7 Tipps für die Arbeit mit CSS-Shapes

CSS-Shapes ermöglichen es, Inhalte nicht-eckig umfließen zu lassen. Eine Kurzeinführung gibt es hier im Blog, eine ausführlichere Behandlung bietet ein schöner Artikel von maddesigns oder mein Offline-Artikel für die Zeitschrift web & mobile-Developer, der in der Ausgabe 1/2015 erscheint.

Hier hingegen handelt es sich nicht um eine Einführung, stattdessen habe ich ein paar Tipps für die Arbeit mit CSS-Shapes gesammelt. Darunter sind auch Dinge, über die ich bei meinen eigenen Experimenten erst einmal gestolpert bin.

Weiterlesen

Elemente mit scale() spiegeln

spiegeln mit scale()

CSS3-Transformationen sind eine schöne Sachen. Hinter die Eigenschaft transform schreibt man die gewünschte Operation wie beispielsweise rotate(), um ein Element zu drehen, oder scale(), um ein Element zu vergrößern bzw. zu verkleinern.
Die folgende Zeile

transform: scale(2);

macht ein Element etwa doppelt so groß. Entsprechend wird durch

transform: scale(0.5);

ein Element halb so groß wie ursprünglich.

Worauf man vielleicht nicht sofort kommt: Ein negative Wert bei scale() spiegelt ein Element.

Weiterlesen

Schnelleinführung in CSS3-Shapes

CSS3 Shapes

Mit CSS3-Shapes kann man Elemente nicht eckig umfließen lassen. Und das geht so:

Zuerst einmal braucht man ein Element, das umflossen werden soll. Üblicherweise nimmt man dafür ein nichtrechtickes Element, beispielsweise ein freigestelltes Bild oder ein abgerundetes Foto. Dieses Element muss gefloatet werden.

Weiterlesen

Halb feststehende Bereiche mit position: sticky

Heute sieht man häufiger folgendes Scrollverhalten: Oben gibt es einen fetten Header und darunter die Navigation. Beim Scrollen verschwindet der Header irgendwann, die Navigation bewegt sich beim Scrollen nach oben – und bleibt dort stehen. Sie verhält sich in dem Moment, wo sie oben anbekommen ist, wie ein mit position: fixed positioniertes Element. Zu Beginn jedoch, solange sie auch normal sichtbar ist, bewegt sie sich beim Scrollen normal mit.

Weiterlesen

Achtung vor veralteter Syntax bei CSS3-Farbverläufen

Achtung - veraltete Syntax für Farbverläufe

Webseiten entwickeln besteht meist zu einem nicht unerheblichen Teil daraus, Code-Schnipsel von irgendwelchen Quellen zu kopieren. Bei Farbverläufen sollte man allerdings aufpassen: An vielen Stellen findet sich im Web noch die veraltete Standardsyntax. Unterschiede zeigen sich bei der Art, wie die Richtung des Farbverlaufs angegeben wird.

Das häufig bei Webseiten die veraltete Syntax verwendet wird, hat im August 2015 sogar dazu geführt, dass Firefox wieder die Unterstützung für die veraltete Syntax mit dem -moz-Präfix ergänzt hat.

Die Standardsyntax ist die Wertangabe ohne Präfix, die üblicherweise zuletzt steht, wie etwa die linear-gradient()-Angabe im folgenden Beispiel:

background: -webkit-linear-gradient(white, blue);
background: linear-gradient(white, blue);

Bei der Farbverlaufsyntax hat es noch einmal eine Änderung gegeben, wie die Richtung des Farbverlaufs angegeben wird.

Weiterlesen