Autor |
Nachricht |
seal
Threadersteller
Dabei seit: 31.07.2005
Ort: Pfalz
Alter: 41
Geschlecht:
|
Verfasst Do 08.03.2007 00:58
Titel Web 2.0 Spiegelung (Glossy Table) mit JavaScript |
|
|
In Zeiten des Web 2.0 sieht man diesen Effekt recht häufig. Vorreiter war Apple, die „Web2null-Generation“ machts nach. Aber wer hat schon Lust und die Zeit jede Grafik in Photoshop zu bearbeiten? Die Zeit kann man in Zukunft besser nutzen.
Ein 5KB kleines JavaScript sorgt für den gewünschten Spiegelungseffekt, ist leicht integrierbar und funktioniert einwandfrei in allen aktuellen Browsern. Wurde JavaScript vom Besucher deaktiviert, werden die Bilder wie gewohnt in normaler Form dargestellt, er bekommt davon garnichts mit.
Zitat: | Reflection.js 1.6 allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean.
It works in all the major browsers - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it’ll degrade and your visitors won’t notice a thing. Best of all, it’s under 5KB |
Download und Demo
Spread the word
|
|
|
|
|
cRime
Dabei seit: 07.05.2006
Ort: Berlin
Alter: 39
Geschlecht:
|
Verfasst Do 08.03.2007 02:05
Titel
|
|
|
style="background-color:#000000; filter:Alpha(opacity=100, finishopacity=0, style=1,startx=100,starty=0,finishx=100,finishy=100);"
macht einen schwarzen verlauf von oben nach unten.
der rest also der untere bereich ist dann durchsichtig.
das ganze mit einer php funktion erweitert
(bild kopieren, spiegeln, hälfte schneiden)
und den alpha effekt drüber.
dürfte es nicht genausogut funktionieren?
php wird ja auch von allen browsern unterstützt.
leider die alpha funktion nicht, wie ich schon die erfahrung gemacht habe...
opera: opacity: 0.6;
ff: -moz-opacity: 0.6;
laut google sollten die beiden funktionen auch in firefox und opera (oder netscape, ka...) funktionieren
leider nicht bei mir
aber zumindestens im ie sollte der effekt auch mit php machbar sein ...
|
|
|
|
|
Anzeige
|
|
|
Zeithase
Dabei seit: 09.05.2005
Ort: Erfurt
Alter: 39
Geschlecht:
|
Verfasst Do 08.03.2007 02:08
Titel
|
|
|
cRime hat geschrieben: | php wird ja auch von allen browsern unterstützt. |
Das war dann wohl ein ganz großes Eigentor.
|
|
|
|
|
seal
Threadersteller
Dabei seit: 31.07.2005
Ort: Pfalz
Alter: 41
Geschlecht:
|
Verfasst Do 08.03.2007 19:13
Titel
|
|
|
cRime hat geschrieben: | aber zumindestens im ie sollte der effekt auch mit php machbar sein ... |
Is ja auch um einiges einfacher als ein 5KB JavaScript zu „laden“
|
|
|
|
|
Account gelöscht
Ort: -
Alter: -
|
Verfasst Do 08.03.2007 20:30
Titel
|
|
|
Hm. Eher ein Zerrspiegel:
|
|
|
|
|
grafzahl
Dabei seit: 13.04.2006
Ort: Magdeburg
Alter: 39
Geschlecht:
|
Verfasst Fr 09.03.2007 08:44
Titel
|
|
|
Wenn man ihm n Rahmen und n Padding wie in diesem Beispiel falsch gemacht gibt...dann schon...er spiegelt ja nur das Bild, nicht den CSS-Output.
|
|
|
|
|
n1uRocK
Dabei seit: 16.04.2007
Ort: Deutscheland
Alter: -
Geschlecht:
|
Verfasst Di 21.04.2009 11:32
Titel
|
|
|
@ cRime:
Zitat: | ...
php wird ja auch von allen browsern unterstützt.
leider die alpha funktion nicht, wie ich schon die erfahrung gemacht habe...
opera: opacity: 0.6;
ff: -moz-opacity: 0.6;
laut google sollten die beiden funktionen auch in firefox und opera (oder netscape, ka...) funktionieren
leider nicht bei mir
... |
kommt ebbes spät, aber mal nur mit opacity: xx; nicht: "-moz-opacity:..." versuchen. Tut.
Zuletzt bearbeitet von n1uRocK am Di 21.04.2009 11:39, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
Spiegelung in Flash
Photoshop Spiegelung
Rollover Button + Spiegelung
in Photoshop farbige Spiegelung entfernen
(Apple)Spiegelung mit 3D Objekten in Photoshop
<table> formatieren mit css
|
|