Pimp your Profilbild! – 5 Ideen für deine Sidebar

Heb bitte mal die Hand, wenn du Blogger bist und in deiner Sidebar ein Foto von dir zeigst! 🙂

So eine kleine „About me“-Box mit einem Profilbild hat sich ja einfach etabliert und ist auf beinahe jedem Blog zu finden. Zu Recht! Denn wenn ich neu auf einem Blog bin, mag ich als erstes wissen, wer denn dort schreibt. Ein Portrait und eine kurze Vorstellung in ein, zwei Sätzen sind da wunderbar.

Missi von Himmelsblau.org hatte sich im Rahmen des Coding-Themas beim #bloggeralphabet gefragt, wie bei mir hier in der Sidebar eigentlich dieser Effekt mit meinem „wackelnden“ Profilbild funktioniert – fahr mal mit dem Mauszeiger über das Bildchen, dann dreht es sich. 😉
Diese Frage habe ich zum Anlass genommen, um mal ein paar Ideen zu sammeln, wie du dein Profilbild in der Sidebar einbinden und pimpen kannst. Und zwar ganz easy-peasy mit nichts als ein paar Zeilen Code – du brauchst dafür also kein Photoshop, keine Schere und keinen Kleber. 🙂

Vorab: die richtige Größe ist wichtig :o)

Allzu viel Platz bietet so eine Sidebar nicht, daher wird dein Foto vermutlich nicht breiter als irgendwas um die 300px sein. Tu der Ladezeit deines Blogs einen Gefallen und speichere dein Bild auch gleich in dieser Größe ab, anstatt den Browser eine riesige Datei mit drei Kilometern Kantenlänge herunterrechnen zu lassen.

Ob du dich für Hoch- oder Querformat oder vielleicht für ein quadratisches Bild entscheidest, hängt ganz von deinem Layout ab. Kleiner Tipp: aus einem quadratischen Foto kannst du mit CSS ein rundes Bild werden lassen! Wie das geht, erfährst du gleich.

Unsere Ausgangsbasis: der HTML-Code

Das Foto ist als ganz normales Bild eingebunden – um es im CSS ansprechen zu können, habe ich ihm die Klasse .profilbild gegeben:

<img src="profilbild.jpg" alt="Profilbild" class="profilbild">

Sieht dann so aus:

Blogger-Tutorial: Pimp dein Profilbild!

Beispiel 1: Rahmen & Schattenwurf

Mit Hilfe der Anweisung border verpasst du deinem Foto einen Rahmen:

.profilbild {
   border: 3px solid #006e81;
}

Über die px-Angabe kannst du mit der Dicke des Rahmens herumspielen.

Einen netten Effekt erzielst du, wenn du zwischen Foto und Rahmen etwas Platz lässt (padding) und diesen mit einer Hintergrundfarbe einfärbst:

.profilbild {
   border: 1px solid #aaa;
   padding: 7px;
   background: #fff;
}

Jetzt mit box-shadow noch etwas Schatten dazu, und du hast einen plastischen Polaroid-Effekt, wie er unten auf dem Bild zu sehen ist:

.profilbild {
   border: 1px solid #aaa;
   padding: 7px;
   background: #fff;
   box-shadow: 1px 3px 5px rgba(0,0,0,0.2);
}

Blogger-Tutorial: Pimp dein Profilbild!

Gucken wir uns den box-shadow doch mal genauer an:

  • Die ersten beiden Werte steuern die Richtung des Schattenwurfs, sprich den horizontalen und vertikalen Versatz.
  • Wie weit der Schatten reichen soll, legst du über den 3. Wert fest (in dem Beispiel also 5px).
  • Als Farbe kannst du jeden beliebigen Hex-Code wie etwa #000 für Schwarz verwenden – oder du bedienst dich der oben gezeigten rgba-Schreibweise. Dabei geben die ersten drei Werte die Farbe an und der letzte Wert die Deckkraft.

Beispiel 2: abgerundete Ecken & Rahmen

Ganz anders wirkt dieser Rahmen in Kombination mit abgerundeten Ecken:

