Florence Maurice

Webthemen

Quicktipp: Hoverzustand in Entwicklertools untersuchen

:hover

Wenn man die Formatierungen, d.h. den CSS-Code, von Websites untersucht, möchte man oft auch den Hoverzustand von Links genauer betrachten. Auch das ist bei den gängigen Browser-Entwicklertools möglich. Die entsprechenden Optionen versteckt sich aber an unterschiedlichen Stellen.

Weiterlesen ...

CSS3-Blendmodi für Bildüberlagerungen - und Alternativen

Im Artikel von Opera zu den Blendmodi gibt es schöne Beispiele für die CSS3-Blendmodi: Bilder werden über Blendmodi verfremdet und beim Hovern sieht man das Bild im Normalzustand.

Ich habe den Effekt einmal nachgebaut und dann überlegt, wie sich ähnliche Effekte ohne CSS3-Blendmodi (mix-blend-mode funktioniert derzeit nur im Chrome/Opera mit dem Flag, im Safari ab 7.1 oder in Firefox ab Version 32) erreichen lassen. Das Ziel ist dabei immer, Bilder mit einer Farbebene zu überlagern, ohne dass die Bilder von Haus aus so verändert werden.

Weiterlesen ...

mix-blend-mode für schöne Texteffekte - Bilder und Text mischen (CSS3)

will it blend

`mix-blend-mode` kann man für Texteffekte nutzen, bei denen der Text mit dem Hintergrund verwoben ist.

Weiterlesen ...

background-blend-mode: Hintergründe mischen (CSS3)

will it blend

Ein schönes CSS3-Feature sind die Blendmodi oder Mischmodi. Damit sind Effekte ermöglicht, die man sonst nur von Bildbearbeitungssoftware kennt.

In der entsprechenden Spezifikation Compositing und Blending finden sich drei neue CSS-Eigenschaften.

Weiterlesen ...

CSS3: Harte Übergänge bei box-shadow und linear-gradient()

zweifarbige Ellipsen mit weiß/schwarz

Klassischerweise verwendet man die CSS-Farbverläufe genauso wie die CSS3-Boxschatten, um sanfte Übergänge oder verschwommene Schatten zu realisieren. Man kann sie aber auch zur Erzeugung von harten Übergängen verwenden. Für Farbverläufe gelingt das, indem man bestimmt, dass eine Farbe bis zu einer Stelle reicht und dann genau an derselben Stelle eine andere Farbe anfängt.

Weiterlesen ...

CSS: 4 Lösungen für eine vertikale Zentrierung bei unbekannter Höhe

Ich freue mich immer, wenn es über CSS3 neue Lösungen für alte Probleme gibt. Die vertikale Zentrierung von Elementen unbekannter Höhe ist so eines. Im Beitrag zeige ich 4 Lösungen - drei setzen auf CSS3, eine auf CSS 2.1. Das Ergebnis dieser vier Lösungen ist immer dasselbe: ein Element unbestimmter Höhe wird in der Mitte der Webseite angezeigt. Die Techniken sind unterschiedlich ...

Weiterlesen ...

Responsives Formular

Auch wenn heute kaum noch jemand Tabellen zu Layoutzwecken einsetzt, werden doch noch erstaunlich häufig Tabellen zur Anordnung von Formularelementen benutzt - dabei macht man das besser mit CSS.

Weiterlesen ...