ThemeKit Images

Image Frame

ThemeKit Image Frame

Ovation

Responsive Image Frame

Frame

Adding a frame to an image can have a striking effect and draw the vistor's focus into the image. Using yet another image to add a frame is a very outdated idea and should never be used on a responsive website.
The ThemeKit Image Frame is created purely using CSS, It has an outer border and an optional bottom box shadow, padding to simulate the mat, an inner border to create a recessed effect and an inner box shadow to create a vignette effect.
The signature is optional and appears at the bottom right with controls for reducing the font size with reduction of the viewing device's width.
The font can be any Google hosted cursive font - in this case Qwigley.
Images
The images used in the demo were resized and optimised before importing into EverWeb to …

  • Large image - 960 x 640px file size 63KB
  • Mobile image - 600 x 400px file size 33KB
  • Phone image - 375 x 5400px file size 23KB

Lazy Loading

Like all images on a reqponsive website the images should have a lazy load function if they are not in the viewport at page load.

Menu