Blogger-Tutorial: Pimp dein Profilbild!

Der Code ist nicht kompliziert…

.profilbild {
   border-radius: 10px; 
   border: 2px solid #333;
}

Beispiel 3: rundes Bild

Blogger-Tutorial: Pimp dein Profilbild!

Die Anweisung border-radius verhilft dir nicht nur zu abgerundeten Ecken, sondern kann dein ganzes Bild kreisrund machen! Dafür sollte es allerdings quadratisch sein.

.profilbild {
   border-radius: 50%;
}

Beispiel 4: gekipptes Bild (mit Hover-Effekt!)

Blogger-Tutorial: Pimp dein Profilbild!

Jetzt kommen wir zu dem Effekt, den ich hier bei mir in der Sidebar verbaut habe: wenn du mit dem Mauszeiger über das Bild fährst, „kippt“ es. Das wird durch den transform-Befehl ermöglicht, der in diesem Fall eine Drehung um 10° ausführen soll.

Du kannst dein Bild von vornherein kippen oder erst beim Hovern bzw. beim Hovern den Effekt noch weiter verstärken.
Damit die Animation flüssig läuft, solltest du dann noch die Eigenschaft transition verbauen, bei der du mit der Geschwindigkeit des Übergangs herumspielen kannst, bis sie dir gefällt:

.profilbild {
   transition: transform 0.25s ease-in-out;
   transform: rotate(10deg);
}

.profilbild:hover {
   transform: rotate(15deg);
}

Beispiel 5: schwarz-weiß

Blogger-Tutorial: Pimp dein Profilbild!

Zu guter Letzt sei noch ein recht einfacher Effekt genannt: ein normales Farbfoto flott in schwarz-weiß verwandeln.

.profilbild {
   -webkit-filter: grayscale(100%); 
   filter: grayscale(100%);
}

Die Anweisung filter funktioniert von Hause aus leider nicht in allen Browsern, sodass wir hier noch die Ergänzung -webkit-filter mit dazu packen.


Ich hoffe, hier war die ein oder andere Anregung für dich dabei!
Alle Effekte kannst du natürlich nach Herzenslust miteinander kombinieren und mit den einzelnen Werten herumexperimentieren. Mit box-shadow oder transform lassen sich beispielsweise ziemlich abgefahrene Dinge anstellen, die hier den Rahmen sprengen würden – Tante Google weiß da aber noch einiges zu berichten. 😉

