Sehr geehrte Kunden,
heute möchte ich Ihnen einen grafischen Effekt vorstellen, den unser Entwickler Tobias Nerger selbst entwickelt hat. Vielen Dank an der Stelle für diese tolle Arbeit!
[html] [/html]
Mit diesem spiegelndem Effekt lassen sich z.B. Startseitenbanner:
oder auch Grafiken über den Suchergebnissen:
edel und doch unauffällig aufwerten.
Der Einbau in eigene Grafiken aber auch DIVs mit Text-Inhalten ist denkbar einfach! Jquery ist ohnehin in jedem Shop ja mittlerweile Standard. Hier ein Beispielcode, wir er in einem HTML-Include, Banner, Startseiten-Infotyp usw.. eingesetzt werden kann:
Das Objekt, dass diesen Effekt bekommen soll, muss also mit einem DIV und "class=sp_sparkle" umschlossen werden.
Der "opacity"-Wert ist in dem Beispiel auf 0.05 bis 0.1 eingestellt. Diesen Wert kann man anheben, wenn die Balken nicht ganz so durchsichtig sein sollen. Die background-Farbe könnte auch farbige Balken generieren, wenn man aus "white" einen entsprechenden Farbwert macht. Der box-shadow sorgt für weichere Kanten der Balken, damit sehen diese natürlicher aus.
heute möchte ich Ihnen einen grafischen Effekt vorstellen, den unser Entwickler Tobias Nerger selbst entwickelt hat. Vielen Dank an der Stelle für diese tolle Arbeit!
[html] [/html]
Mit diesem spiegelndem Effekt lassen sich z.B. Startseitenbanner:
oder auch Grafiken über den Suchergebnissen:
edel und doch unauffällig aufwerten.
Der Einbau in eigene Grafiken aber auch DIVs mit Text-Inhalten ist denkbar einfach! Jquery ist ohnehin in jedem Shop ja mittlerweile Standard. Hier ein Beispielcode, wir er in einem HTML-Include, Banner, Startseiten-Infotyp usw.. eingesetzt werden kann:
<style>
.sp_sparkle div.sparkle_balken{width:2px !important;;opacity:0.05;}
.sp_sparkle div{background:white;opacity:0.1;box-shadow: 0px 0px 12px #ffffff;position:absolute;}
</style>
<div class=sp_sparkle><img src=https://cdn.powergap.de/start_1.jpg"></div>
<script src=x_sparkle.js></script>
.sp_sparkle div.sparkle_balken{width:2px !important;;opacity:0.05;}
.sp_sparkle div{background:white;opacity:0.1;box-shadow: 0px 0px 12px #ffffff;position:absolute;}
</style>
<div class=sp_sparkle><img src=https://cdn.powergap.de/start_1.jpg"></div>
<script src=x_sparkle.js></script>
Das Objekt, dass diesen Effekt bekommen soll, muss also mit einem DIV und "class=sp_sparkle" umschlossen werden.
Der "opacity"-Wert ist in dem Beispiel auf 0.05 bis 0.1 eingestellt. Diesen Wert kann man anheben, wenn die Balken nicht ganz so durchsichtig sein sollen. Die background-Farbe könnte auch farbige Balken generieren, wenn man aus "white" einen entsprechenden Farbwert macht. Der box-shadow sorgt für weichere Kanten der Balken, damit sehen diese natürlicher aus.