html - Styling a vertical-line -
i want make vertical line looking this:
http://i41.tinypic.com/2na44n7.png
i've tried following code:
div.vertical-line{ float:right; width:5px; background-color:black; margin-right:20px; background: #ffffff; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#cfcfcf)); background: -webkit-linear-gradient(#ffffff, #cfcfcf); background: -moz-linear-gradient(#ffffff, #cfcfcf); background: -ms-linear-gradient(#ffffff, #cfcfcf); background: -o-linear-gradient(#ffffff, #cfcfcf); background: linear-gradient(#ffffff, #cfcfcf); -pie-background: linear-gradient(#ffffff, #cfcfcf); behavior: url(/pie/pie.htc); }
but result wasn't expected. here result: http://jsfiddle.net/rlyyc/
it's close, doesn't "fade-out" @ end of line.
any suggestions?
thanks in advance!
using this generator, got you:
background: #ffffff; /* old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #c6cbd2 50%, #ffffff 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#c6cbd2), color-stop(100%,#ffffff)); /* chrome,safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#c6cbd2 50%,#ffffff 100%); /* chrome10+,safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#c6cbd2 50%,#ffffff 100%); /* opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#c6cbd2 50%,#ffffff 100%); /* ie10+ */ background: linear-gradient(to bottom, #ffffff 0%,#c6cbd2 50%,#ffffff 100%); /* w3c */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#ffffff', endcolorstr='#ffffff',gradienttype=0 ); /* ie6-9 */
Comments
Post a Comment