CSS fade out horizontal rule / line styled div effect without images

css line shadow shapes fadeout
ja_him picture ja_him · Feb 24, 2012 · Viewed 37.2k times · Source

I'm a big fan of minimal use of images and was wondering if anyone had a tactic (or if it's possible) to create this kind of thing with pure static CSS?

http://www.flickr.com/photos/jahimandahalf/6780397612/

I'm referring an effect of a line seemingly getting skinnier and fading out and the shadow effect underneath it.

I was thinking it might be possible to do a CSS shape trick with it like the triangles:

http://css-tricks.com/snippets/css/css-triangle/

Or perhaps with rotation on box-shadow using 'transform':

zenelements.com/blog/css3-transform/

Any ideas?

Answer

Andres Ilich picture Andres Ilich · Feb 25, 2012

You can use CSS3's stops and the :after pseudo-element to achieve such an effect. The trick is to add a border to the <hr> element by using the :after pseudo-element and position it in the center of the initial gradient with a soft color that ends with the gradient.

Here is a quick demo, and another demo using some color.

Related questions

How do you make div elements display inline?

Given this HTML: <div>foo</div><div>bar</div><div>baz</div> How do you make them display inline like this: foo bar baz not like this: foo …

Read More
Set line spacing

How can I set line spacing with CSS, like we can set it in MS Word?

Read More
Add centered text to the middle of a <hr/>-like line

I'm wondering what options one has in xhtml 1.0 strict to create a line on both sides of text like-so: Section one ----------------------- Next section ----------------------- Section two I've thought of doing some fancy things like this: <div style="float:…

Read More