Menu
Here's a picture of exactly what I'm trying to produce.
I've been able to style a <hr /> using SVG as the background image to create this effect, but would like to be able to produce the same thing using CSS3 I've but have been having trouble.
I was wondering if any CSS gurus out there might know a way to achieve the same thing or if it's not really possible w/ pure CSS?
Thanks for any help.
471
Make a pseudo class in stylesheet and make the position absolute of the pseudo class relative to the parent element. Add little inset, which is shorthand of top, right, bottom, left, in order to make the shadow shift from getting hidden by the parent element.
CSS Linear GradientsTo create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
In CSS, shadows on the boxes of elements are created using the box-shadow property (if you want to add a shadow to the text itself, you need text-shadow ). The box-shadow property takes a number of values: The offset on the x-axis. The offset on the y-axis.
I create the effect which you want please check this:
http://jsfiddle.net/fx5Lk/
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
