 Optische Vergrößerung transparenter Grafiken
Aus einer transparenten Grafik und ein wenig CSS eine Grafik herstellen (zumindest optisch), die den Anforderungen der Webseite entspricht. Diesen kleinen Kniff möchte ich kurz erklären.
|
|
transparente Grafiken optisch größer darstellen Hintergrundfarbe + Rand
... nur ein kleiner Kniff für Zwischendurch
Ziel: Sie möchten simple transparente Grafiken optisch vergrößern und ein wenig hervorheben. Zum Beispiel solche Dateisymbole:
Ohne ihr Grafikprogramm zu bemühen, lassen sich die Grafiken mit wenig Aufwand beispielsweise so darstellen:
Lediglich 2 CSS-Anweisungen bewirken den Unterschied
- Randformatierung
- Hintergrundfarbe
Für die Grafik definiere ich eine eigene CSS-Klasse. Die Klasse wird der Grafik im <img>-Tag durch das Attribut 'class' zugewiesen.
<img class="Grafik01" src="dateisymbol.gif" width="32" height="32" border="0" alt="">
In der Notierung für die Klasse class="Grafik01" bestimme ich eine Hintergrundfarbe und einen Rand im identischen Farbton. Die Breite des Randes (hier 20 Pixel) bestimmt dabei die optische Vergrößerung der Grafik.
.Grafik01 {
border:20px solid #0069B3;
background:#0069B3;
}
Beispiele:
In meiner Demo verwende ich diese beiden (transparenten) Grafiken. Den Rand für die Grafiken habe ich hier auf 1 Pixel festgelegt.
|
50 × 50 Pixel
|
100 × 60 Pixel
|
Sie können eine und dieselbe Grafik unterschiedlich darstellen.
Sie können dabei auch die Ränder unterschiedlich breit festlegen ...
(oben zur Demo, die eigentlichen Grafiken mit eingefärbtem Hintergrund)
... und so aus einer x-beliebigen transparenten Grafik, die für Sie in Farbe und Größe passende Grafik 'herstellen'. Sei es, um sie farblich ihren Inhalten oder in der Größe anderen Grafiken anzupassen.
border-top: 16px solid #FFB9C0;
border-right: 25px solid #FFB9C0;
border-bottom: 16px solid #FFB9C0;
border-left: 25px solid #FFB9C0;
background: #FFB9C0;
border-top: 20px solid #FFB9C0;
border-right: 50px solid #FFB9C0;
border-bottom: 20px solid #FFB9C0;
border-left: 50px solid #FFB9C0;
background: #FFB9C0;
 Problembehandlung - Ränder von Grafik-Verweisen
Ränder mit CSS formatieren
Seitenelemente mit Rand - CSS formatiert
|
Home • CSS • Grafiken optisch größer
Quellcode