This will create a centered vertical line within any container by using a 3-color horizontal gradient. Uses LESS syntax.
Forked from John Peele's Pen Centered Vertical Line using CSS3 Gradients.
This will create a centered vertical line within any container by using a 3-color horizontal gradient. Uses LESS syntax.
Forked from John Peele's Pen Centered Vertical Line using CSS3 Gradients.
<div></div> |
/* Centered Vertical Line - using CSS3 gradients */ | |
.centered-vert-line(@startColor: transparent, @midColor: #ccc, @endColor: transparent, @deg: 180deg) { | |
background-image: -moz-linear-gradient(@deg, @startColor, @midColor, @endColor); // FF 3.6+ | |
background-image: -webkit-linear-gradient(@deg, @startColor, @midColor, @endColor); // Safari 5.1+, Chrome 10+ | |
background-image: -o-linear-gradient(@deg, @startColor, @midColor, @endColor); // Opera 11.10 | |
background-image: linear-gradient(@deg, @startColor, @midColor, @endColor); // Standard, IE10 | |
background-position: 50%; | |
background-repeat: repeat-y; | |
background-size: 1px 1px; | |
} | |
/* Container */ | |
div { | |
width: 50%; | |
height: 300px; | |
background-color: #fff; | |
border: 1px solid #ccc; | |
.centered-vert-line(); | |
} |