Responsive Image Frame
CSS is used here to add frame and shadow effects to a responsive image. The images are inserted using the HTML5 <picture> element to load different sized image for the various devices. This element allows us to download different sizes of images depending on the browser or device viewport and makes for faster downloading web pages for mobile device users.
The large image is 1600px wide and is displayed when the browser width is above 1200px.
The medium image is 1200px wide and is displayed on browser widths below 1200px and on tablets in landscape mode.
The small image is 800px wide and will display on tablets in portrait mode and mobile phones.
The widget inserts a pollyfill script for ancient browsers which don't support the picture element.
Elements
In the image above - working from the inside outwards - there is an inset shadow to create the "vingnette" effect, an image border, padding to create the "frame mask", an overall border for the frame, a box shadow around the frame and a drop shadow extending off the bottom edge.
The main element is an HTML5 <figure> with optional figcaption. This, along with the image alt text, helps the search engines to index the image.
Signature
The "signature" uses a Google hosted font and can be placed anywhere within the image using absolute positioning and the controls provided.
Since the signature is seen to be part of the image, its font size needs to reduce in proportion to the image size as viewed in the browser.
There are various ways to make the font size respond to viewport width.
The method here uses viewport units where 1vw is relative to 1% of the width of the viewport. The range available is from 1 to 6 in half unit steps which should cover most situations.