CSS3+LESS Simple Mesh Background

CSS3+LESS-Simple-Mesh-Background.markdown

CSS3+LESS Simple Mesh Background

You can change the color of LESS Mixin

.LESS_mesh_st2 (color1, color1b, color2, color2b, size)

A Pen by Trumphouse on CodePen.

License.

index.html

<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>

style.less

/* 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;
}