Blog - maurice-web

Hintergrundbilder mit halbtransparenten Farben überlagern

Geschrieben am: 5.8.2014, aktualisiert: 9.11.2022

ein Bild normal, das andere mit halbtransparenter Farbe überlagert

Letztens habe ich eine Möglichkeit gesucht, Hintergrundbilder mit einer Farbe zu überlagern. Eigentlich dachte ich, das müsste ganz einfach gehen - aber von Anfang an.

CSS3-Animationen debuggen

Geschrieben am: 30.7.2014, aktualisiert: 16.3.2022

Letztens habe ich eine Möglichkeit gesucht, CSS3-Animationen im Browser zu debuggen - und bin in den gängigen Entwicklertools nicht so recht fündig geworden. Um so erfreulicher fand ich es, als ich jetzt im Firefox Nightly die neuen Möglichkeiten entdeckt habe (ausprobiert habe ich es im Firefox Nightly 34.0a1).

CSS3-Media Queries für Einsteiger

Geschrieben am: 24.7.2014

Die wichtigste Komponente des Responsive Webdesign sind die CSS3-Media Queries. Damit kann man je nach Größe des Viewports dem Browser andere CSS-Angaben servieren. Einen Einstieg in Aufbau und Funktionsweise von Media Queries bietet das folgende Video aus meinem Videotraining "Responsive Webdesign - das große Training" von video2brain.

Quicktipp: Hoverzustand in Entwicklertools untersuchen

Geschrieben am: 16.7.2014, aktualisiert: 31.3.2022

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.

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

Geschrieben am: 11.7.2014

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.