Sicherheit & Internet:Internet:Web-Entwicklung

Teil 2: 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.

Bilder mit Pep

© Archiv

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.

Bilder mit Pep

© Archiv

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.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".