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.

© 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.

© 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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.