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

Page Headers

Spice up your pages with these fancy title headers.

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

1
2
3
4
<!-- DC Page Header CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/headers/css/dc_headers.css" />
<!-- DC Page Header JS -->
<script type="text/javascript" src="dcodes/headers/js/dc_headers.js"></script>

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

1
2
3
4
<!-- DC Page Header CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/headers/css/dc_headers.css" />
<!-- DC Page Header JS -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/headers/js/dc_headers.js"></script>

Gradient

CSS Gradient Text

View code:

1
2
3
4
5
<!-- DC Page Header Start -->
  <div class="dc_gradient1">
    <h1><span></span>CSS Gradient Text</h1>
  </div>
<!-- DC Page Header End -->

Glossy

Black Glossy Link

View code:

1
2
3
4
5
<!-- DC Page Header Start -->
  <div class="dc_gradient2">
    <h1><a href="#"><span></span>Black Glossy Link</a></h1>
  </div>
<!-- DC Page Header End -->

Dark on Light

Dark on Light Sample

View code:

1
2
3
4
5
<!-- DC Page Header Start -->
  <div class="dc_gradient3">
    <h1><span></span>Dark on Light Sample</h1>
  </div>
<!-- DC Page Header End -->

Dark on Light

Metallic shine

The next evolution

View code:

1
2
3
4
5
6
<!-- DC Page Header Start -->
  <div class="dc_gradient4">
    <h1><span></span>Metallic shine</h1>
    <h2>The next evolution</h2>
  </div>
<!-- DC Page Header End -->

Gradient Shiny Text

Gradient Shiny Text

View code:

1
2
3
4
5
<!-- DC Page Header Start -->
  <div class="dc_gradient5">
    <h1><span></span>Shiny Text</h1>
  </div>
<!-- DC Page Header End -->

Vertical Stripe

Vertical Stripe

View code:

1
2
3
4
5
<!-- DC Page Header Start -->
  <div class="dc_gradient6">
    <h1><span></span>Vertical Stripe</h1>
  </div>
<!-- DC Page Header End -->

Horizontal Stripe

Horizontal Stripe

View code:

1
2
3
4
5
<!-- DC Page Header Start -->
  <div class="dc_gradient7">
    <h1><span></span>Horizontal Stripe</h1>
  </div>
<!-- DC Page Header End -->

Zebra

Zebra Title

View code:

1
2
3
4
5
<!-- DC Page Header Start -->
  <div class="pattern">
    <h1><span></span>Zebra Title</h1>
  </div>
<!-- DC Page Header End -->

Full

Introducing

Next generation technology.

Welcome to the future

It's here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc euismod adipiscing magna. Quisque sollicitudin nisi a nisi feugiat suscipit. Praesent molestie. Curabitur laoreet, augue in pharetra adipiscing, ipsum lectus blandit leo, quis viverra odio purus eget lectus. Cras vitae libero. Duis sed pede id erat laoreet varius. Ut felis est, aliquet ut, dictum at, consectetuer sed, ante.

Breakthrough

Mauris aliquam leo at pede pharetra condimentum. Ut arcu mauris, blandit at, porttitor vel, scelerisque vitae, nunc. Vivamus consequat tellus. Vivamus sed magna ut urna dictum ultrices. Curabitur at libero molestie eros imperdiet semper. Maecenas eu est non nunc gravida laoreet. Vestibulum orci. Donec bibendum neque a dui.

View code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- DC Page Header Start -->
  <div class="dc_full" style="width:700px;">
    <div class="leadin">
      <h1><span></span>Introducing</h1>
      <h2>Next generation technology.</h2>
    </div>
    <div class="content">
      <h3><span></span>Welcome to the future</h3>
      <p><strong>It's here. </strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc euismod adipiscing magna. Quisque sollicitudin nisi a nisi feugiat suscipit. Praesent molestie. Curabitur laoreet, augue in pharetra adipiscing, ipsum lectus blandit leo, quis viverra odio purus eget lectus. Cras vitae libero. Duis sed pede id erat laoreet varius. Ut felis est, aliquet ut, dictum at, consectetuer sed, ante. </p>
      <h3><span></span>Breakthrough</h3>
      <p>Mauris aliquam leo at pede pharetra condimentum. Ut arcu mauris, blandit at, porttitor vel, scelerisque vitae, nunc. Vivamus consequat tellus. Vivamus sed magna ut urna dictum ultrices. Curabitur at libero molestie eros imperdiet semper. Maecenas eu est non nunc gravida laoreet. Vestibulum orci. Donec bibendum neque a dui.</p>
    </div>
  </div>
<!-- DC Page Header End -->


© TemplateAccess