using for local business website, inspiration from Lea Verou
A Pen by Corey Smith on CodePen.
using for local business website, inspiration from Lea Verou
A Pen by Corey Smith on CodePen.
<div class="checker"></div> |
@import "bourbon"; | |
body { | |
min-height: 100%; | |
background: #dcdcdc; | |
} | |
$border-width: 20px; | |
$gradient-calc: percentage(($border-width/1px)/10); | |
.checker { | |
position: relative; | |
width: 100%; | |
height: $border-width; | |
&:nth-of-type(2n) { | |
//left: $border-width * 3; | |
} | |
} | |
.checker:before, .checker:after { | |
@include background(linear-gradient(to left, white 50%, black 50%, black 100%)); | |
content: ''; | |
position: absolute; | |
top: 0; | |
left: -$gradient-calc; | |
width: ($gradient-calc*2) + 100; | |
height: $border-width/2; | |
background-size: $border-width $border-width; | |
background-repeat: repeat-x; | |
} | |
.checker:before { | |
//box-shadow: 0 1px 1px rgba(black, .3); | |
} | |
.checker:after { | |
top: $border-width / 2; | |
margin-left: $border-width / 2; | |
//left: $border-width * 3; | |
//box-shadow: 0 1px 1px rgba(white, .3); | |
} |