I am trying to build a background with gradients that has the following pattern: a vertical line every 50px and a dashed line every 300px (as in every sixth line).
What I have so far is the following, which gives me a normal vertical line every 50px (live example):
body {
background-color: aliceblue;
background-size: 50px 50px;
background-image: linear-gradient(to right, gray 1px, transparent 1px);
}
And I also have this, which gives me a dashed vertical line every 300px (live example):
body {
background-color: aliceblue;
background-size: 10px 10px, calc(50px * 6) calc(50px * 6);
background-image:
linear-gradient(to bottom, transparent 5px, aliceblue 5px),
linear-gradient(to right, gray 1px, transparent 1px);
}
What I cannot come up with is how to combine them together so I can get the complete pattern. Is something like this possible with a single background?
A slightly simplisitc way of doing this could be to have the solid vertical lines - 5 solid and 1 transparent - drawn in one linear gradient and the two linear gradients which form the dashed part coming next.
This means the solid lines overwrite the aliceblue of the last two linear gradients.
body {
background-color: aliceblue;
background-size: 300px 50px, 10px 10px, calc(50px * 6) calc(50px * 6);
background-position: 0 0, -50px 0, -50px 0;
background-image: linear-gradient(to right, gray 0 1px, transparent 1px 50px, gray 50px 51px, transparent 51px 100px, gray 100px 101px, transparent 101px 150px, gray 150px 151px, transparent 151px 200px, gray 200px 201px, transparent 201px), linear-gradient(to bottom, transparent 5px, aliceblue 5px), linear-gradient(to right, gray 1px, transparent 1px);
}
I was able to accomplish a small cutoff in the lower left hand of a box using:
background: linear-gradient(
45deg,
transparent 7px,
$color--background 7px
);
But now I'm trying to create the same thing but this time 2 cut off corners in the upper left, and right. I tried doing this, thinking it would cut off the upper left and bottom left but that didn't work out:
background: linear-gradient(
45deg,
transparent 7px,
$color--background 7px
), linear-gradient(
135deg,
transparent 7px,
$color--background 7px
);
Any help would be great thank you.
consider background-size and background-position:
.box {
background:
linear-gradient(-135deg, transparent 20px, red 0) right,
linear-gradient( 135deg, transparent 20px, red 0) left;
background-size:51% 100%; /* width height */
background-repeat:no-repeat;
height:100px;
}
<div class="box">
</div>
Or like below:
.box {
background:
linear-gradient( 45deg, transparent 20px, red 0) bottom,
linear-gradient( 135deg, transparent 20px, red 0) top;
background-size:100% 51%;
background-repeat:no-repeat;
height:100px;
}
<div class="box">
</div>
For a more fancy way you can consider using mask and have any kind of background
.box {
-webkit-mask:
linear-gradient( 45deg, transparent 20px, red 0) bottom,
linear-gradient( 135deg, transparent 20px, red 0) top;
-webkit-mask-size:100% 51%;
-webkit-mask-repeat:no-repeat;
mask:
linear-gradient( 45deg, transparent 20px, red 0) bottom,
linear-gradient( 135deg, transparent 20px, red 0) top;
mask-size:100% 51%;
mask-repeat:no-repeat;
background:linear-gradient(25deg,red,yellow,purple,blue);
height:100px;
}
.box2 {
-webkit-mask:
linear-gradient(-135deg, transparent 20px, red 0) right,
linear-gradient( 135deg, transparent 20px, red 0) left;
-webkit-mask-size:51% 100%;
-webkit-mask-repeat:no-repeat;
mask:
linear-gradient(-135deg, transparent 20px, red 0) right,
linear-gradient( 135deg, transparent 20px, red 0) left;
mask-size:51% 100%;
mask-repeat:no-repeat;
background:linear-gradient(25deg,red,yellow,purple,blue);
height:100px;
}
<div class="box">
</div>
<div class="box2">
</div>
I am trying to make the entire background of a page look like the image below with CSS, and I'm having difficulty using multiple linear-gradients together. The background has to have thin diagonal stripes with a top-to-bottom color fade that is lighter in the middle and fades to a darker color at the top and bottom.
I have tried a bunch of things and what I have here looks the best so far, but it's not quite right. Here is a jsfiddle showing what I have.
I am okay with the stripes, but the top-to-bottom gradient is definitely off, as the gradient only shows on the transparent stripes. I think what is needed here, is two gradients that overlap somehow to get the effect below, but perhaps there is a better way.
Here is the code from the fiddle in case the link breaks in the future:
/* Stripes */
body {
background: linear-gradient(
-45deg,
#5BABCF 25%,
transparent 25%,
transparent 50%,
#5BABCF 50%,
#5BABCF 75%,
transparent 75%,
transparent
);
background-size: 6px 6px;
height: 100vh;
margin: 0;
padding: 0;
}
/* Color Fade */
html {
background: repeating-linear-gradient(
to bottom,
#051219,
#91B7CA 25%,
transparent 50%,
#91B7CA 75%,
#051219 100%
);
}
Any idea how to go about doing this?
Added opacity to the diagonal stripes in body
body {
background: linear-gradient(
-45deg,
#5BABCF 25%,
transparent 25%,
transparent 50%,
#5BABCF 50%,
#5BABCF 75%,
transparent 75%,
transparent
);
background-size: 6px 6px;
height: 100vh;
margin: 0;
padding: 0;
opacity: 0.2;
}
/* Color Fade */
html {
background: repeating-linear-gradient(
to bottom,
#051219,
#91B7CA 25%,
transparent 50%,
#91B7CA 75%,
#051219 100%
);
}
How make ZigZag line, vertical Not horizontal with css
I try, but I can't
Try this you can adjust their size using background-size property.
.con{
width:200px;
height:200px;
background:
linear-gradient(45deg, #ECEDDC 25%, transparent 25%) 0 -50px,
linear-gradient(135deg, #ECEDDC 25%, transparent 25%) 0 -50px,
linear-gradient(225deg, #ECEDDC 25%, transparent 25%),
linear-gradient(315deg, #ECEDDC 25%, transparent 25%);
background-size: 20px 20px;
background-color: #EC173A;
}
<div class="con"></div>
Is it possible or is there a trick to make a background pixelated like the one in the image attached?
I use a background image, but as you can see it doesn't scale and it flashs on page scrolling.
Now I have CSS thanks to vlcekmi3:
background-color: white;
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);
background-size:100px 100px;
background-position: 0 0, 50px 50px;
But I'm unable to make it exactly like the image. Can someone check it?
Any code, resource, tutorial, and suggestion is appreciated.
From thirtydot's comment in the first post. Should have posted it as an answer - Brilliant. I almost missed it. Please rate his comment up :) I am only posting this as an answer so it might help others as it helped me.
Using a base64 encoded message:
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=);
http://jsfiddle.net/thirtydot/v7T98/3/
Here's the best I could come up with to match your image. It's adapted from the example here by Lea Verou What will be your fallback for non css3 browsers?
body {
background-image: -moz-linear-gradient(45deg, #666 25%, transparent 25%),
-moz-linear-gradient(-45deg, #666 25%, transparent 25%),
-moz-linear-gradient(45deg, transparent 75%, #666 75%),
-moz-linear-gradient(-45deg, transparent 75%, #666 75%);
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #666), color-stop(.25, transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #666), color-stop(.25, transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #666)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #666));
background-image: -webkit-linear-gradient(45deg, #666 25%, transparent 25%),
-webkit-linear-gradient(-45deg, #666 25%, transparent 25%),
-webkit-linear-gradient(45deg, transparent 75%, #666 75%),
-webkit-linear-gradient(-45deg, transparent 75%, #666 75%);
background-image: -o-linear-gradient(45deg, #666 25%, transparent 25%),
-o-linear-gradient(-45deg, #666 25%, transparent 25%),
-o-linear-gradient(45deg, transparent 75%, #666 75%),
-o-linear-gradient(-45deg, transparent 75%, #666 75%);
background-image: linear-gradient(45deg, #666 25%, transparent 25%),
linear-gradient(-45deg, #666 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #666 75%),
linear-gradient(-45deg, transparent 75%, #666 75%);
-moz-background-size: 2px 2px;
background-size: 2px 2px;
-webkit-background-size: 2px 2.1px; /* override value for webkit */
background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
}
jsfiddle example
The "flickering" you observe is is not a software issue, but a hardware one. Basically, it's caused by that fact that the pixels on your screen can't change color instantly. Since your dotted background consists of alternating rows of pixels, any time you scroll down by an odd number of pixels, there will be a brief moment when your screen is switching between two shifted copies of the pattern, and this will appear as flicker.
This thread on Graphic Design Stack Exchange features an even more dramatic example of the same effect, and also explains why it happens in more detail. Just for a quick demonstration, let me borrow one of the images from Volker Siegel's answer:
Note how, on most screens, this image will show a noticeable "pulsing" effect when scrolled. (It may also appear to flicker a bit even while just looking at it, simply because the photoreceptors in your eyes also have some response delay and adaptation effects.)
Anyway, the only way you can stop your dotted background from flickering while scrolling is to make it not scroll. Fortunately, there's a CSS property just for that:
background-attachment: fixed;
Other than that, there's not much else to it. The best way to actually render the background is almost certainly with a simple two-color PNG image. You can even make the image semitransparent, so that you can layer it on top of different colored backgrounds. See the snippet below for a demonstration:
body {
background-color: white;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGUlEQVQ4y2NgoBJwoJAedcGoC0ZdMOAuAABF0hABJ/8lyQAAAABJRU5ErkJggg==);
background-attachment: fixed;
}
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
Note how the pattern does not flicker when you scroll it with the inner scroll bar. (It does flicker when you scroll the whole SO page, because the pattern is attached to the <iframe> it's displayed in, and will scroll along with it.)
(BTW, the inline image I've used in the snippet above is 16 × 16 pixels, even though the actual pattern is just 2 × 2 pixels. Repeating it a few times doesn't cost much in terms of file size, though, and might be slightly safer, as I seem to recall some older browsers having issues with very small background images.)
How about this one?
.card {
background: linear-gradient(90deg, #fff 2px, transparent 1%) center, linear-gradient(#fff 2px, transparent 1%) center, #ccc;
background-size: 5px 5px;
height: 10em;
width: 30em;
position: relative;
}
.text {
font-size: 2em;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="card">
<div class="text">
Hello world!
</div>
</div>
In general the formula is
// color
$bg-color: #fff;
$dot-color: $gray-darker;
// Dimensions
$dot-size: 3px;
$dot-space: 5px;
background: linear-gradient(90deg, $bg-color ($dot-space - $dot-size), transparent 1%) center,
linear-gradient($bg-color ($dot-space - $dot-size), transparent 1%) center, $dot-color;
background-size: $dot-space $dot-space;
as seen # https://codepen.io/edmundojr/pen/xOYJGw
This is because of background-size, so just try this:
background-size:2px 2px;
Without all the browser prefixes:
background: linear-gradient(
45deg,
#fff,
#fff 50%,
#000 50%,
#000
);
background-size: 2px 2px;