 Farblich hinterlegte Grafiken
Manchmal eine schwierige Angelegenheit: Farblich passende Bilder für eine WEB-Site zu finden oder nach einem Redesign die Grafiken anpassen. Machen Sie sich den Umstand zunutze, das bei GIF- oder PNG-Grafiken transparente Bereiche 'eingefärbt' werden können.
|
|
transparenten Bereich 'einfärben'
Verwenden sie doch transparente Grafiken, deren Hintergrundfarben sie entweder mit CSS oder innerhalb einer kleinen Tabelle mit bgcolor="[Farbangabe]" festlegen .
Beispiel identische Grafiken
Am einfachsten geht das natürlich mit CSS-definierten, feinen Abstufungen für die verwendeten Farben ihrer Seite:
 Farbabstufungen entwickeln
Hintergrundfarben + Redesign
 Mit HTML: Fügen Sie das Image in eine Tabelle ein. Den Hintergrund entsprechend eingefärbt können Sie ihre Wunschfarbe verwenden.
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#B3AAEC">
<img src="rechts-blau.gif" width="17" height="17" border="1" alt=""><br></td>
</tr>
</table>
<div bgcolor="#B3AAEC">
<img src="rechts-blau.gif" width="17" height="17" border="1" alt="">
</div>
<div class="blau01">
<img src="rechts-blau.gif" width="17" height="17" border="1" alt="">
</div>
Zur Veranschaulichung verwende ich hier ein transparentes Pfeil-Image.
... oder auch als Menüpunkt / Link
| Textlink als Verweis
|
|
 imagedowload Weitere 50 transparente Pfeile (unter Pfeile 17x17)
pfeil-verweis Anwendungsbeispiel in einem Menü
Beispiel
Das transparente Startseiten-Image der MINI-IMAGE-BOX mit unterschiedlichen Hintergrundfarben. Wie sie sehen steht einem Farbwechsel nichts im Wege.
Unten rechts das Image in der Seitenhintergrundfarbe
Ganz clever! Die Hintergrundfarben mit CSS zentral festlegen: Beispiel ansehen
|
Home • Tipps • Farblich hinterlegte transparente Images
