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

Image Frames

Add frames to your images

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

?
1
2
<!-- DC Image Frames CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/image_frames/css/dc_image_frames.css" />

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

?
1
2
<!-- DC Image Frames CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/image_frames/css/dc_image_frames.css" />

Variable Image Frames (variable width + height)

View code:

?
1
2
3
4
5
6
<ul id="dc_variable_img" style="width:90%; margin:0 auto; padding:3px; position:relative;">
    <li><p><a href="#"><img src="http://cdn.dcodes.net/p/150x100/99CC66" width="150" height="100" /></a></p></li>
    <li><p><a href="#"><img src="http://cdn.dcodes.net/p/190x130/BBCC66" width="190" height="130" /></a></p></li>
    <li><p><a href="#"><img src="http://cdn.dcodes.net/p/220x160/6699CC" width="220" height="160" /></a></p></li>
</ul>
<div class="dc_clear"></div> <!-- line break/clear line -->

Video icon / Pin / Transparent Tape

image
image
image

View code:

?
1
2
3
4
5
6
7
<!-- Video Frame -->
<div class="dc_decor_img"><a href="#"><span></span><img src="http://cdn.dcodes.net/p/300x200/cccccc" width="300" height="200" alt="image" /></a></div>
<!-- Pin Frame  -->
<div class="dc_decor_img dc_dis_1"><a href="#"><span></span><img src="http://cdn.dcodes.net/p/300x200/666666" width="300" height="200" alt="image" /></a></div>
<!-- Transparent Tape Frame  -->
<div class="dc_decor_img dc_dis_2"><a href="#"><span></span><img src="http://cdn.dcodes.net/p/300x200/333333" width="300" height="200" alt="image" /></a></div>
<div class="dc_clear"></div> <!-- line break/clear line -->

Paper Clip / Tape / Gold Frame

image
image
image

View code:

?
1
2
3
4
5
6
7
<!-- Paper Clip Frame -->
<div class="dc_decor_img dc_dis_3"><a href="#"><span></span><img src="http://cdn.dcodes.net/p/300x200/cccccc" width="300" height="200" alt="image" /></a></div>
<!-- Tape Frame -->
<div class="dc_decor_img dc_dis_4"><a href="#"><span></span><img src="http://cdn.dcodes.net/p/300x200/666666" width="300" height="200" alt="image" /></a></div>
<!-- Gold Frame -->
<div class="dc_decor_img dc_dis_5"><a href="#"><span></span><img src="http://cdn.dcodes.net/p/300x200/333333" width="300" height="200" alt="image" /></a></div>
<div class="dc_clear"></div> <!-- line break/clear line -->

Cut Corner / Round Corner 1 / Round Corner 2

image
image
image

View code:

?
1
2
3
4
5
6
7
<!-- Cut Corner Frame -->
<div class="dc_decor_img dc_dis_6"><a href="#"><span></span><img src="http://cdn.dcodes.net/p/300x200/cccccc" width="300" height="200" alt="image" /></a></div>
<!-- Round Corner 1 Frame -->
<div class="dc_decor_img dc_dis_7"><a href="#"><span></span><img src="http://cdn.dcodes.net/p/300x200/666666" width="300" height="200" alt="image" /></a></div>
<!-- Round Corner 2 Frame -->
<div class="dc_decor_img dc_dis_8"><a href="#"><span></span><img src="http://cdn.dcodes.net/p/300x200/333333" width="300" height="200" alt="image" /></a></div>
<div class="dc_clear"></div> <!-- line break/clear line -->

Stamp / Brush / Floral

image
image
image

View code:

