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
Add a comment
|
2 Answers
I find this tool great help when making CSS3 gradients:
2 Comments
Ruskin
This only allows you to create single gradients, not patterns created by overlaying multiple gradients.
lukehillonline
Very true, my apologies.
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;
}
2 Comments
dbizzle
Thanks, but that makes the lines smaller to. I want keep the lines the same size just the gap smaller.
Ruskin
Remember that multiple backgrounds only work on some browsers, and the standards way of stating gradients only works on the newest - make sure you have a fallback for older ones.