Eigene Rahmen mit kleinen transparenten Gifs gestalten
Die Formatierungsmöglichkeit mit CSS auf Rahmen (border) ist recht gut, aber nicht gut genug. Manchmal möchte man einem Rahmen einen speziellen Style mitgeben, und der läßt sich dann nur mit Bildern erzielen.
Wir nehmen Gifs, da ihre Transparenz auch von Browsern mit eingeschränkter PNG-Fähigkeiten unterstützt wird (ich will jetzt keine Namen nennen). Erstmal erstelle ich ein 10×10 Pixel großes Bild und fülle abwechelnd verticale 1px große Linien mit schwarz und weiß. Die Farbe weiß soll nachher transparent sein:
transparentes Gif:
Der Trick in Css funktioniert so: Wir erstellen eine Box mit Padding: 10px und dem Gif als Hintergrundbild, in dieser Box erstellen wir noch eine Box, diese erhält die Hintergrundfarbe weiß (oder eine beliebige andere).
<div style="width: 400px; height: 400px; padding: 10px; background: url('rahmen.gif');">
<div style="background: white; display: block; height: 390px; width: 390px; padding: 5px;">
Hier steht Text
</div>
</div>
Das wars auch schon, es sollte nun so, oder so ähnlich aussehen:
transparenter Rahmen:
Verwandte Artikel
- Selbes Layout in IE und Firefox - Margin anstelle von Padding nutzen
- Css - boxenorientiertes Denken
- Css - boxenorientiertes Denken
- Struktur einer Css Datei
- 3 Bücher die jeder Web-Entwickler gelesen haben muss
3 Kommentare
Tut mir leid, die Kommentarfunktion für diesen Beitrag ist geschlossen.
Hi
Du verwendest für diese Methode eine fixe Höhe und eine fixe Breite.
Wozu dann zwei divs?
Man kann doch das Bild dann schon mit dem passenden Hintergrund gestalten und erspart sich so eine div Suppe.
Es reicht eines und dem gibt man padding 15px.
lg
Monika
Ja ich gebe zu, die festen Breiten und Höhen sind nicht schön gelöst, aber ich habs nur auf die schnelle gemacht, das kann man sicher noch anpassen.
Wie löst du das mit nur einem Div? Bei mir besteht bei einem Div das Problem, das das Background Image durchgehend gezeichnet wird und daher ist die Schrift dann nicht mehr zu erkennen, deswegen hatte ich noch das 2. Div mit der Hintergrundfarbe. Bitte um Aufklärung
Ah, tut mir leid, hab deinen Kommentar falsch gelesen. Also mir gehts darum, nur den Rahmen als Bild zu haben und nicht auch schon den Background, wenn man dann nämlich keine feste Höhe benutzt (war ja nur im Beispiel der Fall) dann muss sich der Hintergrund natürlich mitbewegen.