Elements & images

How to add some effect on a block ?

In this video you will see how add a gradient, a padding and a shadow to a content block !


Shadow effects can be added to the element by CSS classes. They activate the Javascript that handles different sizes and effects.
For the examples below I have created block CONTENT and block IMAGE. For each I've added a 'design' with the classes mentioned in the block (bottom-shadow for the image).
Horizontal separation of the blocks was done with the wonderful plugin 'spacer' of TravisN. 

Simple shadow

Simple shadow

class : shadow padding

Bottom shadow

Bottom shadow

class : bottom-shadow gradient

Big shadow

Big shadow

class : big-shadow padding

Fly shadow

Fly Shadow

class : gradient padding fly-shadow rounded


Reflections were added on the following three images by adding a 'design' and then one class. It is also possible to add classes of images from the block content.

Classes available :


Two way to add reflect to an image

In this video, you will see how to add reflect to pictures.