Ribbons

CSS/JS files (add code to <HEAD> section):


<!-- DC Ribbons CSS -->
<link type="text/css" rel="stylesheet" href="dreamcodes/ribbons/css/tsc_ribbons.css" />

Ribbon Left

Left Edge Marker


Add images, links or text
This is a just a [DIV] layer.

View code:


<!-- DC Ribbons Start -->
  <div class="tsc_ribbon_wrap edge" style="width:80%; height:130px;">
    <div class="ribbon-wrap left-edge point lblue"><span>Left Edge Marker</span></div>
    <br />
    <br />
    <div align="center">
      <big>Add images, <a href="http://www.bing.com">links</a> or text<br />
        <small>This is a just a [DIV] layer.</small></big>
    </div>
  </div>
<!-- DC Ribbons End -->
Left Edge Marker

View code:


<!-- DC Ribbons Start -->
  <div class="tsc_ribbon_wrap edge" style="width:678px; height:130px;">
    <div class="ribbon-wrap left-edge point lred"><span>Left Edge Marker</span></div>
    <!-- sample image --> 
    <img src="http://pimg.co/p/678x130" width="678" height="130" /> </div>
<!-- DC Ribbons End -->

Ribbon Right

Right Edge Marker


Add images, text or anything
This is a just a [DIV] layer.

View code:


<!-- DC Ribbons Start -->
<div class="tsc_ribbon_wrap edge" style="width:80%; height:130px;">
    <div class="ribbon-wrap right-edge point lblue"><span>Right Edge Marker</span></div>
    <br />
    <br />
    <div align="center">
      <big>Add images, text or anything<br />
        <small>This is a just a [DIV] layer.</small></big>
    </div>
  </div>
<!-- DC Ribbons End -->
Right Edge Marker

View code:


<!-- DC Ribbons Start -->
  <div class="tsc_ribbon_wrap edge" style="width:678px; height:130px;">
    <div class="ribbon-wrap right-edge point lred"><span>Right Edge Marker</span></div>
    <img src="http://pimg.co/p/678x130" width="678" height="130" /> </div>
<!-- DC Ribbons End -->

Ribbon Left

Left Edge Marker


Add images, text or anything
This is a just a [DIV] layer.

View code:


<!-- DC Ribbons Start -->
  <div class="tsc_ribbon_wrap edge" style="width:80%; height:130px;">
    <div class="ribbon-wrap left-edge fork lblue"><span>Left Edge Marker</span></div>
    <br />
    <br />
    <div align="center">
      <big>Add images, text or anything<br />
        <small>This is a just a [DIV] layer.</small></big>
    </div>
  </div>
<!-- DC Ribbons End -->
Left Edge Marker

View code:


<!-- DC Ribbons Start -->
  <div class="tsc_ribbon_wrap edge" style="width:678px; height:130px;">
    <div class="ribbon-wrap left-edge fork lred"><span>Left Edge Marker</span></div>
    <img src="http://pimg.co/p/678x130" width="678" height="130" /> </div>
<!-- DC Ribbons End -->

Ribbon Right

Right Edge Marker


Add images, text or anything
This is a just a [DIV] layer.

View code:


<!-- DC Ribbons Start -->
  <div class="tsc_ribbon_wrap edge" style="width:80%; height:130px;">
    <div class="ribbon-wrap right-edge fork lblue"><span>Right Edge Marker</span></div>
    <br />
    <br />
    <div align="center">
      <big>Add images, text or anything<br />
        <small>This is a just a [DIV] layer.</small></big>
    </div>
  </div>
<!-- DC Ribbons End -->
Right Edge Marker

View code:


<!-- DC Ribbons Start -->
  <div class="tsc_ribbon_wrap edge" style="width:678px; height:130px;">
    <div class="ribbon-wrap right-edge fork lred"><span>Right Edge Marker</span></div>
    <img src="http://pimg.co/p/678x130" width="678" height="130" /> </div>
<!-- DC Ribbons End -->

Ribbon Banners 1

Blue
Red
Green
Yellow

View code:


<!-- DC Ribbons Start -->
  <div class="tsc_ribbon_banner">
    <div class="ribbon-banner fold-down lblue"><span>Blue</span></div>
  </div>
  <div class="tsc_ribbon_banner">
    <div class="ribbon-banner fold-down lred"><span>Red</span></div>
  </div>
  <div class="tsc_ribbon_banner">
    <div class="ribbon-banner fold-down lgreen"><span>Green</span></div>
  </div>
  <div class="tsc_ribbon_banner">
    <div class="ribbon-banner fold-down lyellow"><span>Yellow</span></div>
  </div>
<!-- DC Ribbons End -->

Ribbon Banners 2

Blue
Red
Green
Yellow

View code:


<!-- DC Ribbons Start -->
  <div class="tsc_ribbon_banner">
    <div class="ribbon-banner fold-straight lblue"><span>Blue</span></div>
  </div>
  <div class="tsc_ribbon_banner">
    <div class="ribbon-banner fold-straight lred"><span>Red</span></div>
  </div>
  <div class="tsc_ribbon_banner">
    <div class="ribbon-banner fold-straight lgreen"><span>Green</span></div>
  </div>
  <div class="tsc_ribbon_banner">
    <div class="ribbon-banner fold-straight lyellow"><span>Yellow</span></div>
  </div>
<!-- DC Ribbons End -->

Ribbon Banners 3

Blue
Red
Green
Yellow

View code:


<!-- DC Ribbons Start -->
  <div class="tsc_ribbon_banner">
    <div class="ribbon-banner curve fold-up lblue"><span>Blue</span></div>
  </div>
  <div class="tsc_ribbon_banner">
    <div class="ribbon-banner curve fold-up lred"><span>Red</span></div>
  </div>
  <div class="tsc_ribbon_banner">
    <div class="ribbon-banner curve fold-up lgreen"><span>Green</span></div>
  </div>
  <div class="tsc_ribbon_banner">
    <div class="ribbon-banner curve fold-up lyellow"><span>Yellow</span></div>
  </div>
<!-- DC Ribbons End -->

Ribbon Bookmarks

Small
Medium
Large
Small
Medium
Large
Small
Medium
Large
Small
Medium
Large

View code:


<!-- DC Ribbons Start -->
  <div class="tsc_ribbon_hang">
    <div class="ribbon-bookmark lblue small"><span>Small</span></div>
    <div class="ribbon-bookmark lblue medium"><span>Medium</span></div>
    <div class="ribbon-bookmark lblue large"><span>Large</span></div>
  </div>
  <div class="tsc_ribbon_hang">
    <div class="ribbon-bookmark lred small"><span>Small</span></div>
    <div class="ribbon-bookmark lred medium"><span>Medium</span></div>
    <div class="ribbon-bookmark lred large"><span>Large</span></div>
  </div>
  <div class="tsc_ribbon_hang">
    <div class="ribbon-bookmark lgreen small"><span>Small</span></div>
    <div class="ribbon-bookmark lgreen medium"><span>Medium</span></div>
    <div class="ribbon-bookmark lgreen large"><span>Large</span></div>
  </div>
  <div class="tsc_ribbon_hang">
    <div class="ribbon-bookmark lyellow small"><span>Small</span></div>
    <div class="ribbon-bookmark lyellow medium"><span>Medium</span></div>
    <div class="ribbon-bookmark lyellow large"><span>Large</span></div>
  </div>
<!-- DC Ribbons End -->


© TemplateAccess