In einem Design, dass ich vor kurzem umsetzen musste, gab es jede Menge Bilder die einen nach innen liegenden Schlagschatten aufwiesen. Einfache Sache, dachte ich mir: Dem img-Element einfach einen box-shadow mit der Eigenschaft inset zuweisen– et voilà, die Sache wäre geritzt.

Simple Lösung, die nur einen Nachteil hat: Sie funktioniert nicht.

Alles fängt damit an, dass nach innen weisende Schatten im Css direkt auf den Hintergrund gezeichnet werden.

In terms of stacking contexts and the painting order, the outer shadows of an element are drawn immediately below the background of that element, and the inner shadows of an element are drawn immediately above the background of that element (below the borders and border image, if any).
CSS Backgrounds and Borders Module Level 3

Etwas problematisch bei img-Elementen, denn wenn das referenzierte Bild nicht transparent ist überlagert es den darunter liegenden Schatten, dieser ist also nicht sichtbar.
Somit war dieser Ansatz gestorben– eine zweite Idee musste her.

Pseudo-Elemente to the rescue!

Der zweite Lösungsvorschlag bestand im Erschaffen eines Pseudo-Elements durch :before oder :after sowie dem anschließenden Zuweisen der box-shadow-Eigenschaft zu diesem Pseudo-Element.

Wieder eine simple Lösung, die nur einen kleinen Nachteil hatte: Auch sie funktionierte nicht.

img-Elemente sind sogenannte replaced elements (Anmerkung: Deutsche Übersetzung nicht bekannt). Und was steht in der Spezifikation zu :before und :after sowie ihrem Zusammenspiel mit replaced elements?

This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
Generated content, automatic numbering, and lists

Mist. Mistmistmist.

Aller guten Dinge sind drei

Einen dritten Ansatz hatte ich noch in petto: Er war nicht ganz so schön, weil zusätzliches Markup von Nöten war, doch theoretisch sollte er funktionieren… Und zwar wollte ich dem Bild ein Container-Element (hier bietet sich natürlich figure an) spendieren, diesem Container ein Pseudo-Element zuweisen und dem Pseudo-Element die box-shadow-Eigenschaft verpassen.

Trommelwirbel.

Was soll ich sagen: Es funktionierte. Sogar auf verschiedene Weise: Einmal mit box-shadow und einmal mit einem Css3-Verlauf. Ich habe eine Demo erstellt, wo Markup und Styles nachvollzogen werden können: box-shadow inset für img-Elemente.
Wieder was gelernt.

Bis 767px Viewportbreite

• Linearisierte Darstellung
• Body: jeweils 20px Abstand zu beiden Seiten
• Seite ist fluid

Ab 768 – 979px Viewportbreite

• Seitenbreite: 724px
• Abstand zwischen Grid-Units: 20px

Grid

Ab 980 – 1199px Viewportbreite

• Seitenbreite: 940px
• Abstand zwischen Grid-Units: 20px

Grid

Ab 1170px Viewportbreite

• Seitenbreite: 1170px
• Abstand zwischen Grid-Units: 30px

Grid

define( 'FS_METHOD', 'direct' );

Hintergrund

Beim Upgrade überprüft WordPress, ob es Dateien schreiben/ verändern kann, ohne den Owner zu verändern. Falls dies nicht möglich ist, fragt WordPress nach den FTP-Daten, um die Dateien als Nutzer zu verändern. WordPress führt also indirekt Änderungen durch. Wenn es gezwungen wird, die direkte Methode zu verwenden, darf WordPress die Dateien selbst ändern/ überschreiben.

Gut zu wissen

Natürlich funktioniert die direkte Methode nicht nur lokal, sondern auch auf Live-Webservern und kann bei Upgrade-Problemen aktiviert werden.

Links

Editing wp-config.php: WordPress Upgrade Constants
Tutorial: Using the WP_Filesystem

pwgen -c -n -y -s -B 12 3

Parameter

-c = Fügt mindestens einen Großbuchstaben in das Passwort ein
-n = Fügt mindestens eine Nummer in das Passwort ein
-y = Fügt mindestens ein Symbol in das Passwort ein
-s = Das Passwort wird komplett zufällig generiert
-B = Vermeidet das Einfügen von ähnlichen Buchstaben wie 0 und O
12 = Anzahl der Zeichen, die das Passwort haben soll
3 = Anzahl der Passwörter, die generiert werden

Umso erfreuter war ich, als ich bei Chris Coyier ein äußerst hilfreiches Snippet fand.

require 'fileutils'
on_stylesheet_saved do |file|
  if File.exists?(file) && File.basename(file) == "style.css"
    puts "Moving: #{file}"
    FileUtils.mv(file, File.dirname(file) + "/../" + File.basename(file))
  end
end

Das Snippet sucht nach dem Kompilieren die Datei style.css und schiebt sie innerhalb der Verzeichnisstruktur eine Ebene höher, in meinem Fall also ins Root-Verzeichnis des Themes.

Links

Compass Compiling and WordPress Themes

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {}

Während -webkit-min-device-pixel-ratio das Verhältnis von Gerätepixeln zu geräteunabhängigen Pixeln abfragt, checkt min-resolution ob eine Punktdichte von mindestens 192dpi erreicht ist. In einer hoffentlich nicht allzu fernen Zukunft soll sogar nur noch die device pixel ratio mit der Maßeinheit dots per pixel relevant sein- dann wird der Mediaquery so aussehen:

@media only screen and (min-resolution: 2dppx) {}

(Lies: Wenn 2 oder mehr Gerätepixel auf ein geräteunabhängiges Pixel kommen, dann…)

Links

Resolution in Media Queries
Media Queries