Sombras

Mejora la estética de tus elementos añadiendo sombras con las clases de sombra.

Sombras de caja exterior

Clase	Descripción
.no-shadow	No-Shadow. Esta clase eliminará cualquier sombra aplicada al elemento.
.shadow-s	Shadow-Small. Esta clase aplicará una sombra de tamaño reducido alrededor del elemento.
.shadow-m	Shadow-Medium. Esta clase aplicará una sombra de tamaño medio alrededor del elemento.
.shadow-l	Shadow-Large. Esta clase aplicará una sombra de tamaño grande alrededor del elemento.

Tamaños de sombras

no-shadows

shadow-s

shadow-m

shadow-l

HTML

                                    
    <div class="shadow-l no-shadow">no-shadows</div>   
    <div class="shadow-s">shadows-s</div>   
    <div class="shadow-m">shadows-m</div>   
    <div class="shadow-l">shadows-l</div>

Sombras de caja interior

Clase	Descripción
.shadow-s-i	Shadow-Small-Inside. Esta clase aplicará una sombra de tamaño reducido al interior del elemento.
.shadow-m-i	Shadow-Medium-Inside. Esta clase aplicará una sombra de tamaño medio al interior del elemento.
.shadow-l-i	Shadow-Large-Inside. Esta clase aplicará una sombra de tamaño grande al interior del elemento.

Tamaños de sombras

shadow-s-i

shadow-m-i

shadow-l-i

HTML

                                    
    <div class="shadow-s-i">shadows-s-i</div>   
    <div class="shadow-m-i">shadows-m-i</div>   
    <div class="shadow-l-i">shadows-l-i</div>

Sombras de textos

Clase	Descripción
.text-shadow-s	Text-Shadow-Small. Esta clase aplicará una sombra de tamaño reducido alrededor del elemento.
.text-shadow-m	Text-Shadow-Medium. Esta clase aplicará una sombra de tamaño medio alrededor del elemento.
.text-shadow-l	Text-Shadow-Large. Esta clase aplicará una sombra de tamaño grande alrededor del elemento.

Tamaños de sombras

shadow-s shadow-m shadow-l

HTML

                                    
    <div class="text-shadow-s">shadows-s</div>   
    <div class="text-shadow-m">shadows-m</div>   
    <div class="text-shadow-l">shadows-l</div>