You can change the color of LESS Mixin
.LESS_mesh_st2 (color1, color1b, color2, color2b, size)
A Pen by Trumphouse on CodePen.
You can change the color of LESS Mixin
.LESS_mesh_st2 (color1, color1b, color2, color2b, size)
A Pen by Trumphouse on CodePen.
<div class="left"></div> | |
<div class="right"></div> | |
<div class="center"> | |
<h2>CSS3+LESS Simple Mesh Background</h2> | |
You can change the color of LESS Mixin<br/>.LESS_mesh_st2 (color1, color1b, color2, color2b, size) | |
</div> |
/* start mixin */ | |
/* default for .LESS_mesh_st2 */ | |
@mesh_color1: #222; | |
@mesh_color1b: lighten(@mesh_color1,5); | |
@mesh_color2: @mesh_color1; | |
@mesh_color2b: lighten(@mesh_color1,5); | |
@mesh_size: 60px; | |
/* ========================= */ | |
/* | |
.LESS_mesh_st2( | |
@c1, // Color | |
@c1b, // cColor | |
@c2, // Color | |
@c2b, // Color | |
@size // Size px, em, pt ... not use % | |
) | |
*/ | |
.LESS_mesh_st2 (@c1:@mesh_color1,@c1b:@mesh_color1b,@c2:@mesh_color2,@c2b:@mesh_color2b,@size:@mesh_size){ | |
@x1: 33.33%; | |
@x2: @x1*2; | |
@p1: @x1/4; | |
@p2: @p1*2; | |
@p3: @p1*3; | |
background-size: @size @size/2; | |
background-image: | |
linear-gradient(45deg, transparent @x2, | |
@c1 @x2,@c1 @x2+@p1, | |
@c1b @x2+@p1,@c1b @x2+@p2, | |
@c1 @x2+@p2,@c1 @x2+@p3, | |
@c1b @x2+@p3), | |
linear-gradient(135deg, transparent @x1, | |
@c2 @x1,@c2 @x1+@p1, | |
@c2b @x1+@p1,@c2b @x1+@p2, | |
@c2 @x1+@p2,@c2 @x1+@p3, | |
@c2b @x1+@p3,@c2b @x2, | |
transparent @x2), | |
linear-gradient(45deg, @c1 @p1, | |
@c1b @p1,@c1b @p2, | |
@c1 @p2,@c1 @p3, | |
@c1b @p3,@c1b @x1, | |
transparent @x1), | |
linear-gradient(135deg, @c2 @p1, | |
@c2b @p1,@c2b @p2, | |
@c2 @p2,@c2 @p3, | |
@c2b @p3,@c2b @x1, | |
transparent @x1), | |
linear-gradient(45deg, transparent @x1, | |
@c1 @x1,@c1 @x1+@p1, | |
@c1b @x1+@p1,@c1b @x1+@p2, | |
@c1 @x1+@p2,@c1 @x1+@p3, | |
@c1b @x1+@p3,@c1b @x2, | |
transparent @x2), | |
} | |
/* end mixin */ | |
/* ============================ */ | |
body{margin:0;} | |
.left { | |
position:absolute; | |
width:33%; | |
height:100%; | |
.LESS_mesh_st2(#864068,#561038,#903D50,#68002D,120px); | |
} | |
.right { | |
position:absolute; | |
width:33%; | |
height:100%; | |
right:0; | |
padding:0; | |
.LESS_mesh_st2(#EEEEEE,#D8D8D8,#E4E4E4,#D0D0D0,30px); | |
} | |
.right:after { | |
content:''; | |
display:block; | |
width:100%; | |
height:100%; | |
background:linear-gradient(90deg,rgba(255,255,255,.8),rgba(255,255,255,0),rgba(255,255,255,.8)); | |
} | |
.center { | |
position:absolute; | |
width:34%; | |
height:100%; | |
left:33%; | |
padding:2em; | |
box-sizing:border-box; | |
color:white; | |
.LESS_mesh_st2(); | |
-webkit-box-shadow:inset 0 0 2em #000; | |
} |