Ich wünsche dir auf jeden Fall viel Spaß beim Ausprobieren! 🙂

    Kommentare

  1. Missi am 19. Februar 2016 um 9:00:

    Danke für die Info, war ja am Ende doch ganz simpel 🙂 Ich werde beim nächsten Layoutwechsel mal schauen, ob ich vielleicht einen Deiner Tipps umsetze <3

  2. Tabea am 19. Februar 2016 um 17:48:

    Meine Hand muss wohl unten bleiben…
    Irgendwie habe ich ja keine echte Sidebar, nur ein paar Navigationslinks. Dafür gibt es aber inzwischen kleine Bildchen unter den Posts auf dem Blog, weil wir zu zweit sind und man so hoffentlich schnell erkennt, wer geschrieben hat.
    Deinen Post werde ich mal abspeichern, wer weiß, wann ich doch wieder Bilder in der Sidebar will. (Oder Lust auf wackelnde Bildchen habe ;))
    Liebe Grüße und danke für die tollen Anregungen!

  3. Anabela am 20. Februar 2016 um 17:09:

    Liebe Anne, vielen Dank, ich hab wieder so viel gelernt und bewundere immer wieder, wie viel du weißt. Toll! Leider bin ich nicht so geschickt, gerade das Coding fällt mir sehr schwer. Uns uns geht es genauso wie Tabea, denn auch wir sind zu zweit (und dazu auch noch blutige Anfänger). Aber ich werde das alles mal im Hinterkopf behalten und irgendwann sieht unser Blog vielleicht auch mal hübscher aus.
    LG, Anabela

    • Anne am 23. Februar 2016 um 21:47:

      Hallo Anabela,

      na, ich mach das ja auch schon ein paar Jahre lang, nur Mut. Wenn du Fragen zu irgendwas beim Bloggen hast, können wir ja auch mal bei einem Kaffee drüber quatschen. 🙂

  4. Vicky am 22. Februar 2016 um 23:42:

    Danke für die ganzen Tipps! 🙂

  5. Sven Lennartz am 23. Februar 2016 um 17:39:

    Schöne Ideen, Anne,

    vor ein paar Tagen habe ich alle meine Beitragsbilder mit etwas CSS-Schatten verziert – damit sie plastischer rauskommen. Jetzt kommt nach deiner Anleitung noch das Logo dran. Das ist zufällig rund und bekommt nun einen Dreh. Spielkram macht Spaß 🙂

  6. Biggi am 28. Februar 2016 um 15:46:

    Hallo, Fan und Fallower bin ich schon – heute noch einmal im Rahmen des Blogger-Comment-Days bei dir zu Besuch. Deine Seite ist klasse und auch beim Blogger ABC schreibe ich demnächst mit. Daumen hoch – topp! Deine Biggi aus http://www.Melusines-Welt.blogspot.de – ich freue mich auf den Gegenbesuch.

  7. Daniel am 6. März 2016 um 7:52:

    Hallo Anne,
    da ich auch blutiger Anfänger bin blieb mein Arm bei deiner Aufforderung auch unten. Aber du hast natürlich recht, ein Bild gehört zu jedem guten Blog dazu. Da mein Blog sich gerade noch im Aufbau befindet werde ich es auch umsetzen. Auch wenn coden mir nun wirklich kein Spaß macht, aber die Anleitung war sogar für mich verständlich. Ich habe mir deinen Beitrag abgespeichert und werde dich nun öfters besuchen. Bei dir kann ich noch viel lernen.
    Vielen Dank, Daniel.

    • Anne am 6. März 2016 um 21:16:

      Hallo Daniel,
      schön, dass dir mein Artikel weitergeholfen hat.
      Allerdings fände ich es noch schöner, wenn du nicht innerhalb weniger Tage mit jeweils unterschiedlichen Identitäten kommentieren würdest, um dabei eine jeweils andere kommerzielle URL zu setzen. Ein Schelm, wer da denkt, es ginge dir nur um den Backlink. Veräppeln kann ich mich selber. 🙂

  8. […] Blogging & Organisation So kannst Du Dein Profilbild pimpen […]

  9. […] Sidebar mit Foto verwirklichen will, habe ich auch dafür schon Inspiration gefunden, nämlich bei Anne. Damit die Qualität von dem Foto auch stimmt, gibt es außerdem Tipps für Selbstportraits von […]

  10. Edith Kraus-Strosing am 22. August 2016 um 21:46:

    Hallo, schöne Idee.
    Ich weiß nur leider nicht, wo ich die allererste Zeile einfügen muss.
    Wenn ich sie irgendwo in den Quelltext einfüge, kommt die Fehlermeldung dass mit / abgeschlossen werden muss. Wenn ich das mache, habe ich irgendwo auf der Seite ein Bildchen mit dem Wort „Profilbild“, das auch schön wackelt :D. Vielen Dank schonmal für alle Hilfe

    • Anne am 28. August 2016 um 20:11:

      Hallo Edith,

      mh, das klingt danach, als würde bei dir die Bilddatei mit dem Profilfoto nicht gefunden, weswegen dann anstelle des Bildes der Platzhaltertext „Profilbild“ auftaucht. Anstelle von „profilbild.jpg“ musst du die URL zu deinem Foto einfügen, das du vorher hochgeladen hast. 🙂

      Klappt es so?

      Liebe Grüße
      Anne

      • Edith Kraus-Strosing am 22. September 2016 um 19:00:

        mmmhhh Danke für den Tipp, aber ich habe keine Bild URL da ich das Bild über das Bild-Gadget eingefügt habe. Und wo muss ich die erste Zeile genau einfügen? oder funktoniert das nur bei wordpress und nicht bei blogspot?

        Danke für deine Mühe und LG Edith

Schreibe einen Kommentar

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