Ob schmal oder breit, waagrecht oder senkrecht, Rahmen beleben Bilder und Texte und geben jedem Webdesign eine individuelle Note.
Nachfolgend zeige ich auf, wie wir mit der Border-Eigenschaft Rahmen um Bilder und Texte machen können. Oder auch mal nur unter oder neben Texte.
Ausgangsbild:
So soll es aussehen:
Dem Bildrahmen rechts habe ich folgende Eigenschaften gegeben:
img {
border: 4px solid #000000;
}
Der Rahmen ist auf allen Seiten 4px dick und trägt die Farbe schwarz. Solid steht für einen durchgezogenen Rahmen.
Der Code kann auch direkt ins Html geschrieben werden:
Möchten wir den Rahmen ähnlich eines Passepartouts gestalten oder wie ein Polaroid-Foto aussehen lassen, dessen untere Rahmenbreite (rot geschrieben) grösser sein soll, geben wir dem Bild folgende Eigenschaften:
img {
border-top:16px solid #000000;
border-right:16px solid #000000;
border-bottom:50px solid #000000;
border-left:16px solid #000000;
}
Die Werte können selbstverständlich beliebig variert werden. Probieren Sie aus, was am besten zu Ihrem Bild passt.
Zur Wiederholung:
Top = Rahmen oben,
Right = rechte Seite,
Bottom = unterer Rahmen,
Left = linke Seite.
Korrekte Reihenfolge in der Schreibweise:
top, right, bottom, left
Auch um Texte kann man schöne Rahmen oder Ränder machen. Dieser feine blaue Rahmen hat zum Beispiel folgende Eigenschaften im Css:
p.rahmen-blau {
border: 1px solid #4285f4;
padding:0.5em;
}
Das Padding steht für den Abstand zwischen Text und Rahmen. So klebt der Rand nicht direkt am Text. Das wirkt aufgeräumter.
Im Html steht dann einfach die Klasse im p-Tag:
<p class="rahmen-blau">Hier beginnt der Text</p>
Übrigens die blauen Unterstreichungen unter meinen Überschriften, entstehen aus denselben Border-Eigenschaften wie die Rahmen. Nachfolgend der Code für die Css-Datei:
p.bo {
border-top:8px solid #115edc;
width:20%;
margin:auto;
margin-top:-2em;
padding-bottom:2em;
}
Anstelle des Border-top könnte man auch ein Border-bottom nehmen. Mit den Werten einfach ausprobieren.
Rahmen um Bild verschwommener Rahmen Css-Html-Border zerrissener ausgefranster Rahmen Bild hinter Text weisser Rahmen
Auf wiki.selfhtml.org.
Übersichtlich erläutert und bebildert.
Hoverbild mit Text, mit schwarzweiss Bild und mit Rahmen. Alles ganz einfach mit Html und Css.