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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…
News
Video
SciFi-Action mit Ryan Gosling und Harrison Ford
Video
Agatha-Christie-Verfilmung mit Johnny Depp
Video
Kinostart: 23.11.2017