code: rainbows cr chart

[svirdilu]

might as well post this too... hello giant walls of HTML for everyone cr chart

---

Here's the thing at the top:

bad bad bad two lines pref.

good good good same here

<table style="width:500px; text-align:center; vertical-align:top; margin-left:-5px;"><tbody><tr> <td style="width:130px; text-align:center; vertical-align:top;"><small><i>BAD DESCRIPTION</i></small></td> <td><table width="200" style="margin-top:5px;"><tbody><tr><td><div style="width:100%; border-radius:10px; border:1px solid #000; box-shadow: 2px 2px #000; height: 20px; background-image: -webkit-gradient( linear, right top, left top, color-stop(0, #B9E310), color-stop(0.5, #265ECC), color-stop(1, #E01616) ); background-image: -o-linear-gradient(left, #B9E310 0%, #265ECC 50%, #E01616 100%); background-image: -moz-linear-gradient(left, #B9E310 0%, #265ECC 50%, #E01616 100%); background-image: -webkit-linear-gradient(left, #B9E310 0%, #265ECC 50%, #E01616 100%); background-image: -ms-linear-gradient(left, #B9E310 0%, #265ECC 50%, #E01616 100%); background-image: linear-gradient(to left, #B9E310 0%, #265ECC 50%, #E01616 100%);"><div style="float:right; width:0%; height:100%; background-color:#fff; border-top-right-radius:10px; border-bottom-right-radius:10px;"> </div></div></td></tr></tbody></table></td> <td style="width:130px; text-align:center; vertical-align:top;"><small><i>GOOD DESCRIPTION</i></small></td> </tr></tbody></table>

CtrL+F for "GOOD DESCRIPTION", "BAD DESCRIPTION"

---

And here's one of these (I like to stick them in <td>s):

Stocke

<div style="width:350px; "><img src="DREAMWIDTH ICON" style="border: 1px solid #000; border-radius:50px; box-shadow: 3px 3px #000; background-color:black;" alt="" /> <div style="float: right;"><div style="float: left; text-align:center; vertical-align:middle; margin-top:10px; width:230px;"><center><span style="font-size:23px; font-variant:small-caps; font-family:georgia, serif;"><a href="URL" style="text-decoration:none; border-bottom-style: solid; border-bottom-width: 1px; color:#000000">NAME</a><table width="200"><tbody><tr><td><div style="width:100%; border-radius:10px; border:1px solid #000; box-shadow: 2px 2px #000; height: 20px; background-image: -webkit-gradient( linear, right top, left top, color-stop(0, #B9E310), color-stop(0.5, #265ECC), color-stop(1, #E01616) ); background-image: -o-linear-gradient(left, #B9E310 0%, #265ECC 50%, #E01616 100%); background-image: -moz-linear-gradient(left, #B9E310 0%, #265ECC 50%, #E01616 100%); background-image: -webkit-linear-gradient(left, #B9E310 0%, #265ECC 50%, #E01616 100%); background-image: -ms-linear-gradient(left, #B9E310 0%, #265ECC 50%, #E01616 100%); background-image: linear-gradient(to left, #B9E310 0%, #265ECC 50%, #E01616 100%);"><div style="float:left; width:PERCENT%; height:100%; background-color:#fff; border-top-left-radius:10px; border-bottom-left-radius:10px;"> </div><div style="float:right; width:PERCENT%; height:100%; background-color:#fff; border-top-right-radius:10px; border-bottom-right-radius:10px;"> </div></div></td></tr></tbody></table></span></center></div> </div></div>

CtrL+F for "DREAMWIDTH ICON", "NAME", "URL", "PERCENT" (x2)
default for percentages is 45 and 45; adjust in each direction as much as you want, ie 35 & 55, 80 & 10, etc

---

Someday eventually I will go back and change this from a gradient to a much more compact 1px height image but until then