A group of people photographing the Mona Lisa with their smartphones

<device-frame> Web Component

<device-frame> make it easy to add a fake device frame around content.

Features

  • iPhone/Pixel device frame and icons
  • Light/dark mode that respects prefers-color-scheme
  • Ability to show a home bar at the bottom of the screen
  • Set custom time displayed
  • Hide time and icons if you desire
  • Set padding to respect device safe area inset
  • Use padding="top" in combination with theme="#0000ff" to show a themed bar at the top of the device (any string, eventually assigned to background)
  • A nice shadow with the shadow attribute

Demo

Screenshot of a webpage with scrollScreenshot of a webpage with scroll

Posted in: #web-components by Avatar image of me@ https://danleatherman.com/device-frame/

Blog image by Mika Baumeister

Webmentions

9 Likes

Burton Smith
Phil Betts
Rumen Petrov
Florian Geierstanger
Tyler Sticka
Zach Leatherman :11ty:
Dave Rupert
yuanchuan
xacobenet

9 Reposts

Zach Leatherman :11ty:
Fynn Ellie Becker
Dave Rupert
Burton Smith
thurti
Ryan
hypebot
hypebot
Marek Fořt

1 Reply

Zach Leatherman :11ty:
Zach Leatherman :11ty:

@danleatherman yes, thank you source

These are webmentions via the IndieWeb and webmention.io. Mention this post from your site:

More posts