<img src="//nojsim.images.xtstatic.com/tp.gif" alt="" />
<img src="//cim.images.xtstatic.com/tp.gif" alt="" />
Advanced Gradient Borders
Go To Standard Version
This version allows you to set a different gradient for each side of the border
Top border
#
#
Right border
#
#
Bottom border
#
#
Left border
#
#
Nestings
Border width
*
Border style
*
*
Enter 1 2 or 4
space
separated values
1 value= all four sides
2 values= top and bottom / left and right
4 values = top right bottom left
Border styles
solid dotted dashed double ridge groove inset outset and none
base class name
The css classes
Extra styles can be added to the "common properties" and gb_0 classes
/*Start gradient border*/ /*Common properties*/ .gb_15, .gb_14, .gb_13, .gb_12, .gb_11, .gb_10, .gb_9, .gb_8, .gb_7, .gb_6, .gb_5, .gb_4, .gb_3, .gb_2, .gb_1, .gb_0 {border-width:1px;border-style:solid;} /*Border colors*/ .gb_15 {border-color: rgb(171,205,239) rgb(101,67,33) rgb(101,79,237) rgb(171,193,35)} .gb_14 {border-color: rgb(160,194,228) rgb(111,77,43) rgb(107,84,223) rgb(164,187,48)} .gb_13 {border-color: rgb(150,184,218) rgb(121,87,53) rgb(114,90,209) rgb(157,181,62)} .gb_12 {border-color: rgb(140,174,208) rgb(131,97,63) rgb(121,95,196) rgb(150,176,75)} .gb_11 {border-color: rgb(130,164,198) rgb(141,107,73) rgb(128,101,182) rgb(143,170,89)} .gb_10 {border-color: rgb(120,154,188) rgb(152,118,84) rgb(135,107,169) rgb(137,165,103)} .gb_9 {border-color: rgb(109,143,177) rgb(162,128,94) rgb(141,112,155) rgb(130,159,116)} .gb_8 {border-color: rgb(99,133,167) rgb(172,138,104) rgb(148,118,141) rgb(123,153,130)} .gb_7 {border-color: rgb(89,123,157) rgb(182,148,114) rgb(155,123,128) rgb(116,148,143)} .gb_6 {border-color: rgb(79,113,147) rgb(192,158,124) rgb(162,129,114) rgb(109,142,157)} .gb_5 {border-color: rgb(69,103,137) rgb(203,169,135) rgb(169,135,101) rgb(103,137,171)} .gb_4 {border-color: rgb(58,92,126) rgb(213,179,145) rgb(175,140,87) rgb(96,131,184)} .gb_3 {border-color: rgb(48,82,116) rgb(223,189,155) rgb(182,146,73) rgb(89,125,198)} .gb_2 {border-color: rgb(38,72,106) rgb(233,199,165) rgb(189,151,60) rgb(82,120,211)} .gb_1 {border-color: rgb(28,62,96) rgb(243,209,175) rgb(196,157,46) rgb(75,114,225)} .gb_0 {border-color: rgb(18,52,86) rgb(254,220,186) rgb(203,163,33) rgb(69,109,239)} /*End gradient border*/
The html code
<div class="gb_15"><div class="gb_14"><div class="gb_13"><div class="gb_12"><div class="gb_11"><div class="gb_10"><div class="gb_9"><div class="gb_8"><div class="gb_7"><div class="gb_6"><div class="gb_5"><div class="gb_4"><div class="gb_3"><div class="gb_2"><div class="gb_1"><div class="gb_0"> YOUR CONTENT GOES HERE </div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
html for reflected border
<div class="gb_15"><div class="gb_14"><div class="gb_13"><div class="gb_12"><div class="gb_11"><div class="gb_10"><div class="gb_9"><div class="gb_8"><div class="gb_7"><div class="gb_6"><div class="gb_5"><div class="gb_4"><div class="gb_3"><div class="gb_2"><div class="gb_1"><div class="gb_0"><div class="gb_1"><div class="gb_2"><div class="gb_3"><div class="gb_4"><div class="gb_5"><div class="gb_6"><div class="gb_7"><div class="gb_8"><div class="gb_9"><div class="gb_10"><div class="gb_11"><div class="gb_12"><div class="gb_13"><div class="gb_14"><div class="gb_15"> YOUR CONTENT GOES HERE </div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
© MMXXV Graham
Log in
