mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 15:47 Benutzername: Passwort: Auto-Login

Thema: Web 2.0 Spiegelung (Glossy Table) mit JavaScript vom 08.03.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Tipps & Tricks für Nonprint -> Web 2.0 Spiegelung (Glossy Table) mit JavaScript
Autor Nachricht
seal
Threadersteller

Dabei seit: 31.07.2005
Ort: Pfalz
Alter: 41
Geschlecht: Männlich
Verfasst Do 08.03.2007 00:58
Titel

Web 2.0 Spiegelung (Glossy Table) mit JavaScript

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
cRime

Dabei seit: 07.05.2006
Ort: Berlin
Alter: 39
Geschlecht: Männlich
Verfasst Do 08.03.2007 02:05
Titel

Antworten mit Zitat Zum Seitenanfang

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 *Schnief*

aber zumindestens im ie sollte der effekt auch mit php machbar sein ...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Zeithase

Dabei seit: 09.05.2005
Ort: Erfurt
Alter: 39
Geschlecht: Männlich
Verfasst Do 08.03.2007 02:08
Titel

Antworten mit Zitat Zum Seitenanfang

cRime hat geschrieben:
php wird ja auch von allen browsern unterstützt.


Das war dann wohl ein ganz großes Eigentor.
  View user's profile Private Nachricht senden
seal
Threadersteller

Dabei seit: 31.07.2005
Ort: Pfalz
Alter: 41
Geschlecht: Männlich
Verfasst Do 08.03.2007 19:13
Titel

Antworten mit Zitat Zum Seitenanfang

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“ *ha ha* *Thumbs up!*
  View user's profile Private Nachricht senden
Account gelöscht


Ort: -
Alter: -
Verfasst Do 08.03.2007 20:30
Titel

Antworten mit Zitat Zum Seitenanfang

Hm. Eher ein Zerrspiegel:


 
grafzahl

Dabei seit: 13.04.2006
Ort: Magdeburg
Alter: 39
Geschlecht: Männlich
Verfasst Fr 09.03.2007 08:44
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
n1uRocK

Dabei seit: 16.04.2007
Ort: Deutscheland
Alter: -
Geschlecht: Männlich
Verfasst Di 21.04.2009 11:32
Titel

Antworten mit Zitat Zum Seitenanfang

@ 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 *Schnief*

...


kommt ebbes spät, aber mal nur mit opacity: xx; nicht: "-moz-opacity:..." versuchen. Tut. Aha!


Zuletzt bearbeitet von n1uRocK am Di 21.04.2009 11:39, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Tipps & Tricks für Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.