Monkey Raptor

Sunday, May 26, 2013

CSS: A Shadowy Horizontal Rule

As you can see here on this blog, there are two weird looking horizontal lines (if you can find them), which by the way, were inspired by the line divider on one of WordPress' themes.

Shadow on top

Shadow on bottom

This is a Blogger blog
- Hmmm..
  • What I did, I went to Microsoft Gradient Maker.
  • Then generated the gradient color. The elliptical > bottom center > farthest corner.
  • Just put the starting color some dark grayish color, don't mind the end color, because you'll substitute that color with the word transparent. You can also tinker the start's and end's offset.
  • After that, go back to the Blogger HTML editor, and create a selector class of that.
  • Then, if you need to summon the customized horizontal line, include the previously declared class (in the CSS) in the <hr> tag.

Something like this.
This is the CSS. I named the class as shadowdown.

As you can see above, the color stop offset is adjusted to be 70% (or 0.7).

Then, to summon the bottom-shadowed line, do this:
<hr class="shadowdown" />
That's pretty much it.

Other cool styled horizontal line — <hr> tag at CSS-Tricks

Updated Dec 29, 2014
CSS: A Shadowy Horizontal Rule

No comments

Post a Comment

Tell me what you think...