This page requires a Javascript enabled browser
<< Back | Main Menu | FAQ | [?]

Ribbons

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

1
2
<!-- DC Ribbons CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/ribbons/css/dc_ribbons.css" />

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

1
2
<!-- DC Ribbons CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/ribbons/css/dc_ribbons.css" />

Ribbon Left

Left Edge Marker


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

View code:

1
2
3
4
5
6
7
8
9
10
11
<!-- DC Ribbons Start -->
  <div class="dc_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:

1
2
3
4
5
6
<!-- DC Ribbons Start -->
  <div class="dc_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://cdn.dcodes.net/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:

1
2
3
4
5
6
7
8
9
10
11
<!-- DC Ribbons Start -->
<div class="dc_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:

1
2
3
4
5
<!-- DC Ribbons Start -->
  <div class="dc_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://cdn.dcodes.net/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:

1
2
3
4
5
6
7
8
9
10
11
<!-- DC Ribbons Start -->
  <div class="dc_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:

1
2
3
4
5
<!-- DC Ribbons Start -->
  <div class="dc_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://cdn.dcodes.net/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:

1
2
3
4
5
6
7
8
9
10
11
<!-- DC Ribbons Start -->
  <div class="dc_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:

1
2
3
4
5
<!-- DC Ribbons Start -->
  <div class="dc_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://cdn.dcodes.net/p/678x130" width="678" height="130" /> </div>
<!-- DC Ribbons End -->

Ribbon Banners 1

Blue
Red
Green
Yellow

View code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- DC Ribbons Start -->
  <div class="dc_ribbon_banner">
    <div class="ribbon-banner fold-down lblue"><span>Blue</span></div>
  </div>
  <div class="dc_ribbon_banner">
    <div class="ribbon-banner fold-down lred"><span>Red</span></div>
  </div>
  <div class="dc_ribbon_banner">
    <div class="ribbon-banner fold-down lgreen"><span>Green</span></div>
  </div>
  <div class="dc_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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- DC Ribbons Start -->
  <div class="dc_ribbon_banner">
    <div class="ribbon-banner fold-straight lblue"><span>Blue</span></div>
  </div>
  <div class="dc_ribbon_banner">
    <div class="ribbon-banner fold-straight lred"><span>Red</span></div>
  </div>
  <div class="dc_ribbon_banner">
    <div class="ribbon-banner fold-straight lgreen"><span>Green</span></div>
  </div>
  <div class="dc_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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- DC Ribbons Start -->
  <div class="dc_ribbon_banner">
    <div class="ribbon-banner curve fold-up lblue"><span>Blue</span></div>
  </div>
  <div class="dc_ribbon_banner">
    <div class="ribbon-banner curve fold-up lred"><span>Red</span></div>
  </div>
  <div class="dc_ribbon_banner">
    <div class="ribbon-banner curve fold-up lgreen"><span>Green</span></div>
  </div>
  <div class="dc_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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- DC Ribbons Start -->
  <div class="dc_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="dc_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="dc_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="dc_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