Bilderrahmen und Schatten mit CSS

Antworten
Admin
Administrator
Beiträge: 84
Registriert: Di 19. Aug 2014, 10:47

Bilderrahmen und Schatten mit CSS

Beitrag von Admin » Di 19. Aug 2014, 16:11

Mit CSS kannst du um deine Bilder einen einfachen Rahmen bzw. einen Schatten setzen ohne gleich Gimp&Co starten zu müssen.

Hier siehst du ein paar Beispiele.

Das Bild ist countrysideb.jpg (640x428) von http://www.morguefile.com/
Die verkleinerte Variante kannst du im Beispiel abspeichern.
Und zum Probieren findest du am Ende des Tut's den Quelltext einer „test.html“. In dieser kannst du nach Herzenslust die verschieden Rahmen-/Farbkombinationen ausprobieren. Ist dir ein besonders schöner Rahmen gelungen so poste ihn bitte hier (Bild + Klassen-Code) !!

Der ganze Aufbau ist so einfach, dass ich nur den Code der Klassen zu dem jeweiligen Bild aufzeige. Den Code zwischen den Klammern {....} kannst du per Copy/Paste in den gleichen Bereich der Klasse ".bild" der „test.html“ einsetzen.

Klassen-Code Bild1

Code: Alles auswählen

.bild1 {
  border: 5px solid #72a143;
}
Klassen-Code Bild2

Code: Alles auswählen

.bild2 {
  border: 3px solid #72a143;
  padding: 2px;
  background-color: #ffeda5;
}
Klassen-Code Bild3

Code: Alles auswählen

.bild3 {
  border: 4px double #72a143;
  padding: 2px;
  background-color: #ffeda5;
}
Klassen-Code Bild4

Code: Alles auswählen

.bild4 {
  border: 3px solid #e1e1e1;
  padding: 2px;
  background-color: #ffffff;
}
Klassen-Code Bild5

Code: Alles auswählen

.bild5 {
  border-right: 3px solid #d1d1d1;
  border-bottom: 3px solid #d1d1d1;
  padding-right: 3px;
  padding-bottom: 3px;
  background-color: #a8a8a8;
}
Quelltext der „test.html“ komplett:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta
 content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>test</title><style
 type="text/css">
#test {
  margin-top: 100px;
}
.bild {
  border: 3px solid #72a143;
  padding: 2px;
  background-color: #ffeda5;
}

</style></head>
<body><div id="test" style="text-align: center;"><img class="bild"
 style="width: 250px; height: 167px;" alt="test" src="baum.jpg"></div><br></body></html>
Viel Spaß beim Basteln :lol:
Dieses Tutorial wurde am 4.04.2008 von gimp-michel für KompoZer-Web erstellt

Antworten