Objekte spiegeln mit box-reflect

Bild nach unten gespiegelt

.img {
background: url(image.png) no-repeat;
-webkit-box-reflect: below 1px;
}

Bild nach rechts gespiegelt

.img {
background: url(image.png) no-repeat;
-webkit-box-reflect: right -5px;
}

Bild nach unten gespiegelt in Transparenz (75% Länge)

.img {
background: url(image.png) no-repeat;
-webkit-box-reflect: below 1px -webkit-linear-gradient(top, rgba(0,0,0,0) 25%,rgba(255,255,255,1) 100%);
}

Bild nach unten gespiegelt in Transparenz (25% Länge)

.img {
background: url(image.png) no-repeat;
-webkit-box-reflect: below 1px -webkit-linear-gradient(top, rgba(0,0,0,0) 75%,rgba(255,255,255,1) 100%);
}

Bild nach unten gespiegelt mit transparenter Bilddatei als Maske

.img {
background: url(image.png) no-repeat;
-webkit-box-reflect: below 1px url(maske.png);
}

Bild nach unten gespiegelt mit transparenter Bilddatei als Maske (radialer Farbverlauf)

.img {
background: url(image.png) no-repeat;
-webkit-box-reflect: below 1px url(maske.png);
}

Gespiegelter Text

olivergast.de

.text {
-webkit-box-reflect: below -10px -webkit-linear-gradient(top, rgba(0,0,0,0) 25%,rgba(255,255,255,1) 100%);
}

Gespiegelte Box

olivergast.de

.box {
-webkit-box-reflect: below 0px -webkit-linear-gradient(top, rgba(0,0,0,0) 50%,rgba(255,255,255,1) 100%);
}

↑ Seitenanfang