I'm looking for a background effect like this (in pure CSS), how can I do this?
(zoomed image)
Code:
html,
body {
height:100%;
background-color:#3D3D3D;
display:flex;
}
div {
height: 100px;
width:100px;
margin:10px auto;
background-image: linear-gradient(45deg, #868686 25%, transparent 25%, transparent 75%, #868686 75%, #868686), linear-gradient(45deg, #868686 25%, transparent 25%, transparent 75%, #868686 75%, #868686);
background-position: 0 0, 51px 51px;
background-color: #222222;
background-size: 2px 2px;
}
<div></div>
Here is pure CSS solution create 4 linear-gradients like this with repeat-x and appropriate positioning.
body {
margin: 0;
height: 100vh;
background:
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 25px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 50px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 75px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 100px repeat-x;
}
Then repeat linear-gradient many many times. Demo:
body {
margin: 0;
height: 100vh;
background:
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 25px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 50px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 75px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 100px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 125px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 150px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 175px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 200px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 225px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 250px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 275px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 300px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 325px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 350px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 375px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 400px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 425px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 450px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 475px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 500px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 525px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 550px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 575px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 600px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 625px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 650px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 675px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 700px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 725px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 750px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 775px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 800px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 825px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 850px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 875px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 900px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 925px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 950px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 975px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 1000px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 1025px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 1050px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 1075px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 1100px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 1125px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 1150px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 1175px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 1200px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 1225px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 1250px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 1275px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 1300px repeat-x;
/* and so on */
}
Of course you can use any programming language or some CSS preprocessor to generate this monster CSS properties.
But to be honest I would use SVG for this thing with 8 squares. Demo:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 40">
<rect x="0" y="0" width="10" height="10" fill="#868686"/>
<rect x="10" y="0" width="10" height="10" fill="#3d3d3d"/>
<rect x="0" y="10" width="10" height="10" fill="#3d3d3d"/>
<rect x="10" y="10" width="10" height="10" fill="#222"/>
<rect x="0" y="20" width="10" height="10" fill="#3d3d3d"/>
<rect x="10" y="20" width="10" height="10" fill="#868686"/>
<rect x="0" y="30" width="10" height="10" fill="#222"/>
<rect x="10" y="30" width="10" height="10" fill="#3d3d3d"/>
</svg>
Demo with SVG (works only in Chrome, you'll need to use external SVG (preferred way) or escape SVG markup):
body {
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 40"><rect x="0" y="0" width="10" height="10" fill="#868686"/><rect x="10" y="0" width="10" height="10" fill="#3d3d3d"/><rect x="0" y="10" width="10" height="10" fill="#3d3d3d"/><rect x="10" y="10" width="10" height="10" fill="#222"/><rect x="0" y="20" width="10" height="10" fill="#3d3d3d"/><rect x="10" y="20" width="10" height="10" fill="#868686"/><rect x="0" y="30" width="10" height="10" fill="#222"/><rect x="10" y="30" width="10" height="10" fill="#3d3d3d"/></svg>') 0 0 / 40px 80px repeat;
}
Demo with escaped inline SVG, works everywhere, but less maintainable:
body {
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2020%2040%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23868686%22/%3E%3Crect%20x%3D%2210%22%20y%3D%220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3Crect%20x%3D%220%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23222%22/%3E%3Crect%20x%3D%220%22%20y%3D%2220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23868686%22/%3E%3Crect%20x%3D%220%22%20y%3D%2230%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23222%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2230%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3C/svg%3E') 0 0 / 40px 80px repeat;
}
Option 1: Easier, flexible and more efficient would be using a base64 that you can easily produce with http://www.patternify.com (or something similar). A base64 will be produced that you can implement as a background-image URL with a repeat.
Option 2: CSS only solution from CSS3 Pie. Adapt your colors as needed.
body {
margin: 0;
}
div {
padding: 100vh 100vw 0 0;
background: -webkit-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
-webkit-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
-webkit-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
-webkit-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
-webkit-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
-webkit-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background: -moz-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
-moz-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
-moz-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
-moz-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
-moz-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
-moz-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-size: 20px 20px;
background-color: #131313;
-pie-background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px / 20px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px / 20px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px / 20px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px / 20px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px) 0 0 / 20px,
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424)
0 0 / 20px #131313;
}
<div></div>
Source: http://css3pie.com/demos/gradient-patterns/
Not exactly the required background but I guess it is simple and easy to use.
div{
position: absolute;
width: 200px;
height: 200px;
background: -webkit-repeating-linear-gradient(180deg, transparent, #868686 10%, #fff 10%);
background-color: #222222;
}
div.last{
background: -webkit-repeating-linear-gradient(transparent, #868686 10%, #fff 10%);
}
<div></div>
<div class="last"></div>
Related
I've got a div( well it's actually a <th> but I don't think that's relevant) with some dynamically-sized content in it.
I'd like to put a border triangle in the parent div, that fills it (base same width as div, height same height as div).
With a fixed parent div size I can do it as below. Is it possible to do this without a fixed parent div size?
I'm using VueJs if that's any use
.crossedleft {
background:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%)
}
.crossedright {
background:
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%)
}
<div style="height:50px;width:100px">
<div class="crossedleft" style="position:absolute; height:50px;width:50px">
<div class="crossedright" style="position:absolute; height:50px;width:50px;left:50px">
</div>
<pre>
content
</pre>
</div>
Apply both backgrounds to the div instead:
.tri {
background:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%) left, /* one on the left */
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%) right; /* the other the right */
background-size:50% 100%; /* both width:50% and height:100% */
background-repeat:no-repeat;
}
<div style="width:100px" class="tri">
<pre>
content
</pre>
</div>
You can simplify the code a little like below:
.tri {
--g:rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px);
background:
linear-gradient(to top left, var(--g)),
linear-gradient(to top right, var(--g)) 100%;
background-size:50% 100%;
background-repeat:no-repeat;
}
<div style="width:100px" class="tri">
<pre>
content
</pre>
</div>
First of all, you can use your own approach totally responsively by working with percentages. You can even eliminate all extra elements by using pseudo elements ::before and ::after like this:
.triangle {
position: relative;
display: inline-block;
padding: 1em;
border-bottom: 1px black solid;
}
.triangle::before,
.triangle::after {
content: "";
display: block;
width: 50%;
height: 100%;
position: absolute;
top: 0;
}
.triangle::before {
left: 0;
background: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%)
}
.triangle::after {
right: 0;
background: linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%)
}
<div class="triangle">Short</div>
<div class="triangle">This is a very long sentence</div>
However, in this case you might be better off with an SVG background as it can contain any shape you like. With a simple shape like a triangle you can even embed it into your CSS:
.triangle {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,1 98,98 1,98' fill='none' stroke='black' stroke-width='1px' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 100% 100%;
display: inline-block;
padding: 1em;
}
<div class="triangle">Short</div>
<div class="triangle">This is a very long sentence</div>
The SVG in this example is
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="50,1 99,99 1,99" fill="none" stroke="black" stroke-width="1px" vector-effect="non-scaling-stroke" />
</svg>
From http://enjoycss.com/ I used a pattern to make a background grid such as this one
.gradient-pattern {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 8.5in;
height: 11in;
border: none;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(255,255,255,1);
-o-text-overflow: clip;
text-overflow: clip;
background: -webkit-linear-gradient(90deg, rgba(209,209,209,1) 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), -webkit-linear-gradient(0deg, rgba(209,209,209,1) 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), -webkit-linear-gradient(90deg, rgba(209,209,209,1) 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), -webkit-linear-gradient(0deg, rgba(209,209,209,1) 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), rgba(255,255,255,1);
background: -moz-linear-gradient(0deg, rgba(209,209,209,1) 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), -moz-linear-gradient(90deg, rgba(209,209,209,1) 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), -moz-linear-gradient(0deg, rgba(209,209,209,1) 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), -moz-linear-gradient(90deg, rgba(209,209,209,1) 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), rgba(255,255,255,1);
background: linear-gradient(0deg, rgba(209,209,209,1) 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(209,209,209,1) 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), linear-gradient(0deg, rgba(209,209,209,1) 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(209,209,209,1) 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), rgba(255,255,255,1);
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
However when I place elements on the page, the pattern obscures the elements (all elements such as text, buttons etc)
How can I make this pattern a true background?
I set it on a div like this, and place the elements inside the div.
<div class="gradient-pattern"></div>
I would say, assign the relevant settings to the body tag:
body {
background: -webkit-linear-gradient(90deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), -webkit-linear-gradient(0deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), -webkit-linear-gradient(90deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), -webkit-linear-gradient(0deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), rgb(34, 102, 153);
background: -moz-linear-gradient(0deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), -moz-linear-gradient(90deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), -moz-linear-gradient(0deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), -moz-linear-gradient(90deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), rgb(34, 102, 153);
background: linear-gradient(0deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), linear-gradient(90deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), linear-gradient(0deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), linear-gradient(90deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), rgb(34, 102, 153);
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
I am trying to put a grid pattern behind some <divs>, like shown in the following (https://jsfiddle.net/4e5mcmk4/25/):
<div id="parent">
<div id="childA"></div>
<div id="childB">
hello
</div>
</div>
And here is the CSS:
body {
background:
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(-90deg, transparent 1px, transparent 1px),
linear-gradient(-90deg, transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(transparent 1px, transparent 1px), transparent;
background-size:
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px;
}
This is the look I am going for, but instead of applying this CSS rule to body, I want "#childA" to fill the parent (and parent to fill body), and apply the same background. More generally, I want a full-size div to appear underneath its sibling div.
However, I can't seem to get parent, childA, or childB to expand to fill the space of the div.
Any suggestions?
All you need then is to set the width and height of the parent while applying the background property
#parent{
background:
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(-90deg, transparent 1px, transparent 1px),
linear-gradient(-90deg, transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(transparent 1px, transparent 1px), transparent;
background-size:
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px;
width:100%;
height:100%;
position:absolute;
}
#childA{
width:100%;
height:100%;
}
I added position absolute because it has no parent with a fixed width
https://jsfiddle.net/4e5mcmk4/27/
Is this what you are going for? http://jsfiddle.net/DIRTY_SMITH/e9ypqy5t/12/
#parent{
width: 100%;
height: 100vh;
}
#childA{
width: 100%;
height: calc(100% - 20px);
background:
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(-90deg, transparent 1px, transparent 1px),
linear-gradient(-90deg, transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(transparent 1px, transparent 1px), transparent;
background-size:
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px;
}
#childB{width: 100%; height: 20px; background-color: lightblue;}
I want to create the same linear gradient for each border.
The border gradient with 5 colors starts from
transparent to white to black to white to transparent
That way I have transparent corners.
How can I do this for all 4 borders?
Is it possible to assign a linear-gradient to a border?
Sidenote: It should run without too much effort on IE9+ else IE10+ :P
How about using a radial gradient? Although this is just a mock up, you can see the basic effect.
.outer {
vertical-align:top;
display:inline-block;
height: 100px;
width: 100px;
position: relative;
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 1%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 90%, rgba(0,0,0,0) 99%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,1)), color-stop(90%,rgba(0,0,0,0)), color-stop(99%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.inner {
height: 90%;
width: 90%;
position: absolute;
left: 5%;
top: 5%;
background: white;
}
<div class="outer">
<div class="inner">
text
</div>
</div>
<div class="outer" style="height:100px; width:200px">
<div class="inner">
text
</div>
</div>
Resources
1 * gradient generator
Note
Not suitable for projects for <=IE9
You could also do this with multiple linear-gradients as backgrounds and position them as required like in the below snippet.
To change the size/width of the border, modify the 20px value in the background-size. (Note: Depending on the desired output, you may have to change the linear-gradient percentages also when you change the size. But that should be reasonably straight-forward to do.)
background-size: 100% 20px, 100% 20px, 20px 100%, 20px 100%;
Gradients on the whole have no support in IE 9 but should work in IE 10+. Border-image on the other hand works only from IE 11 upwards.
.border-image {
height: 200px;
width: 200px;
background: -webkit-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -webkit-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -webkit-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -webkit-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%);
background: -moz-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -moz-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -moz-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -moz-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%);
background: linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 100% 20px, 100% 20px, 20px 100%, 20px 100%;
background-position: 0px 0px, 0px 100%, 0px 0px, 100% 0px;
padding: 20px;
}
<div class="border-image">Some Test Content</div>
I have a div with a linear-gradiant as background. This gradient is created with a color parameter. But I also want to show a diagonal hatch pattern over the gradient.
"background: linear-gradient(" + color2 + "," + color + ")"
I've created the hatch pattern with another linear-gradient:
background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size: 4px 4px;
background-position: 0 0, 2px 2px;
I'm not able to show the two linear-gradient at the same time.
The order is important. Your last background-image will be rendered first, so this one has to be the non transparent one.
And also, you need to keep all the related properties, size and origin:
.div1 {
background-image:
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
linear-gradient(#f00000,#ffffff);
background-size: 4px 4px, 4px 4px, 100% 100%;
background-position: 0px 0px, 2px 2px, 0px 0px;
}
fiddle
you could have nested divs and then apply the styles separately:
Html
<div class="div1"><div class="div2"></div></div>
Css
.div1 {background: linear-gradient(#f00000,#ffffff)}
.div2
{
background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size: 4px 4px;
background-position: 0 0, 2px 2px;
}
Example