Bilder und Tabellen mit Schatten [IE|M|O]

von: Werner Zenk

Schatten für Bilder und Tabellen.
Eine optische Aufwertung erhalten Bilder oder
ein Text, indem man einen Schatten hinzufügt.

Dieser Text dient
nur zur Demonstration.
Seine Funktion ist
demgemäß sehr beschränkt.

Dieser Text dient nur zur Demonstration.
Seine Funktion ist demgemäß sehr beschränkt.
Dieser Text dient nur zur Demonstration.
Seine Funktion ist demgemäß sehr beschränkt.

Quelltext (von Beispiel 2):

<table cellpadding=0 cellspacing=0>
 <tr>
  <td  style="background-color: #f9f9f9;border: solid 1px #000000;">
      Dieser Text dient nur zur Demonstration.<br>
      Seine Funktion ist demgemäß sehr beschränkt.<br> 
      Dieser Text dient nur zur Demonstration.<br>
      Seine Funktion ist demgemäß sehr beschränkt.   
  </td>
 </tr>
 <tr>
  <td style="text-align: right;">
   <img src="shadow.gif" width="270" height="13">
  </td>
 </tr>
</table>

Die Breite des Schatten-Bildes passen Sie einfach der Tabellenbreite an.

Quelltext:

<table border=1 style="border-style: none;" cellpadding=0 cellspacing=0>
 <tr>
  <td style="border: solid 1px #000000;">
   <img src="bild.gif" width="200" height="130"><br>
  </td>
 </tr>
 <tr>
  <td style="border-style: none;">
   <img src="shadow2.gif" width="200" height="13">
  </td>
 </tr>
</table>

Dieser Text dient nur zur Demonstration. Seine Funktion ist
demgemäß sehr beschränkt. Dieser Text diente nur zum Demo.

Quelltext:

<table style="border-style: none;" cellpadding=0 cellspacing=0>
 <tr>
  <td style="border: solid 1px #000000; background-color: #F3F3F3;">
Dieser Text dient nur zur Demonstration....
  </td>
 </tr>
 <tr>
  <td  style="border-style:none; text-align: right;">
   <img src="shadow3.gif" width="425" height="13">
  </td>
 </tr>
</table>

Quelltext:

<table align=center style="border-style: none;" cellpadding=0 cellspacing=0>
 <tr>
  <td style="border: solid 1px #000000;"><img src="bild.gif" width=200 height=130><br></td>
  <td style="border-style: none;">
   <img src="shadow6.gif" width="13" height="130">
  </td>
 </tr>
</table>

Die verwendeten Schatten-Bilder:



shadow.gif
111 x 13 Pixel
651 Byte


shadow2.gif
160 x 6 Pixel
409 Byte


shadow3.gif
111 x 13 Pixel
510 Byte


shadow4.gif
160 x 6 Pixel
1 KB


shadow6.gif
6 x 117 Pixel
988 Byte


shadow7.gif
6 x 117 Pixel
988 Byte

Tipp Eingabefeld und Button mit Schatteneffekt

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Kommentare: 11 » aufmachen Sascha: Man Man des is geilo web-und-service: ein wirklich schöner Effekt für Texte. Ursula: So einfach und ein so schöner Effekt! Verena: Irre, insgesamt eine SUPER Homepage, bin dermaßen begeistert. Ein Hoch auf den Ersteller! Karsten: Kann man solche Schatten z.B. für Div Blöcke auch ohne Grafike erzeugen? Also praktixsch nur mit css? McMcDrive: Wirklich geniale Seite - WEiter so! Hemann: Ich sag nur ein Wort: Spitze! schmiddi: cooler Effekt DrecksKind: @Karsten Wenn du viele DIVs um ein Element machst kannst du für jedes dieser DIVs einen Rand festlegen (geht dann nur für geraden Schatten) Michael: @ Karsten Schatteneffkte mit reinem CSS ist ne Menge Arbeit und der IE will das auch nicht immer. Aber schau mal bei http://www.thestyleworks.de//tut-art/shadow.shtml rein. Ist eine geniale Seite für CSS Interessierte Besserwisser: Oh mein Gott, ist das Schlecht!Wer bitte benutzt denn sowas?
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!

Das könnte Sie interessieren:

Strukturen

Eingabe von mehreren Leerzeichen

Weicher Farbübergang in Containern

Zeilenlinien im Text - Zeilenlinien als Hintergrundbild eines Textes einfügen.

Symbolische Links - Kennzeichnen Sie Links mit Symbolen. Die Besucher erkennen sofort, was Ihnen beim anklicken des jeweiligen Links erwartet.

Hintergrundbild in Position

Gratis-Webfonts von Google - Webfonts mit Textschatten. Mit den Google Web Fonts haben Sie die Möglichkeit eine ganze Reihe von Schriften auf Ihrer Webseite zu nutzen, ohne dass Sie diese auf den Server hochladen müssen.

Kompaktes Design

Hypertext …mehr