?
1
2
3
4
5
6
7
<!-- Stamp Frame --> 
<div class="dc_decor_img dc_dis_9"> <a href="#"><span></span><img src="http://cdn.dcodes.net/p/300x200/cccccc" width="300" height="200" alt="image" /></a> </div>
<!-- Brush Frame -->
<div class="dc_decor_img dc_dis_10"> <a href="#"><span></span><img src="http://cdn.dcodes.net/p/300x200/666666" width="300" height="200" alt="image" /></a> </div>
<!-- Floral Frame -->
<div class="dc_decor_img dc_dis_11"> <a href="#"><span></span><img src="http://cdn.dcodes.net/p/300x200/333333" width="300" height="200" alt="image" /></a> </div>
<div class="dc_clear"></div> <!-- line break/clear line -->

Watercolor / Mask / Glossy

image
image
image

View code:

?
1
2
3
4
5
6
7
<!-- Watercolor Frame -->
<div class="dc_decor_img dc_dis_12"> <a href="#"><span></span><img src="http://cdn.dcodes.net/p/300x200/cccccc" width="300" height="200" alt="image" /></a> </div>
<!-- Mask Frame -->
<div class="dc_decor_img dc_dis_13"> <a href="#"><span></span><img src="http://cdn.dcodes.net/p/300x200/666666" width="300" height="200" alt="image" /></a> </div>
<!-- Glossy Frame -->
<div class="dc_decor_img dc_dis_14"> <a href="#"><span></span><img src="http://cdn.dcodes.net/p/300x200/333333" width="300" height="200" alt="image" /></a> </div>
<div class="dc_clear"></div> <!-- line break/clear line -->

Large Video / Large Pin

image
image

View code:

?
1
2
3
4
5
<!-- Large Video Frame -->
<div class="dc_decor_img_360 dc_dis_360_0"> <a href="#"><span></span><img src="http://cdn.dcodes.net/p/360x260/cccccc" width="360" height="260" alt="image" /></a> </div>
<!-- Large Pin Frame -->
<div class="dc_decor_img_360 dc_dis_360_1"> <a href="#"><span></span><img src="http://cdn.dcodes.net/p/360x260/666666" width="360" height="260" alt="image" /></a> </div>
<div class="dc_clear"></div> <!-- line break/clear line -->

Large Tape / Large Paper Clip

image
image

View code:

?
1
2
3
4
5
<!-- Large Tape Frame -->
<div class="dc_decor_img_360 dc_dis_360_2"><a href="#"><span></span><img src="http://cdn.dcodes.net/p/360x260/cccccc" width="360" height="260" alt="image" /></a> </div>
<!-- Large Paper Clip Frame -->
<div class="dc_decor_img_360 dc_dis_360_3"> <a href="#"><span></span><img src="http://cdn.dcodes.net/p/360x260/666666" width="360" height="260" alt="image" /></a> </div>
<div class="dc_clear"></div> <!-- line break/clear line -->

Large Yellow Tape / Large Gold Frame

image
image

View code:

?
1
2
3
4
5
<!-- Large Yellow Tape Frame -->
<div class="dc_decor_img_360 dc_dis_360_4"> <a href="#"><span></span><img src="http://cdn.dcodes.net/p/360x260/cccccc" width="360" height="260" alt="image" /></a> </div>
<!-- Large Gold  Frame -->
<div class="dc_decor_img_360 dc_dis_360_5"> <a href="#"><span></span><img src="http://cdn.dcodes.net/p/360x260/666666" width="360" height="260" alt="image" /></a> </div>
<div class="dc_clear"></div> <!-- line break/clear line -->

Large Cut Corner / Large Round Corner

image
image

View code:

?
1
2
3
4
5
<!-- Large Cut Corner  Frame -->
<div class="dc_decor_img_360 dc_dis_360_6"> <a href="#"><span></span><img src="http://cdn.dcodes.net/p/360x260/cccccc" width="360" height="260" alt="image" /></a> </div>
<!-- Large Round  Frame -->
<div class="dc_decor_img_360 dc_dis_360_7"> <a href="#"><span></span><img src="http://cdn.dcodes.net/p/360x260/666666" width="360" height="260" alt="image" /></a> </div>
<div class="dc_clear"></div> <!-- line break/clear line -->


© TemplateAccess