In Material Design elements are given a ertain amount of three-dimensional qualities. This is reflected in element surfaces, depth, and shadows.
Some of this is build right into the Materialize frameworks, other things, such of the 'hover rise', are custom extensions only part of this theme.
The basic concept of shadow and depth is build right into Materialize. If you want to 'raise' an element simply add one of the 'z-depth' classes and the shadow will be added.
The .z-depth-1 class at the least elevation, the z-depth-5 class the most. So why are there 6 elevated boxes below? In Site Designer, simply click on the second one and look at the value in the class input to find out!
In the component below the shadow gets a little bit of a colored reflection from the colored component. Just see how this is done by looking at the box shadow controls (in Site Designer) and decide if that extra touch is worth your time.
The elements below show the same depth perspective as the examples above, but only when they are hovered (or tabbed on a touch screen).
It is almost as if the elements want to be clicked.
The .hover-raise-1 class creates the least elevation whereas z-depth-6 creates the highest elevantion. Simply add any of these classes to a container element to automatically create the effect.
In addition to creating depth using shadows, the elements below are also slightly raised when hovered or clicked.
This creates an even more pronounced 'material / real world' effect. Stripe was one of the companies to really popularize this effect, so for the kicks of it (and for your benefit) I recreated a Stripe button that also has a background fade below the components. Can you resist clicking it?
The .hover-raise-up-1 class creates the least elevation while z-depth-up-6 creates the highest elevantion. Simply add any of these classes to a container element to automatically create the effect.
When elements overlap creating the right depth perception can be tricky. In the 1st example below the element with the coffeecup has the same overall elevation as the element with number 1.
However, because the element with the coffeecup sits above an element that is raised as well, the shadow effect must be less pronounced.
In the 1st example below the top element partially overlaps an elevated element. In real life that would creater a wider shadow on the right. Thas is difficult to pull off in CSS. For these cass it is better to use the 2nd or 3rd variation below.