Create a line separator using only CSS
24 Jan 2011 6 Comments
in CSS, Tutorial Tags: CSS, webdesign
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.
HTML CODE
<div class="line-separator"></div>
CSS
.line-separator{
height:1px;
background:#717171;
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
Share on Facebook
Spread ~ Share ~ Love
6 Comments (+add yours?)
Leave a Reply
Jan 24, 2011 @ 14:27:24
Now thats very easy….
Jan 24, 2011 @ 14:29:00
Nice one!!
Mar 23, 2011 @ 20:12:30
Doesn’t work in IE.
Nov 04, 2011 @ 16:23:13
Doesn’t work in IE. Because background fill space.
One better approach should be
.line-separator{
margin: 0 0 15px 0;
border-bottom:1px solid #cccccc;
padding: 0px 0 0px 0;
padding: 20px 0 20px 0;
padding: 20px 0 20px 0;
}
reference http://forum.bytesforall.com/showthread.php?t=1914
Dec 19, 2011 @ 11:02:44
Doesn’t work in Google Chrome too.
Jan 12, 2012 @ 14:58:11
IE 9 – this works!
.line-separator{
height:1.5px;
background:#717171;
width: 304px;
}