Webdesign- und Freeware-Tipps
Thumbnails gestalten / Thumbnails in Szene setzen
Manchmal kommt es vor, dass eine Grafik oder ein Foto etwas hilflos, alleingelassen und schwebend auf einer Webseite wirkt. So ist es auch oft bei Thumbnails. Es gibt einige Methoden, um die Grafik etwas herauszuheben und in die Seite als festen Bestandteil zu integrieren.
Die erste und einfachste Methode ist die Umrahmung des Bildes mit einer 1 Pixel dicken Linie. Dazu muss im Code des Bildes folgendes stehen: <img src="thumb.gif" border="1">
Eine Variante dazu wäre zum Beispiel ein gestrichelter Rahmen. Der Abstand zwischen den einzelnen Pixeln vom Rahmen lässt sich natürlich beliebig verändern, um verschiedene Wirkungen zu erzielen. Diesen Effekt kann man nur als Grafik hervorrufen.
Klar kann man auch mit CSS einen gepunkteten Rahmen um die Grafik bringen, jedoch kann der Internet Explorer im Gegensatz zum Firefox und anderen Browsern das Gewünschte nicht richtig darstellen. Der Code hierfür: <img src="thumb.gif" style="border: 1px dotted #000000;">
Eine weitere Möglichkeit ist ein doppelter Rahmen, wobei das Auge nur den Schwarzen wahrnimmt, da der innere Rahmen die gleiche Farbe hat wie der Hintergrund. Das ist Absicht, damit man nur einen Rahmen erkennt.
Optimiert man diesen Effekt muss man die Transparenz des schwarzen Rahmens auf 75 % setzen. Dieser Prozentsatz gilt nur für die Farbe schwarz. Bei jeder Farbe muss man abwägen, bei welchen Prozentsatz der Rahmen das Bild edel macht und schlicht hervorhebt. Du kannst zudem noch mit der dicke des Rahmens spielen und zusätzlich mit dem Abstand des Rahmens vom Bild. Du wirst sehen, was für edle Effekte mit einfachen Mitteln möglich sind.
Die nächste Variante ist zum Einsatz gedacht, wenn man ein Thumbnail oder eine Grafik besonders herausheben möchte. Man erstellt einfach an allen vier Ecken Winkel, die das Bild ein einen Rahmen fassen und somit auch zu einem festen Bestandteil der Seiten machen.
Auch diese Winkel kann man in den verschiedensten Variationen erstellen. Ausprobieren könnt ihr auch, einfach mal zwei diagonal gegenüberliegende Ecken zu entfernen und nur zwei Winkel zu benutzen.
Partnerseiten
