Customizing 's

Zburatus

Ladies, gentlemen,

adhering to the idea to give away this little adventure I'm working on as a christmas present I'm trying to customize it now to let it look more ... customized. I already found a lot of help searching the forum and the FAQ section. However, I just stumbled over some minor problems I hope you might help me with. Here's one:

I found some beautiful ways to pimp up hr-lines on this website: http://css-tricks.com/examples/hrs/

I chose the second one. Unfortunately it does not work (neither on Mozilla Firefox nor on Google Chrome) and I assume it's my fault since I don't understand this code completely. The hr-line is not shown at all. This is what I put in my Stylesheet:

.passage hr {

border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0,75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0,75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0,75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0,75), rgba(0,0,0,0));

}

In the passage I only put a <hr>, assuming it should be customized by the ss-code. Is the implemented code wrong? I was not able to copy and pasty it from the website so I had to type it character by character.

Moreover: I suppose it's black with the current code so I tested it on a white background. Since my final background will be a dark grey I would need the hr-line to be white gradient. Can you tell me how I have to change the rgba-numbers to make it white?

Thanks a lot for any kind of help you might offer, guys.

TheMadExile

You copied it wrong.  Your error can be found in the second rgba() call of each -*-linear-gradient().  You erroneously copied the alpha channel's value, 0.75, as 0,75 (i.e. you copied the radix as a comma instead of a period).

Try this:


.passage hr {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}


Zburatus

Aaah, I see. Thanks a lot for this fast und efficient help, Exile. I checked several times what I thought I copied but did not find this mistake. With this help of yours I was also able to understand what those numbers mean, hence I could answer my second question myself.

If some newbie like me might be interested, this is the code for a white gradient hr-line:

.passage hr {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
background-image: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
background-image: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
background-image: -o-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
}

Thanks again!