UIkit: Schatten

UIkit bietet mehrere Möglichkeiten, Boxen mit Schatten zu versehen.
Hier die schönsten Varianten.

Box shadow bottom

Auffälliger Schatten unterhalb der Box lässt das Element schweben.

<div class="uk-box-shadow-bottom uk-box-shadow-small uk-width-1-2@s uk-text-center">
    <div class="uk-background-default uk-padding-large">
        Box shadow bottom
    </div>
</div>

getuikit.com

---

Hover

Animation per Mouseover

<div class="uk-child-width-1-2@s uk-text-center" uk-grid>
  <div>
    <div class="uk-box-shadow-small uk-box-shadow-hover-large uk-padding">
    Small + Hover Large
    </div>
  </div>
  <div>
    <div class="uk-box-shadow-xlarge uk-box-shadow-hover-medium uk-padding">
    XLarge + Hover Medium
    </div>
  </div>
</div>