Webentwicklung und mehr

Einen Fotorahmen mit CSS bauen

Ein Fotorahmen ist eine gute Möglichkeit, unterschiedlichen Bildern ein einheitliches Aussehen zu verpassen. Man kann das natürlich mit Photoshop erledigen, praktischer ist aber die Gestaltung mit CSS. Warum, erschließt sich euch möglicherweise nachdem Ihr die folgende Anleitung gelesen habt.

Ausflug mit Darth Vader

Grüße aus dem Urlaub

Das HTML für den Fotorahmen

Das HTML ist ziemlich einfach. Damit unser Bild einen Rahmen bekommt, packen wir es in ein DIV und geben dem Container die Klasse .photo.

<div class="photo">
 <img src=".../ausflug-mit-vader.jpg" alt="Mein Foto mit Rand">
</div>

Das CSS Styling für den Fotorahmen

.photo {
 padding: 10px;
 background-color: #F2F2F2;
 border-bottom: 1px solid #AAA;
 border-right: 1px solid #AAA;
 display: inline-block;
}
.photo img {
 float: left;
}

Mit dem CSS padding ( Innenabstand ) stellen wir die Breite des Randes ein. Die border Eigenschaft nutzen wir
um eine Art Schatten zu kreieren. Als Hintergrundfarbe wählen wir ein dezentes Grau, damit sich der Fotorahmen ein wenig von unserem weißen Dokument absetzt. Außerdem müssen wir den Umfluss des Bildes via CSS float einstellen, damit das Bild genau passend in unserem Container sitzt. Das Ergebnis sieht dann so aus.

Foto von Darth Vader in Motoradbeiwagen

Der Rand sieht noch etwas klobig aus. Zum Glück gibt es die CSS Eigenschaft box-shadow, die mittlerweile von den meisten Browsern unterstützt wird ( siehe Browser Support ). Wir tauschen nun die border Eigenschaft mit box-shadow.

box-shadow: 1px 3px 4px 0px #888;

Die box-shadow Eigenschaft gibt uns mehr Kontrolle über die Art des Schattens. Insgesamt werden vier Pixelwerte und ein Farbwert für den Schatten definiert. Der erste Pixelwert stellt die horizonatle Verschiebung der Fläche ein, der zweite die vertikale. Mit dem dritten Pixelwert stellen wir die Härte der Schattenkante ein. Kleinere Werte erzeugen eine härtere Kante. Der vierte Pixelwert stellt das Überfüllen ein. Positive Pixelwerte machen den Schatten größer als seinen Ursprung.

Negative Pixelwerte sind hier erlaubt. Übernehmt die Vendor-Prefixe -webkit und -mox für maximalen Browser Support.

.photo {
 padding: 10px;
 background-color: #F2F2F2;
 box-shadow: 1px 3px 4px 0px #888;
 -webkit-box-shadow: 1px 3px 4px 0px #888;
 -moz-box-shadow: 1px 3px 4px 0px #888;
 display: inline-block;
}

Als Ergebnis der CSS Änderungen erhaltet Ihr ein Foto mit einem „realistisch“ wirkenden Rahmen.

CSS Bild mit Rand und Schatten

Mit CSS den Rahmen eines Polaroid Fotos nachbilden

Das sieht doch schon nicht schlecht aus, allerdings könnte unser Fotorahmen noch etwas mehr Charakter vertragen. Dazu erzeugen wir eine Art Polaroid Rahmen. Das ist denkbar einfach. Wir passen einfach das padding für den unteren Abstand an.

.photo {
 padding: 10px 10px 60px 10px;
 ...

Als Ergebnis erhalten wir ein Bild mit Rahmen in der Art eines Polaroids.

Durch die Zuweisung verschiedener CSS-Attribute erhält dieses Bild einen Rahmen, der einem Polaroid Foto ähnelt

Wir haben jetzt das Foto mit einem schönen Rahmen. Was fehlt ist eine Bildunterschrift um das Gesamtbild abzurunden. Dazu erweitern wir das HTML um ein wenig Code.

<div class="photo">
 <img src=".../ausflug-mit-vader.jpg" alt="Mein Foto mit Rand">
 <p class="caption">Grüße aus dem Urlaub</p>
</div>
ausflug-mit-vader

Grüße aus dem Urlaub

Die Komposition steht, allerdings ist das Gesamtbild noch nicht ganz stimmig. Unter anderem sorgt die Bildunterschrift dafür, dass sich der untere Rahmen aufbläht und auch am Text-Styling könnte noch etwas getan werden. Zunächst widmen wir uns dem gewachsenen unteren Rand. Damit dieser unabhängig von der Bildunterschrift immer den den gleichen Abstand hat, entheben wir die Bildunterschrift aus dem Dokumentfluss und positionieren sie unten am Rahmen.

Folgendes CSS ergänzen wir.

.photo {
 position: relative;
}
.photo .caption {
 position: absolute;
 bottom: -15px;
 left: 20px;
 right: 20px;
}

Für die passende Platzierung des Textes ist gesorgt. Als nächstes widmen wir uns der Gestaltung der Schrift und erzeugen eine Art „roter Filzstift Effekt“. Zunächst binden wir eine schöne Handschrift aus den Google Webfonts in unser Dokument ein. Dafür platzieren wir folgenden Code im Quelltext vor unserem CSS.

<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

In unserem CSS ergänzen wir folgende Werte.

.photo .caption {
 ...
 font-family: 'Pacifico', cursive;
 color: #CC0000;
 font-size: 24px;
}

Als Ergebnis erhalten wir ein Foto mit Polaroid ähnlichem Rahmen und einer gestylten Bildunterschrift.

ausflug-mit-vader

Grüße aus dem Urlaub

Der Gesamte HTML und CSS Code für einen Foto mit Rahmen.

Im Header einbinden

<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

HTML

<div class="photo polaroid shadow">
 <img src=".../ausflug-mit-vader.jpg" alt="Mein Foto mit Rand">
 <p class="caption">Grüße aus dem Urlaub</p>
</div>

CSS

.photo {
 padding: 10px 10px 60px 10px;
 background-color: #F2F2F2;
 display: inline-block;
 box-shadow: 1px 3px 4px 0px #888;
 -webkit-box-shadow: 1px 3px 4px 0px #888;
 -moz-box-shadow: 1px 3px 4px 0px #888;
 position: relative;
}
.photo img {
 float: left;
}
.photo .caption {
 position: absolute;
 bottom: -15px;
 left: 20px;
 right: 20px;
 font-family: 'Pacifico', cursive;
 color: #CC0000;
 font-size: 24px;
}

Im nächsten Beitrag erkläre ich, wie Ihr mit diesem Bildrahmen eine flexible Bildergalerie erstellt, die sich der Breite eures Bildschirms anpasst.

Was haltet Ihr von dem Ergebnis, konntet Ihr den Rahmen in einem Projekt verwenden oder habt Ihr ihn sogar erweitert? Ich freue mich über euere Beispiele und euer Feedback.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert