bildschatten erstellen

[larix]

hallo zusammen

ich habe eine tabelle und in jeder zelle befindet sich ein bild. ich möchte nun das bild mit einem schatten versehen, ohne aber das bild zu bearbeiten. welche für möglichkeiten stehen mir mit css/html/js zur verfügung?

vielen dank für die infos

larix

[void]

Du könntest um das Bild einen Border erstellen, der aussieht wie ein Schatten. Also zB rechts und unten oder links und oben einen 2px dicken Border in Grau oder Schwarz.

[pekka]

Meinst Du einen Schatten *im* Bild oder einen rechteckigen um das Bild herum? Soll der Schatten einfarbig sein, oder abgestuft?

[larix]

Als Beispiel: www.deviantart.com

Auf der Startseite werden die neuesten Bilder angezeigt und jeder Rand hat eine Schattierung. Soviel ich gesehen habe, hat deviantart das mit Javascript gelöst.

Ich möchte etwas in diesem Stil haben. Mir reicht aber der schatten am rechten unteren Rand. der Schatten sollte abgestuft sein.

void: Du könntest um das Bild einen Border erstellen, der aussieht wie ein Schatten.

Wenn ich mich nicht irre, besteht mit dem Border keine Möglichkeiten den Schatten abzustufen.

pekka: Meinst Du einen Schatten *im* Bild oder einen rechteckigen um das Bild herum? Soll der Schatten einfarbig sein, oder abgestuft?

Was meinst du genau mit *im* bild? der Schatten sollte um das Bild herum sein

grüsse larix

[Floriam]

Und was hält dich auf einfach mal bei Google zu suchen (Stichwort: Schatten mit CSS)?

Das spart uns und dir Zeit, denn es ist einfacher 10 Sekunden zu suchen als Beiträge zu schreiben...

Devian Art setzt übrigends CSS ein (soweit ich das nach einem kurzen Blick sehen kann)...


Floriam

[ghostgambler]

Original geschrieben von Floriam
Devian Art setzt übrigends CSS ein (soweit ich das nach einem kurzen Blick sehen kann)...

dachte ich auch, aber wenn man Javascript deaktiviert, verschwinden die Schatte, also ist es entweder was kominiertes oder nur JavaScript...aber 4 Skripte zu durchwühlen war mir irgendwie zu anstrengend XD"

[larix]

Original geschrieben von Floriam
Und was hält dich auf einfach mal bei Google zu suchen (Stichwort: Schatten mit CSS)?....

Ich suche nicht nach einer CSS lösung. Ich wollte wissen welche Möglichkeiten es gibt. CSS wäre eine davon. Abgesehen davon bin ich nicht mal sicher ob es möglich ist abgestufte Schatten mit CSS zu erstellen. Denn auf CSS4You.de oder evolt.org präsentieren die Lösung nur mit einer Farbe.

Original geschrieben von Floriam
Das spart uns und dir Zeit, denn es ist einfacher 10 Sekunden zu suchen als Beiträge zu schreiben...

Deine Entscheidung ob du auf den Beitrag antwortest oder nicht.

@ghostgambler
Ich hatte auch keine Lust die ganzen Scripts durchzuackern

Hat sonst noch jemand eine idee wie man bildschatten bewerkstelligen kann?

gruss larix

[wahsaga]

Original geschrieben von larix
Hat sonst noch jemand eine idee wie man bildschatten bewerkstelligen kann?

nicht nur eine, sondern mehrere - aber ...

Deine Entscheidung ob du auf den Beitrag antwortest oder nicht.

... ich habe eine entscheidung getroffen.

[Kropff]

wenn deine bilder eine einheitliche größe haben, dann erstell ein "schattenbild" in einer entsprechenden größe, definiere divs in fester breiter und höhe und packt deinen schatten per background-image in die divs, die bilder legts du drüber und haust dann noch ein padding in das div.

peter

[Floriam]

Abgesehen davon bin ich nicht mal sicher ob es möglich ist abgestufte Schatten mit CSS zu erstellen.

Nein, dass ist nicht möglich, erst bei CSS3 (soweit ich weiß, hatte CSS 3 die Möglichkeit mehrere Ränder für ein Objekt zu erstellen) und auch dort nur schlecht (nämlich indem man sämtliche Abstufungen selbst erstellt).


Trotzdem gibt es andere Möglichkeiten mithilfe von CSS und Bildern Schatten zu erstellen...


Floriam

[ghostgambler]

So, also ich war so freundlich und hab mich mal in die Weiten des deviantart Codes begeben XD
verantworlich dafür sind:
http://s.deviantart.com/styles/outside.js/3003.js
Funktion addshadow (nicht addshadows, beziehungsweise auch, aber addshadow, macht die Drecksarbeit...)
Dazu kommen 3 verschiedene Hintergrundbilder in unterschiedlichen Größen

viel mehr kann ich dir dazu auch nicht sagen, außer dass sowohl der CSS als auch der JavaScript-Code der Hammer sind (sowohl im Guten wie im Schlechten Sinne...gut wegen Funktionalität, schlecht wegen Überblick, die Jungs/Mädels kennen scheinbar auch weder Leerzeichen noch Tabstops >_> zumindest im JavaScript...)