gbReflection v1.0
Mit gbReflection können Sie Bilder spiegeln. Eine Bildbearbeitung für die Spiegelung eines Bildes ist somit überflüssig. Mit einen Reflexion-Effekt werten Sie das Erscheinungsbild Ihrer Webseite erheblich auf.
Demo
» gbReflection Demo herunterladen
Einbinden
- Laden Sie die benötigt Daten » hier herunter.
- Binden Sie die JavaScript Dateien in Ihrer Seite ein.<script type="text/javascript" src="js/moo1.3.1_compile.js"></script>
<script type="text/javascript" src="js/gbreflection_compile.js"></script> - Vergeben Sie allen Bildern einen Klassennamen (z.B. class="gbreflection")<img src="img/Andromeda.jpg" alt="Andromeda" width="170" height="106" class="gbreflection" />
- Weisen Sie der Klasse noch Optionen zu, die übergeben werden sollen.
<script type="text/javascript">
var gbReflectionOpt = {
handler : 'gbreflection',
reflectionHeight : 0.2,
reflectionOpacity : 0.2,
reflectionPosition : 0.2
}
var myReflection = new gbReflection(gbReflectionOpt);
</script> - Das Aussehen können Sie per CSS verändern.<style type="text/css">
.gbreflection {
padding: 2px 2px 8px 2px;
border: 2px solid black;
border-left-color: #bababa;
border-top-color: #bababa;
}
.gbreflection_master {
padding-bottom: 2px;
border-bottom: 2px solid #ff4e00;
}
.canvas {
margin-top: 2px;
}
</style>
Erläuterung
- handler
Geben Sie hier den Klassennamen an, den Sie für die Bilder vergeben haben. - reflectionHeight
Hier können Sie die Höhe der Spiegelung einstellen. Vergeben Sie hier für die Reflexionshöhe einen Wert zwischen 0.0 und 1.0.
Z.B. 0.2 - reflectionOpacity
Dieser Wert stellt die Transparenz der Spiegelung ein. Vergeben Sie hier für die Deckkraft der Reflexion einen Wert zwischen 0.0 und 1.0.
Z.B. 0.2 - reflectionPosition
Dieser Wert stellt den Verlauf der Spiegelung ein. Vergeben Sie hier für die Position der Reflexion einen Wert zwischen 0.0 und 1.0.
Z.B. 0.2
Hinweis
Mit CSS 3 lässt sich sehr einfach eine Reflexion verwirklichen ohne JavaScript nutzen zu müssen. Allerdings können das im Moment nur Webkit Browser wie Chrome oder Safari. Die folgende CSS 3 Anweisung können Sie verwenden:
<style type="text/css">
/* Webkit (Safari, Chrome) */
.gbreflection {
-webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.8, transparent), to(#fff));
}
</style>
/* Webkit (Safari, Chrome) */
.gbreflection {
-webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.8, transparent), to(#fff));
}
</style>
