Facebook Button Twitter Button YouTube Button RSS Button

IT-Runde

Dezenter CSS/Grafik Schatten bei Bildern

  • Dezenter CSS Schatten bei Bildern

    Bilder machen längere Texte und Webseiten allgemein erst richtig interessant, meist können sich dann die Leser mehr unter einem Thema vorstellen und das Design wird dadurch sehr aufgewertet. Auch ich benötigte für ein internes Projekt nun ein Schatten hinter einigen Bildern. Dieser sollte aber auch nach was aussehen und nicht nur trist grau sein. Gefunden habe ich dann was schönes bei gxm. Im Artikel wird eine Schatten-Grafik angeboten, welche man mit etwas CSS für jedes Bild verwenden kann, da sich der Schatten immer passend anpasst. Ist leider nicht so, denn man müsste für jede Bildbreite einen eigenen Schatten erstellen und ich persönlich war eher auf der Suche nach einem passenden Schatten, welchen ich auch vor allem für kleinere Darstellungsbilder benutzen kann.

    Als Beispielgrafiken habe ich mal folgende Bilder genommen von den IT-Runde Fan’s ;-):

    Ich habe dann mal weiter gesucht und so einige Schatten gesehen, mal gute und mal weniger gute. Schlussendlich hat mich vor allem der Schatten von Hartjes beeindruckt. Schön schlicht, kleiner Code und sieht klasse aus (egal ob bei großen oder kleinen Bildern). Das einzige was ihr dafür tun müsst ist euch die Schatten-Grafik runterzuladen (itrunde-schatten.gif) und folgenden CSS-Code in eure Style-Datei einzufügen (Achtung: Optimiert bis Grafiken in der Größe 800×800):

    1
    2
    3
    4
    5
    6
    7
    
    .itrundeschatten {
    background: url(./ordnerstruktur/itrunde-schatten.gif) no-repeat right bottom;
    padding: 4px 10px 10px 4px;
    border: #eee 1px solid;
    border-right:none;
    border-bottom:none;
    }

    Den Dateipfad müsst ihr natürlich dementsprechend an den Speicherort eurer Schatten-Grafik anpassen. Danach könnt ihr per class-Attribut ganz easy in eurem img-Tag den Schatten in eure Bilder einfügen. Hier ein einfaches Beispiel:

    1
    
     

    Natürlich nicht vergessen im Dokument die Style-Datei einzubinden :-D. Das Ergebnis sieht bei unserem Beispiel dann gleich viel eleganter aus als bei der normalen langeweiligen Anordnung oben:

    Ob für große oder kleine Projekte – Der CSS Schatten mit der passenden Grafik lässt sich schnell und einfach integrieren und nimmt wenig Platz weg mit großer Wirkung! Mein Tipp ;).

    Welche Schatten benutzt ihr bei euren Scripten? Rein CSS, fertiges Script oder Self-Made Code?

  • Kostenlose IT-Tipps

    • Nebenbei ein Online Business aufbauen
    • Passiv Geld generieren
    • Online Trends (Nischenseiten, SEO, Google & Co.)

     
     


  1. #1 Bernd
    18.01.2011 um 22:22 Uhr

    Klasse Tipp. Ich hab es gleich mal auf meinem Blog eingefügt. Hat man das Plugin NextGallery im Einsatz, so kann man den CSS-Code auch in die Klasse .ngg-singlepic einfügen. Dadurch muss man beim Einfügen der Bilder nicht noch eine extra Klasse einfügen.

    Post ReplyPost Reply
  2. #2 Christian
    18.01.2011 um 23:56 Uhr

    Danke :)! Wenn man es ohne extra Classen-Erwähnung machen möchte, kann man auch in der Style-Datei einfach alle Bilder einbeziehen:

    1
    2
    3
    4
    5
    6
    7
    
    img {
    background: url(./ordnerstruktur/itrunde-schatten.gif) no-repeat right bottom;
    padding: 4px 10px 10px 4px;
    border: #eee 1px solid;
    border-right:none;
    border-bottom:none;
    }
    Post ReplyPost Reply
  3. #3 Bernd
    19.01.2011 um 02:51 Uhr

    Wenn du es aber für alle img Tags machst, dann betrifft das aber auch die smileys oder?

    Post ReplyPost Reply
  4. #4 Oliver Lippert
    19.01.2011 um 11:19 Uhr

    Danke das ist voll die Idee (auch für mein minimalistisches Blog-Design)…

    Wollt einfach mal Danke sagen 😛

    Post ReplyPost Reply
  5. #5 Christian
    19.01.2011 um 19:58 Uhr

    @Oliver Lippert: Bitte 😀

    @Bernd: Genau, die würde es dann auch betreffen 😉 – Kann man dann durch Klassen für die Smilies wieder unterbinden wenn man denn möchte.

    Post ReplyPost Reply
Kommentar schreiben