TUTORIAL
Gradient Borders
Go To Advanced version
Start
#
End
#
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(204,255,204)} .gb_14 {border-color: rgb(194,238,194)} .gb_13 {border-color: rgb(185,221,185)} .gb_12 {border-color: rgb(176,204,176)} .gb_11 {border-color: rgb(167,187,167)} .gb_10 {border-color: rgb(158,170,158)} .gb_9 {border-color: rgb(149,153,149)} .gb_8 {border-color: rgb(140,136,140)} .gb_7 {border-color: rgb(131,119,131)} .gb_6 {border-color: rgb(122,102,122)} .gb_5 {border-color: rgb(113,85,113)} .gb_4 {border-color: rgb(104,68,104)} .gb_3 {border-color: rgb(95,51,95)} .gb_2 {border-color: rgb(86,34,86)} .gb_1 {border-color: rgb(77,17,77)} .gb_0 {border-color: rgb(68,0,68)} /*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>
Pages Menu
Autocontent
Building tool
Panel menu
Site messaging
Stylesheets
Widgets
Xt functions
Blog function
Blog CSS tester
Blog BBcode
404 error custom page
Advertising
Favicons
Hidden Xt functions
Pseudoclasses
Search engines
Time and date
XtGem variables
Blog with CSS
Google+1 (web only) widget
FaceBook widgets
Free icons and graphics
Gradient borders
Gradient text
Love meter
Gradient backgrounds
Javascript blog menu
User chatrooms
Main Page
©2010 - 2012 Graham.yn.lt
© MMXII Graham
