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).
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.
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.
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. (http://dev.opera.com/articles/getting-to-know-css-blend-modes/demo_blendmodes_tile.html). 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
jQuery UI bietet schöne Komponenten für Benutzeroberflächen direkt zum Einsatz. Und die Formatierungen lassen über den ThemeRoller individuell gestalten. Wie das geht und wie sich die Komponenten an die eigenen Bedürfnisse anpassen lassen, zeige ich in meinem Videotraining bei LinkedIn Learning.
Weiterlesen
Es gibt verschiedene schöne Einsatzbeispiele für die Blendmodi. Faszinierend ist die Möglichkeit für Muster, die sich aus der Kombination von Farbverläufen mit Blendmodi ergibt.
Neben background-blend-mode zum Mischen von Hintergründen existiert in CSS3 die Eigenschaft mix-blend-mode. Diese Eigenschaft dient nicht zum Mischen von Hintergründen, sondern zum Vermischen von Eltern- und Kindelementen. So kann man beispielsweise mix-blend-mode für Texteffekte nutzen, bei denen der Text mit dem Hintergrund verwoben ist. Weiterlesen
Ein schönes neues 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:
mix-blend-modeisolationbackground-blend-modeSehen wir uns im ersten Teil einer kleinen Artikelserie background-blend-mode an. Im zweiten Teil der Serie geht es dann um mix-blend-mode. Weiterlesen
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.
background: linear-gradient(#fff 50%, #040707 50%);
Im echten Einsatz sollten Sie zuerst eine Fallbackfarbe angeben und dann das zusätzlich mit -webkit- doppeln:
background: #040707;
background: -webkit-linear-gradient(#fff 50%, #040707 50%);
background: linear-gradient(#fff 50%, #040707 50%);
Das erzeugt eine gerade Linie, oberhalb der die erste Farbe steht, unterhalb die zweite Farbe.
Was mich häufig am Code, den CSS-Präprozessoren erzeugen, gestört hat, ist die große Anzahl an browserspezifischen Präfixen, die man so heute nicht mehr braucht. Nehmen wir einmal an, man ändert nichts an den Standardeinstellungen und benutzt das Compass-Mixin (von Compass vor Version 1) für border-radius:
@import "compass/css3";
.beispiel {
@include border-radius(25px);
}
… so erhält man das folgende Ergebnis:
.beispiel {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;
}
Ganz schön viel Code. Dabei gab es nie einen Browser, der -o-border-radius oder -ms-border-radius verstanden hätte, da der Internet Explorer und Opera direkt die Eigenschaft border-radius implementiert haben. Weiterlesen