Styles: Dividers

CSS STYLES ☰

dye-divider


dye-divider_bold


dye-divider_lg


dye-divider_small



dye-divider_box


dye-divider_box_small



column

dye-divider_column

This adds sidebars to your columns, won't affect overall width of the column.

column





Here are some examples for you to use




Simple Dividers:


1px colored
 
<!-- DIVIDER -->
<div style="font-size: 1px;" class="dye_navi_vlt">&nbsp;</div>
<!-- /DIVIDER -->



1px colored dye-divider
 
<!-- DIVIDER -->
<div style="font-size: 1px;" class="dye-divider dye_navi_vlt">&nbsp;</div>
<!-- /DIVIDER -->



1px colored dye-divider
 
<!-- DIVIDER-->
<div style="font-size: 3px;" class="dye-divider dye_navi_vlt">&nbsp;</div>
<!-- /DIVIDER-->



1px colored dye-divider
 
<!-- DIVIDER-->
<div style="font-size: 5px;" class="dye-divider dye_navi_vlt">&nbsp;</div>
<!-- /DIVIDER-->



1px colored dye-divider
 
<!-- DIVIDER-->
<div style="font-size: 10px;" class="dye-divider dye_navi_vlt">&nbsp;</div>
<!-- /DIVIDER-->



1px colored dye-divider
Text Divider
<!-- DIVIDER-->
<div class="dye-divider dye_navi_vlt"><b>Text Divider</b></div>
<!-- /DIVIDER-->



1px  dye_img-BG1  dye-divider
Text Divider
<!-- DIVIDER-->
  <div class="dye-divider dye_img-BG1"><b>Text Divider</b></div>
<!-- /DIVIDER-->




Simple Dividers- BOLD:

Same as above with BOLD divider


 
<!-- DIVIDER-->
  <div style="font-size: 1px;" class="dye-divider_bold dye_navi_vlt">&nbsp;</div>
<!-- /DIVIDER-->




 
<!-- DIVIDER-->
<div style="font-size: 3px;" class="dye-divider_bold dye_navi_vlt">&nbsp;</div>
<!-- /DIVIDER-->




 
<!-- DIVIDER-->
<div style="font-size: 5px;" class="dye-divider_bold dye_navi_vlt">&nbsp;</div>
<!-- /DIVIDER-->




 
<!-- DIVIDER-->
  <div style="font-size: 10px;" class="dye-divider_bold dye_navi_vlt">&nbsp;</div>
<!-- /DIVIDER-->




Text Divider
<!-- DIVIDER-->
<div class="dye-divider_bold dye_navi_vlt"><b>Text Divider&vlt;/b></div>
<!-- /DIVIDER-->




Text Divider
<!-- DIVIDER-->
<div class="dye-divider_bold dye_img-BG1"><b>Text Divider-bold</b></div>
<!-- /DIVIDER-->



Simple Dividers- LG:

Same as above with LARGE divider


 
<!-- DIVIDER-->
<div style="font-size: 1px;" class="dye-divider_lg dye_navi_vlt">&nbsp;</div>
<!-- /DIVIDER-->




 
<!-- DIVIDER-->
<div style="font-size: 3px;" class="dye-divider_lg dye_navi_vlt">&nbsp;</div>
<!-- /DIVIDER-->




 
 <!-- DIVIDER-->
<div style="font-size: 5px;" class="dye-divider_lg dye_navi_vlt">&nbsp;</div>
<!-- /DIVIDER-->




 
<!-- DIVIDER-->
<div style="font-size: 10px;" class="dye-divider_lg dye_navi_vlt">&nbsp;</div>
<!-- /DIVIDER-->




Text Divider
<!-- DIVIDER-->
<div class="dye-divider_lg dye_navi_vlt"><b>Text Divider&vlt;/b></div>
<!-- /DIVIDER-->




Text Divider
<!-- DIVIDER-->
  <div class="dye-divider_lg dye_img-BG1"><b>Text Divider-bold</b></div>
<!-- /DIVIDER-->




Text Divider
<!-- DIVIDER-->
  <div style="margin-left: 20%; margin-right: 20%;" class="dye-divider_lg dye_navi_vlt dye_img-ROUNDED-50"><b>Text  Divider</b></div>
<!-- /DIVIDER-->




Nested Dividers:

Fancy multi-layer dividers


nested 1
 
 <!-- DIVIDER-->
         <div class="dye-divider dye_navi_xxdk">
            <div class="dye-divider dye_navi_vdk">
              <div class="dye-divider dye_navi_lt">
                <div style="font-size: 1px;" class="dye-divider dye_navi_vlt">&nbsp;</div>
              </div>
            </div>
          </div>
<!-- /DIVIDER-->



nested 1 with text
<!-- DIVIDER-->
          <div class="dye-divider dye_navi_xxdk">
            <div class="dye-divider dye_navi_vdk">
              <div class="dye-divider dye_navi_lt">
                <div style="font-size: medium;" class="dye-divider dye_navi_vlt"><b>nested
                    1 with text</b></div>
              </div>
            </div>
          </div>
<!-- /DIVIDER-->







nested 2
 
<!-- DIVIDER-->
          <div class="dye-divider dye_navi_xxlt">
            <div class="dye-divider dye_navi_xlt">
              <div class="dye-divider dye_navi_lt">
                <div style="font-size: 1px;" class="dye-divider dye_navi_vdk">&nbsp;</div>
              </div>
            </div>
          </div>
<!-- /DIVIDER-->




nested 2 with text
<!-- DIVIDER-->
          <div class="dye-divider dye_navi_xxlt">
            <div class="dye-divider dye_navi_xlt">
              <div class="dye-divider dye_navi_lt">
                <div style="font-size: medium;" class="dye-divider dye_navi_vdk">nested
                  2 with text</div>
              </div>
            </div>
          </div>
<!-- /DIVIDER-->







nested3
 
<!-- DIVIDER-->
          <div class="dye-divider dye_navi_vdk">
            <div class="dye-divider dye_navi_vlt">
              <div class="dye-divider dye_navi_vdk">
                <div style="font-size: 1px;" class="dye-divider dye_navi_vlt">&nbsp;</div>
              </div>
            </div>
          </div>
<!-- /DIVIDER-->




nested 3 with text

<!-- /DIVIDER-->
          <div class="dye-divider dye_navi_vdk">
            <div class="dye-divider dye_navi_vlt">
              <div class="dye-divider dye_navi_vdk">
                <div style="font-size: medium;" class="dye-divider dye_navi_vlt">nested
                  3 with text</div>
              </div>
            </div>
          </div>
<!-- /DIVIDER-->





© SiteDyes.com 2018
Web colors by SiteDyes.com