Deze gradiënt textbox is gemaakt van puur css-statements. Geen plaatje komt er aan te pas. De box is auto-sizing.
De breedte van de box kan je in de stylesheet bepalen bij de class .gradient_box. De width staat nu op 15em. De box past zich aan, aan de hoeveelheid tekst (of plaatjes) die erin geplaatst worden. Pas de kleuren in de stylesheet aan om de box een andere "kleur-toon" te geven. Plaats in de body sectie de onderstaande html-code en plaats de stylesheet in de head-sectie van de pagina. Alles is cross browser en foutloos volgens de W3C-validator. Tot slot wijs ik nog even op de ronde hoeken die in dit voorbeeld zijn verwerkt.
<div class="gradient_box">
<em class="bv4 ev4"></em><em class="bv3 ev3"></em>
<em class="bv2 ev2"></em><em class="bv1 ev1"></em>
<div class="dehoeken">
<p class="inhoud_gradient_box">
Deze gradiënt textbox is gemaakt van puur css-statements.
Geen plaatje komt er aan te pas. De box is auto-sizing.
</p>
</div>
<em class="bv1 ev1"></em><em class="bv2 ev2"></em>
<em class="bv3 ev3"></em><em class="bv4 ev4"></em>
</div>
<style type="text/css">
.inhoud_gradient_box{margin:0;padding:0;overflow:hidden;background:#ddffdd;border:solid 15px #ddffcc;}
.gradient_box{width:15em;}
.gradient_box .bv4,.gradient_box .bv3,.gradient_box .bv2,.gradient_box .bv1{font-size:1px;display:block;background:#ff0000;/* \*/ overflow:hidden;/* */}
.gradient_box .bv4,.gradient_box .bv3,.gradient_box .bv2{height:1px;}
.gradient_box .bv3,.gradient_box .bv2,.gradient_box .bv1{background:#ddffcc;border-left:10px solid #ddffcc;border-right:1px solid #ddff66;}
.gradient_box .bv4{margin:0 4px;}
.gradient_box .bv3{margin:0 2px;border-width:0 2px;}
.gradient_box .bv2{margin:0 1px;}
.gradient_box .bv1{height:2px;margin:0;}
.gradient_box .ev4{margin:0 5px;background:#ddff33;color:inherit;}
.gradient_box .ev3{margin:0 3px;border-width:0 2px;}
.gradient_box .ev2{margin:0 2px;}
.gradient_box .ev1{height:2px;margin:0 1px;}
.gradient_box .dehoeken{display:block;background:transparent;border-left:2px solid #ddff66;border-right:2px solid #ddff66;}
</style>