Screenshots per Css mit schickem Monitor-Rahmen versehen

von

Wer Screenshots seiner Arbeiten zeigen möchte und dabei ein paar Bytes sparen will, kann sich folgender Technik bedienen: Dem Bild wird hierbei einfach per Css ein Hintergrundbild verpasst sowie ein Padding, damit das Hintergrundbild auch sichtbar wird.

See the Pen ushji by Hans Spieß (@hansspiess) on CodePen.

Wer es noch naturalistischer mag, kann einen obendraufsetzen, im wahrsten Sinne des Wortes. Ein Png simuliert hier noch den eleganten Lichtreflex auf dem Monitor. Leider interpretieren die meisten Browser img:after nicht, daher ist hier im Markup ein Container nötig.

See the Pen Cyvew by Hans Spieß (@hansspiess) on CodePen.

Kommentieren