Pro

Shadow

Add or remove shadows on multiple actions

Overview

Use shadow{size} values in data-fx data attribute to set element shadow.

How to use

Use data-fx="{action}:shadow{size}" data attribute to change the element’s shadow.

Where {action} is one of:

  • h: to animate an element when it’s hovered
  • a: to animate an element when it gets .active class
  • th: to animate an element when the parent trigger is hovered
  • ta: to animate an element when the parent trigger gets .active or .show class

… and shadow{size} can be:

  • shadow-sm - adds a small shadow
  • shadow - adds a regular (default) shadow
  • shadow-lg - adds a large shadow
  • shadow-xl - adds an extra large shadow
  • shadow-risen - adds a risen shadow
  • shadow-0 - removes any shadow

On hover

To change a shadow of a single element on its hover, add data-fx="h:shadow{size}" data attribute.

h:shadow-sm
h:shadow
h:shadow-lg
h:shadow-xl
h:shadow-pop
h:shadow-risen
<div data-fx="h:shadow-sm">h:shadow-sm</div>
<div data-fx="h:shadow">h:shadow</div>
<div data-fx="h:shadow-lg">h:shadow-lg</div>
<div data-fx="h:shadow-xl">h:shadow-xl</div>
<div data-fx="h:shadow-pop">h:shadow-pop</div>
<div data-fx="h:shadow-risen">h:shadow-risen</div>

On active

To change a shadow of a single element when it gets .active class, add data-fx="a:shadow{size}" data attribute.

Click the elements to toggle its .active class
a:shadow-sm
a:shadow
a:shadow-lg
a:shadow-xl
a:shadow-pop
a:shadow-risen
<div data-fx="a:shadow-sm">a:shadow-sm</div>
<div data-fx="a:shadow">a:shadow</div>
<div data-fx="a:shadow-lg">a:shadow-lg</div>
<div data-fx="a:shadow-xl">a:shadow-xl</div>
<div data-fx="a:shadow-pop">a:shadow-pop</div>
<div data-fx="a:shadow-risen">a:shadow-risen</div>

On trigger hover

Change a shadow of a single or multiple elements when the parent trigger is hovered. At first, indicate what is parent trigger element by adding data-trigger="hover" attribute to it, then add data-fx="th:shadow{size}" data attribute to elements you want to add a shadow when trigger is hovered.

Hover this trigger
th:shadow-sm
th:shadow
th:shadow-lg
th:shadow-xl
th:shadow-pop
th:shadow-risen
<div data-trigger="hover">
  <div data-fx="th:shadow-sm">th:shadow-sm</div>
  <div data-fx="th:shadow">th:shadow</div>
  <div data-fx="th:shadow-lg">th:shadow-lg</div>
  <div data-fx="th:shadow-xl">th:shadow-xl</div>
  <div data-fx="th:shadow-pop">th:shadow-pop</div>
  <div data-fx="th:shadow-risen">th:shadow-risen</div>
</div>

On trigger active

Change a shadow of a single or multiple elements when the parent trigger gets .active or .show class. At first, indicate what is parent trigger element by adding data-trigger="{active|show}" attribute to it, then add data-fx="ta:shadow{size}" data attribute to elements you want to add a shadow when trigger is hovered.

Click this trigger to toggle its .active class
ta:shadow-sm
ta:shadow
ta:shadow-lg
ta:shadow-xl
ta:shadow-pop
ta:shadow-risen
<div data-trigger="active">
  <div data-fx="ta:shadow-sm">ta:shadow-sm</div>
  <div data-fx="ta:shadow">ta:shadow</div>
  <div data-fx="ta:shadow-lg">ta:shadow-lg</div>
  <div data-fx="ta:shadow-xl">ta:shadow-xl</div>
  <div data-fx="ta:shadow-pop">ta:shadow-pop</div>
  <div data-fx="ta:shadow-risen">ta:shadow-risen</div>
</div>