Beiträge von Juni 2014

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

will it blend?

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-mode
  • isolation
  • background-blend-mode

Sehen 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

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

box-shadow und linear-gradient für harte Übergänge

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.

Weiterlesen

Browserhandling in Compass 1.0

Compass

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

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

vertikal zentriert

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