Quick Design Tip: Create Stripped Borders with LESS

I found these great stripped border created by DZ on Codepen and decided to share them with you. It is very simple to create them but if you do not have time you can use the code and style them to suit you design project look and feel.  You can also adjust the thickness of the borders. In the actual code they are pretty thick and they look very cool and this way can be used to enhance the overall design.  Have a look at the code below to see how they are done.

stripped borders less

HTML

<div class="container">
<div class="block block-one"></div>
<div class="block block-two"></div>
<div class="block block-three"></div>
<div class="block block-four"></div>
<div class="block block-five"></div>
</div><!-- close .container -->

CSS

@import url(http://fonts.googleapis.com/css?family=Oxygen:300,400,700);

/*======================================
0. LESS VARIABLES AND MIXINS
======================================*/
@bg:#f4f0e3; // background colour
@bk:#333; // black
@wh:#FFF; // white
@fl:#555; // fallback (dark grey)
@dg:#737258; // dark green
@dr:#a04123; // dark red
@gr:#89a193; // green
@gy:#e8e6d6; // grey
@kk:#ccc69a; // khaki
@oj:#cc8734; // orange
@ph:#e7c79f; // peach
@pk:#d7b2b5; // pink
@pp:#655f6a; // purple
@rd:#bb7761; // red

/* Vendor prefixes
--------------------------------------*/
.background-size(@args){
-webkit-background-size:@args;
-moz-background-size:@args;
background-size:@args;
}
.gradient(@background-color,@gradient-style){
background-color:@background-color;
background-image:-webkit-linear-gradient(@gradient-style);
background-image: -moz-linear-gradient(@gradient-style);
background-image: -ms-linear-gradient(@gradient-style);
background-image: -o-linear-gradient(@gradient-style);
background-image: linear-gradient(@gradient-style);
}

/*======================================
1. BORDERS
======================================*/
.block {
background-color:#FFF;
border-top:1px solid darken(@bg,5%);
height:20px;
margin-bottom:20px;
padding-bottom:10px;
position:relative;
}
.block:before {
bottom:0;
content:'';
height:10px;
position:absolute;
width:100%;
}
.block-one:before {
@style:left,transparent 0%,transparent 25%,@gr 25%,@gr 50%,transparent 50%,transparent 75%,@oj 75%,@oj 100%;
.background-size(60px 100%);
.gradient(@kk,@style);
}
.block-two:before {
@style:left,transparent 0%,transparent 25%,@pp 25%,@pp 50%,transparent 50%,transparent 75%,@rd 75%,@rd 100%;
.background-size(30px 100%);
.gradient(@gy,@style);
}
.block-three:before {
@style:left,transparent 0%,transparent 50%,@rd 50%,@rd 100%;
.background-size(10px 100%);
.gradient(@pk,@style);
}
.block-four:before {
@style:left,transparent 0%,transparent 25%,@dg 25%,@dg 50%,transparent 50%,transparent 75%,@rd 75%,@rd 100%;
.background-size(120px 100%);
.gradient(@kk,@style);
}
.block-five:before {
@style:left,transparent 0%,transparent 50%,@gy 50%,@gy 100%;
.background-size(120px 100%);
.gradient(@pp,@style);
}

/*======================================
20. FOR DEMO PURPOSES ONLY
======================================*/
.clear:after {
clear:both;
content:'';
display:table;
}
html {
min-width:320px;
}
body {
background-color:@bg;
padding:20px 0;
}


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *