Framework7
v3
Support Framework7
stars forks
iOSAndroid
Improve this Doc

Elevation

    Shadows provide important visual cues about objects' depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An object's elevation determines the appearance of its shadow. The elevation values are in range from 0 to 24.

    Elevation can be added to any element by adding elevation-0, elevation-1, ..., elevation-24 classes.

    To add different elevation only on hover (desktop), you can use elevation-hover-0, elevation-hover-1, ..., elevation-hover-24 classes.

    To specify elevation only when item pressed, you can use elevation-pressed-0, elevation-pressed-1, ..., elevation-pressed-24 classes.

    To add transition between elevation changes (when elevation-$n, elevation-hover-$n and elevation-pressed-$n used together) we can add elevation-transition class to element, it will set 200ms transition duration. To use different duration we can use one of elevation-transition-100, elevation-transition-200, ..., elevation-transition-500 classes.

    <div class="row">
  <div class="col">
    <div class="elevation-1">1</div>
  </div>
  <div class="col">
    <div class="elevation-2">2</div>
  </div>
  <div class="col">
    <div class="elevation-3">3</div>
  </div>
</div>
<div class="row">
  <div class="col">
    <div class="elevation-4">4</div>
  </div>
  <div class="col">
    <div class="elevation-5">5</div>
  </div>
  <div class="col">
    <div class="elevation-6">6</div>
  </div>
</div>
<div class="row">
  <div class="col">
    <div class="elevation-7">7</div>
  </div>
  <div class="col">
    <div class="elevation-8">8</div>
  </div>
  <div class="col">
    <div class="elevation-9">9</div>
  </div>
</div>
<div class="row">
  <div class="col">
    <div class="elevation-10">10</div>
  </div>
  <div class="col">
    <div class="elevation-11">11</div>
  </div>
  <div class="col">
    <div class="elevation-12">12</div>
  </div>
</div>
<div class="row">
  <div class="col">
    <div class="elevation-13">13</div>
  </div>
  <div class="col">
    <div class="elevation-14">14</div>
  </div>
  <div class="col">
    <div class="elevation-15">15</div>
  </div>
</div>
<div class="row">
  <div class="col">
    <div class="elevation-16">16</div>
  </div>
  <div class="col">
    <div class="elevation-17">17</div>
  </div>
  <div class="col">
    <div class="elevation-18">18</div>
  </div>
</div>
<div class="row">
  <div class="col">
    <div class="elevation-19">19</div>
  </div>
  <div class="col">
    <div class="elevation-20">20</div>
  </div>
  <div class="col">
    <div class="elevation-21">21</div>
  </div>
</div>
<div class="row">
  <div class="col">
    <div class="elevation-22">22</div>
  </div>
  <div class="col">
    <div class="elevation-23">23</div>
  </div>
  <div class="col">
    <div class="elevation-24">24</div>
  </div>
</div>
    <div class="row">
  <div class="col">
    <div class="elevation-demo elevation-6 elevation-hover-24 elevation-pressed-12 elevation-transition">6 + hover-24 + pressed-12</div>
  </div>
</div>