CODEWITHSUNDEEP
csslinear-gradients
dbizzle
dbizzle

Reputation: 11

How to use CSS3 linear-gradients?

Trying to figure out how the spacing between the lines can be reduced.

http://jsbin.com/tibipehu/1/edit

my code is based on linear gradient patterns by lea verou

http://lea.verou.me/css3patterns/#zig-zag

Upvotes: 1

Views: 102

Answers (2)

Ruskin
Ruskin

Reputation: 6161

Change the gradient and background size elements

body {
background: 
linear-gradient(135deg, #ECEDDC 35%, transparent 25%) xpx 0px,
linear-gradient(225deg, #ECEDDC 35%, transparent 25%) xpx 0px,
linear-gradient(315deg, #ECEDDC 40%, transparent 25%),
linear-gradient(45deg, #ECEDDC 40%, transparent 25%);   
background-size: (x*2)px (x*2)px;
background-color: #EC173A;
}

In your example, you have used x = 50.

If you want to make the zigzags closer or further, you need to do some math - make the background size higher, then adjust the angles and percentages.

body {
background: 
linear-gradient(135deg, #abc 35%, transparent 25%) 20px 0px,
linear-gradient(225deg, #abc 35%, transparent 25%) 20px 0px,
linear-gradient(315deg, #abc 47%, transparent 30%),
linear-gradient(45deg, #abc 47%, transparent 25%);  
background-size: 40px 80px;
background-color: #123;
}

See playground with examples: http://jsbin.com/gudanovo/1/

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
  <div class="box box4"></div>
</body>
</html>

CSS:

.box {width: 200px; float:left; height: 200px; border: 1px solid #333}

.box1 {
    background: 
        linear-gradient(135deg, #abc 35%, transparent 25%) 20px 0px,
        linear-gradient(225deg, #abc 35%, transparent 25%) 20px 0px,
        linear-gradient(315deg, #abc 48%, transparent 40%),
        linear-gradient(45deg, #abc 48%, transparent 40%);  
    background-size: 40px 80px;
    background-color: #123;
}

.box2 {
    background: 
        linear-gradient(135deg, #abc 35%, transparent 25%) 20px 0px,
        linear-gradient(225deg, #abc 35%, transparent 25%) 20px 0px,
        linear-gradient(315deg, #abc 40%, transparent 30%),
        linear-gradient(45deg, #abc 40%, transparent 25%);  
    background-size: 40px 40px;
    background-color: #123;
}

.box3 {
    background: 
        linear-gradient(135deg, #abc 35%, transparent 25%) 20px 0px,
        linear-gradient(225deg, #abc 35%, transparent 25%) 20px 0px,
        linear-gradient(315deg, #abc 31%, transparent 30%),
        linear-gradient(45deg, #abc 31%, transparent 30%);  
    background-size: 40px 21px;
    background-color: #123;
}

.box4 {
    background: 
        linear-gradient(135deg, #abc 35%, transparent 25%) 10px 0px,
        linear-gradient(225deg, #abc 35%, transparent 25%) 10px 0px,
        linear-gradient(315deg, #abc 40%, transparent 30%),
        linear-gradient(45deg, #abc 40%, transparent 25%);  
    background-size: 20px 20px;
    background-color: #123;
}

Upvotes: 1

lukehillonline
lukehillonline

Reputation: 2647

I find this tool great help when making CSS3 gradients:

http://www.colorzilla.com/gradient-editor/

Upvotes: 1

Related Questions