Blogging Tips Rezensionen

Bilderrahmen mit CSS

Hallo ihr Lieben :) Heute gibt es mal wieder einen Artikel aus der Blogging Tips Reihe :love: Und zwar zeige ich euch heute, wie ihr eure Fotos mit einem Rahmen, der auf CSS basiert, ein wenig aufhübschen könnt. In meinem aktuellen Layout kommen die Fotos ganz ohne Rahmen aus, davor hatte ich jedoch immer irgendwelche Verzierungen um die Bilder herum. Vier davon stelle ich euch heute vor – und erkläre auch gleich, wie ihr diese einbauen und anpassen könnt ^^

Bilderrahmen mit CSS – Die Grundlagen

Zunächst einmal die Grundlagen. Ein Bild, das mit HTML eingebunden wird, sieht folgendermaßen aus:

<img class=“bilderrahmen“ src=“http://www.deine-internetadresse.de/bildadresse.jpg“/>

Der Grundtag, src (für source) beinhaltet die Bildadresse, der Tag class definiert die Klasse des Bildes. Genau diesen Tag benötigen wir hierfür, weil wir diese class in der zugehörigen CSS-Datei definieren wollen. Ich habe die class hier ganz simpel bilderrahmen genannt :)

Jedes Bild, das ihr mit dem Rahmen verzieren wollt, müsst ihr also mit der entsprechenden class versehen. Alternativ könnt ihr auch angeben, das jedes Bild in einem bestimmten Bereich so aussehen soll (beispielsweise im Post-Bereich), das ist aber etwas komplizierter und funktioniert je nach Layout anders.

Wenn ihr mit WordPress arbeitet, hat jedes Theme ein CSS-Stylesheet. Darauf könnt ihr ganz leicht im Admin Bereich über Design -> Editor zugreifen. Bei Blogger könnt ihr zusätzliche CSS-Codes über Vorlage -> Anpassen -> Erweitert -> CSS hinzufügen einbauen. In diesen jeweiligen Bereich fügt ihr den folgenden Code ein:

.bilderrahmen {
//Hier folgen die Angaben der jeweiligen Rahmendesigns!//
}

Ihr könnt natürlich auch einen anderen Namen für die class verwenden, achtet nur darauf, dass dieser in CSS und Bildangabe gleich ist. Und dann kann es auch schon losgehen :D

Schlichter Rahmen

Bilderrahmen mit CSS
Das wohl simpelste Design ist ein schlichter Rahmen um das Bild herum. Dazu benötigt ihr die folgenden drei Angaben:

.bilderrahmen {
border: 1px solid #cccccc;
padding: 5px;
background-color: #FFFFFF;
}

Die border ist der Rahmen selbst (1px breit, solide/durchgängige Linie und in der Farbe grau). Der Abstand vom Bild zur Linie wird mit padding angegeben, dies ist der Innenabstand. Die background-color gibt dann noch die Hintergrundfarbe des Rahmens an. Wenn ihr noch etwas Abstand zum Text drumrum haben wollt, könnt ihr mit margin noch einen Außenabstand angeben.

Leuchtender Rahmen

Bilderrahmen mit CSS
Etwas mehr macht der leuchtende Rahmen her. Dieser gibt zusätzlich um den normalen Rahmen eine Art leuchtenden Schatten, der dem Bild einen schönen glow verleiht :)

.bilderrahmen {
padding: 7px;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
-moz-box-shadow: 0 0 5px 2px #DDDDDD;
-webkit-box-shadow: 0 0 5px 2px #DDDDDD;
box-shadow: 0 0 5px 2px #DDDDDD;
}

Die ersten drei Angaben sind die Gleichen wie die beim simplen Rahmen. Ich habe hier eine weiße Randlinie gewählt, damit der Schatten besser zur Wirkung kommt. Auch ist der Innenabstand hier etwas größer. Darauf folgen die drei Werte, die den Schatten erzeugen. Die Pixelangaben bezeichnen die Verschiebung des Schattens zum Originalbild, die Härte des Übergangs von Schattenfarbe zu Hintergrund und die Farbe des Schattens (hier ein weiches grau). Generell reicht die Angabe box-shadow aus, die anderen Angaben dienen dazu, dass der Schatten auch bei älteren Browsern angezeigt wird.

Abgerundete Ecken

Bilderrahmen mit CSS
Ein sehr schlichter, aber doch wirkungsvoller Effekt ist es, seine Bilder mit abgerundeten Ecken zu versehen. Da muss man auch gar nicht mühsam im Bildprogramm jede Ecke einzeln abrunden, sondern kann sich ganz leicht der CSS bedienen.

.bilderrahmen {
border-radius: 15px;
}

