/ Background Patterns

Tablecloth Background Pattern

Tablecloth Background Pattern

Tablecloth Pattern

A CSS Tablecloth Background Pattern.

Made with

Html
Css/scss

Author

yoksel

Css

$bgcolor: #FFEFC3;
$transparent: rgba(255, 255, 255, 0);

$color-1: transparentize(#FFEFC3, .6);
$color-2: transparentize(#E8DE67, .6);
$color-3: transparentize(#C0CCAB, .5);
$color-4: transparentize(#E57152, .8);

$size: 7em;
$big-size: $size*2;

HTML {
  height: 100%;
  }
BODY {
  background: 
    linear-gradient(90deg,
      $transparent 93%,
      $color-3 93%, $color-3 100%
      ),
    linear-gradient(90deg,
      $color-2 5%,
      $transparent 5%, $transparent
      ),
    linear-gradient(
      $color-2 5%,
      $transparent 5%, $transparent
      ),
    linear-gradient(
      $transparent 90%,
      $color-4 90%, $color-4 100%
      ),
    linear-gradient(
      $transparent 35%,
      $color-1 35%, $color-1 45%,
      $transparent 45%, $transparent 55%,
      $color-2 55%, $color-2 70%,
      $transparent 70%
      ),
    linear-gradient(90deg,
      $transparent 35%,
      $color-1 35%, $color-1 45%,
      $transparent 45%, $transparent 55%,
      $color-2 55%, $color-2 70%,
      $transparent 70%
      ),
    linear-gradient(
      $transparent 55%,
      $color-1 55%, $color-1 60%,
      $transparent 60%
      ),
    linear-gradient(90deg,
      $transparent 55%,
      $color-1 55%, $color-1 60%,
      $transparent 60%
      ),
    linear-gradient(
      $transparent 20%,
      $color-3 20%, $color-3 80%,
      $transparent 80%
      ),
    linear-gradient(90deg,
      $transparent 20%,
      $color-4 20%, $color-4 80%,
      $transparent 80%
      ),
    linear-gradient(
      $transparent 10%,
      $color-2 10%, $color-2 35%,
      $transparent 35%
      ),
    linear-gradient(90deg,
      $transparent 10%,
      $color-2 10%, $color-2 35%,
      $transparent 35%
      );
  background-size:  $big-size $big-size;
  background-color: $bgcolor;
  font: 10px/2 'Trebuchet MS', Verdana, sans-serif;
  }

Demo

See the Pen Tablecloth by yoksel (@yoksel) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More