Few days back i wrote an article on how to create an awesome line separator in webdesigns using photoshop . Today i will tell you how to convert it into CSS without using a single image .
I have explained an important thing about choosing colors for line separators on my previous article so one need to have a look at the article before following this tutorial.
border-bottom:1px solid #313030;
Whats up with .line-separator CSS
Firstly we are creating a Line of height 1px and color #717171 . Here DIV ( .line-separator ) acts as a line so we are using background property to fill the color . After creating the line we need to create the line shadow of size 1px and color #313030 which we are doing it with the help of border-bottom property .
Height and background properties are for Line and border-bottom property is for Line shadow .
If you want to change the color of Line then replace #XXXXXX with your hex color code background:#XXXXXX; , border-bottom : 1px solid #XXXXXX; for Line Shadow .
Hope you liked it . Any feedback is appreciated . Have a Good Day