Die border-radius beschreibt die Rundungsgröße, bzw. eben den Radius. Hier könnt ihr ein wenig experimentieren, was gut zu eurer Bildgröße passt. Die halbe Höhe/Breite eines quadratischen Bildes als Angabe erzeugt dann übrigens einen Kreis ;)

Transparenz mit Hovereffekt

Bilderrahmen mit CSS
Als Letztes folgt hier nun noch ein special effect, nämlich ein Transparenzeffekt, der verschwindet, wenn man mit der Maus über das Bild fährt. Mit meinem Layout funktioniert das wegen dem Pinterest-Plugin gerade nicht so gut, weil da auch leichte Transparenz eingebaut ist, aber wenn ihr den Code übernehmt, dann funktioniert es bei euch einwandfrei ;)

.bilderrahmen {
opacity: .4;
-ms-filter:“progid:DXImageTransform.Microsoft.Alpha(Opacity=60)“;
}

.bilderrahmen:hover {
opacity: 1.0;
-ms-filter:“progid:DXImageTransform.Microsoft.Alpha(Opacity=100)“;
}

Der Wert für opacity zeigt die Transparenz an. Der Wert 1.0 steht dabei für 100% Sichtbarkeit. Der -ms-filter ermöglicht die gleiche Ansicht in älteren Browsern des Internet Explorer. Hier gilt das Gleiche wie bei dem leuchtenden Rahmen, man sollte es einbauen, damit auch Nutzer älterer Browser alles sehen können :)
Bei diesem Effekt ist es wichtig, zusätzlich zu dem .bilderrahmen auch den Teil .bilderrahmen:hover in die CSS einzufügen. Das hover steht hierbei für das Darüberfahren mit der Maus.

 

So, das waren sie, die vier Bildverschönerungseffekte – :D – die ich euch zeigen wollte! Ich hoffe, ihr habt etwas Interessantes für euch gefunden. Ihr dürft die Codes gern kopieren und nach Belieben verändern. Ich freue mich zwar über einen Backlink, diese ist aber nicht notwendig!

Hat euch dieses Tutorial gefallen?
Ich hätte noch mehr solche Ideen, falls da Interesse besteht, sagt mir Bescheid! :love:

4 Kommentare

  • Reply
    Thomas
    25 Februar, 2015 at 11:50

    Hey, toller Artikel. Den packe ich mal in mein Pocket als Lesezeichen. Das werde ich bestimmt mal wieder brauchen und dann suchen.

    LG Thomas

  • Reply
    Maike
    25 Februar, 2015 at 12:30

    Ich hab den Artikel auch direkt mal auf Bloglovin gespeichert. Sehr interessant, ich hoffe nur, dass ich das ganze bei Blogger auch irgendwie hinkriege. Gerne mehr davon :).

  • Reply
    Lara
    25 Februar, 2015 at 21:41

    Toller Artikel & gerade das mit den abgerundeten Ecken spart echt jede Menge Arbeit. Ich weiß noch, wie ich das jahrelang manuell via Photoshop gemacht habe und mich später wie doof geärgert habe, weil ich die Originalbilder OHNE die Ecken nicht mehr hatte…

    PS.: Auch wenn es darum in dieser Anleitung nicht geht, wäre es vielleicht nicht verkehrt, bei dem urspünglichen Code für das Einbinden der Grafik auch auf das alt=“Bildbeschreibung“ zu verweisen. Gerade natürlich, weil Bildbeschreibungen sehr sinnvoll sind. Dann sind die Bilder nämlich nicht nur hübsch sondern auch sinnvoll eingesetzt. :D

  • Reply
    datmomolein
    26 Februar, 2015 at 11:13

    kleiner hinweis, auch wenn ich natürlich weiss, dass sich dein tutorial eher an die „frischen“ blogger als die eingefleischten webprogrammierer wendet. opacity ist als property in css3 hinzugekommen. nicht alle browserengines setzen das so um, nichtsdestotrotz wurde das auch vorher häufig mit folgenden vorzeichen genutzt und auch noch heute häufig eingesetzt, um evtl alte browser zu unterstützen:
    -moz-opacity: 0.5; // alte Mozilla Engine
    -khtml-opacity: 0.5; // alte Safari Engine
    -webkit-opacity: 0.5: // alte Google Engine, einige basieren noch darauf.
    Aber egal wie, ein Kindelement wird immer die Oapcity seines Elter erben und das kann man dann auch nicht wieder hochsetzen.

    Der Vorteil von Bild“bearbeitung“ mit CSS ist natürlich, das bei Veränderung des Blogs, sich die Bilder auch wieder anpassen lassen ohne dass die ausgetauscht werden müssen. Allerdings jeder CSS-Befehl wird vom Browser des client (also Nutzercomputer) ausgeführt und somit sind grossartige Veränderungen eben auch sehr arbeitsintensiv. Sollte man beim Stichwort mobil/responisve drüber nachdenken.

  • Schreibe einen Kommentar!