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%);
}