Teil 2: CSS Tricks: Bilder mit Pep
- CSS Tricks: Bilder mit Pep
- Teil 2: CSS Tricks: Bilder mit Pep
- Teil 3: CSS Tricks: Bilder mit Pep
- Teil 4: CSS Tricks: Bilder mit Pep
- Teil 5: CSS Tricks: Bilder mit Pep
Gerahmt Um das Bild hervorzuheben, können Sie es mit einem Rahmen versehen. Eine Möglichkeit wäre, den Rahmen im Bildbearbeitungsprogramm zu ergänzen und das Bild dann normal einzufügen....
Gerahmt
Um das Bild hervorzuheben, können Sie es mit einem Rahmen versehen. Eine Möglichkeit wäre, den Rahmen im Bildbearbeitungsprogramm zu ergänzen und das Bild dann normal einzufügen.
Diese Lösung ist aber relativ unflexibel, weil Sie dann bei kleinen Farbanpassungen immer die Grafik bearbeiten müssen, außerdem müssen Sie alle Bilder der Website einzeln bearbeiten.
Diese Nachteile haben Sie nicht, wenn Sie einen Rahmen per CSS definieren. Ein einfacher Rahmen, der an die Rahmen altmodischer Fotos erinnert, ist ganz rasch per CSS definiert: Sie geben dem Bild einen weißen Hintergrund und definieren ein padding in der gewünschten Breite und darum herum den schmalen Rahmen:
.rahmen1 {
background-color: #fff;
padding: 5px;
border: 1px solid #666;
}Für einen leichten 3D-Effekt empfiehlt es sich, den Rahmen in unterschiedlichen Farben zu definieren: oben und links heller, unten und rechts dunkler.
.rahmen2 {
background-color: #fff;
padding: 5px;
border: 1px solid #888;
border-top-color: #ccc;
border-left-color: #ccc;
}Einen leichten 3D-Effekt könnten Sie zwar auch über border-style: inset erreichen, allerdings verwenden dann Browser nicht durchgehend dieselben Farben, sodass Sie über die gezeigte Methode - Rahmentyp solid und eigene Farbangaben - eine exaktere Kontrolle haben.
Einen doppelten Rahmen realisieren Sie dadurch, dass Sie für padding und border dieselbe Breite angeben - die Hintergrundfarbe des Bildes ist dabei die Farbe für den inneren Rahmen, die bei border angegebene Farbe ist die für den äußeren Rahmen.
.rahmen3 {
background-color: #fff;
padding: 5px;
border: 5px solid #ccc;
}Weitere Rahmeneffekte lassen sich durch CSS-Hintergrundbilder erzeugen.
Schlagschatten
Sie können Ihre Bilder rein per CSS auch mit einem Schlagschatten versehen. Die Grundidee dabei: Das Bild befindet sich in einem HTML-Element, das eine Hintergrundfarbe in der Farbe des gewünschten Schlagschattens hat.
Das HTML-Element, im folgenden Beispiel ein div, erhält dieselbe Größe wie das Bild. Jetzt wird das Bild um ein paar Pixel nach links und nach oben verschoben, das umfassende Element bleibt hingegen an der ursprünglichen Stelle: So sind rechts und unten vom Bild Teile des umfassenden div zu sehen, die die Illusion eines Schlagschattens erzeugen.
