EverWeb Widgets

Responsive Image Frame Widget

Alphonso Anon

Morning Mist

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.

Effects

The border and box shadow effects should need no explanation but the vignette and the drop shadow are not quite so straight forward.
Vignette Effect
This is created by enclosing the image in a placeholder div which has a CSS ::after pseudo selector to add the inset box shadow which creates the effect.
The inset radius in this case is set to 200px to give the blurring effect around the inside of the image. This is fine for a large image but probably too much when viewed on smaller screens. There are controls to reduce the radius on tablets and on phones. In this case they are set to 100px and 50px respectively.
Drop Shadow
The curved drop shadow extending off the bottom of the image is created by combining the shadows of both a "::before" and an "::after" psuedo element.
There are controls for adjusting the shadow color, the curve amount, the drop height, the spread radius, the blur radius and the inset from the left and right edge.
Most of these ajdustments will become clear after a little bit of experimentation although the value for "drop" works in the reverse of what you would expect. Increasing the value for drop decreases the amount of shadow showing below the image.
Wrapper
The overall wrap has controls for background color and its opacity and there is a control for spacing the item vertically from those above and below it to allow the box shadow and drop shadow to show.

© EverWeb Widgets -