• Zum Inhalt springen
  • Zur Fußzeile springen

Sebastian Widmann | Blog

Webdesign und Web-Entwicklung aus Karlsruhe

  • Startseite
  • Webdesign
  • Knowledgebase
  • Kontakt

Innenliegender Schatten für Bilder mit CSS3

21. Dezember 2015 von Sebastian Widmann Kommentar verfassen

Schatten können mit Hilfe von CSS3 relativ einfach verwendet werden. Egal ob für DIVs, Texte oder auch für Bilder. Problematischer wird es aber, wenn das jeweilige Element keinen Schatten nach außen, sondern stattdessen nach innen werfen soll.

Bei Bildern funktioniert das dafür normalerweise verwendete box-shadow: inset 0 0 0 0 #CCC nämlich leider nicht.

Als Workaround für dieses Problem hilft jedoch, wenn man das Bild in ein DIV packt. Im nachfolgenden Beispiel hat das DIV die Klasse .header-image, also:

<div class="header-image">
    <img src="..." />
</div>

Um dem Bild jetzt einen innenliegenden Schatten zu verpassen, reicht folgender CSS-Code:

.header-image {
    position: relative;
    max-width: 100%;
    float: left;
}

.header-image::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 0 10px 0 rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 0 10px 0 rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 0 0 10px 0 rgba(0,0,0,0.3);
} 

.header-image img {
    float: left;
} 

Dabei wird in Wirklichkeit dem umschließenden DIV ein innenliegender Schatten verpasst, der jedoch so aussieht, als würde er innerhalb des Bildes liegen.

Möglicherweise auch interessant:

  • Responsive DIV mit korrektem Seitenverhältnis
  • Screenshots mit dem Mac
  • Springen der Fancybox verhindern
  • Bilder skalieren unter Mac OS X
  • Bilder bei Apple Mail als Anhang versenden

Kategorie: Allgemein Stichworte: Bild, CSS, Image, Schatten

Leser-Interaktionen

Schreibe einen Kommentar Antworten abbrechen

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

Footer

Die neusten Beiträge

  • Lösung für „Die Homematic CCU2 ist noch nicht bereit“ bei Zeitumstellung
  • URL aus Google Chrome Autocomplete löschen
  • macOS-Schlüsselbundprobleme lösen
  • Neuinstallation von macOS High Sierra
  • Mehrere Aufgaben auf einmal in Todoist hinzufügen

Die neusten Kommentare

  • Kollege bei Neuinstallation von macOS High Sierra
  • Karl Nepp bei Lösung für „Die Homematic CCU2 ist noch nicht bereit“ bei Zeitumstellung
  • verena bei Banana Walnut Bread wie von Starbucks
  • Sebastian Widmann bei URL per CronJob aufrufen
  • Pierre bei URL per CronJob aufrufen

© 2018 Sebastian Widmann | Datenschutzerklärung | Impressum | Folge mir auf Twitter

Diese Website nutzt Cookies, um bestmögliche Funktionalität bieten zu können.EinverstandenWeitere Informationen