CODEWITHSUNDEEP
asp.nethtml
hari
hari

Reputation: 1

How to change the color of the Horizontal line dynamically?

In asp.net how to change the color of the Horizontal line dynamically ?

For exa line start with blue color whenever riched to the end of the line the color going to be white.

Upvotes: 0

Views: 2785

Answers (3)

Thanigainathan
Thanigainathan

Reputation: 1547

You can try the below code for giving the gradient coloring.

HR style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');"

I took this sample from below link

http://www.web-source.net/html_background_gradient.htm

Upvotes: 0

StefanE
StefanE

Reputation: 7630

Your question is not 100% clear but I guess you are talking about a <HR /> tag

You need it have runat="server" and an ID like this

<hr runat="server" id="testHR" style="border-color: #FF00FF" />

From code behind you can change the color with

testHR.Style["border-color"] = "#FFFFFF";

Upvotes: 1

Jamie Dixon
Jamie Dixon

Reputation: 54001

I'm not sure exactly what you're asking and your question seems rather vague...however, today I feel like a challenge so here's an answer to what I think you're asking.

I'm assuming that you've got some kind of loop going on where by you're outputting some content with a horizontal rule between each section <hr />. I'll also assume that after the last section has been output, you either want a different coloured line, or no line atall.

There's a couple of easy ways you can do this.

To have no line atall, you can simply ensure you have some kind of counter within the loop and test the count number against a count of all items.

if(currentCount < myLoopyObject.Count())
{
 // Output my line here;
}

If you simply wish you re-style the final line then attaching a class to the last <hr /> will give you direct access to style it from your CSS.

if(currentCount == myLoopyObject.Count())
{
 // Output my final line here with class name e.g. <hr class="finalLine" />
}

If however your question is about styling a line with a gradient colour, from blue at one end to white at the other end, your easest route to acheive this is to use an image.

Let's once more assume you're using a <hr />:

hr{
  background: url(images/lineGradient.png) 0 0 no-repeat;
  height:3px;
}

I hope some of this answers your question. Like I said, I'm up for a challenge today however I'm no Sherlock Holmes and my powers of deduction may not be as fine tuned as I'd like to think.

Upvotes: 0

Related Questions