DnnContra Shadows

Using shadows in the dnncontra theme

Built into the DnnContra theme there are many css classes that make it easy to change the way the theme looks. One of these classes is allow you to add shadow to div and text.

Here is how to add a shadow to text:

Text shadow 1

Text shadow 2

Text shadow 3

Text shadow 4

Text shadow 5

 

    
    <h1 class="text-shadow-1">Text shadow 1</h1>
    <h1 class="text-shadow-2">Text shadow 2</h1>
    <h1 class="text-shadow-3">Text shadow 3</h1>
    <h1 class="text-shadow-4">Text shadow 4</h1>
    <h1 class="text-shadow-5">Text shadow 5</h1>

Here is an example of how to add a shadow to div's

shadow 1
shadow 2
shadow 3
shadow 4
shadow 5

    
<div class="row">
    <div class="col-md-12">
        <div class="teal lighten-2 shadow-1">shadow 1</div>
    </div>
    <div class="col-md-12">
        <div class="teal lighten-2 shadow-2">shadow 2</div>
    </div>
    <div class="col-md-12">
        <div class="teal lighten-2 shadow-3">shadow 3</div>
    </div>
    <div class="col-md-12">
        <div class="teal lighten-2 shadow-4">shadow 4</div>
    </div>
    <div class="col-md-12">
        <div class="teal lighten-2 shadow-5">shadow 5</div>
    </div>
</div>