Related
A CSS linear gradient background element has fuzzy transitions between colours even when the stops are at the same spot.
I have an element with the background defined like so:
background:linear-gradient(to right,
blue, blue 10%,
red 10%, red 30%,
yellow 30%, yellow 40%,
green 40%, green 50%,
black 50%
);
In Firefox, the transitions between the colours are fuzzy. If I use a repeating-linear-gradient the edges are crisp. Both are crisp in Chrome.
I have an example pen here: https://codepen.io/anon/pen/rPVWZE?editors=1100#0
Any ideas on how to fix this?
Here the effect on FF. I drew some pixels to show zoom level:
A workaround:
.linear{
height:100px;
background-image:
linear-gradient(to right, blue 0, blue 100px),
linear-gradient(to right, red 0, red 100px),
linear-gradient(to right, yellow 0, yellow 100px);
background-size:
100px 100px,
100px 100px,
100px 100px;
background-position:
0 0,
100px 0,
200px 0;
background-repeat: no-repeat;
}
<div class = "linear"></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%
);
}
True carbon fiber is a series of interlocking grey fibers they look like grey colored woven sheets. Does anyone know how to create such a pattern in CSS please?
The examples by Lea Verou are not true carbon fiber, hopefully you know what "true" carbon fiber looks like!
Ultimately I am wanting to achieve something similar to this background here.
By having further gradients superimposed of the carbon fiber background.
A gradient pattern similar to the one present in the linked website (they use an image as background) can be achieved using the same method as used by Lea Verou.
By adding an extra linear-gradient image as the bottom-most layer and making it go from a darker shade of black to a lighter shade, we can get the same effect as in that website.
Note: That website also uses another layer on top to kind of blur out the ends but I think you are only looking for the interlocking pattern. This extra layer (if required) can also be added using CSS.
body {
background-color: rgb(32, 32, 32);
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(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));
background-size: 10px 10px, 10px 10px, 10px 5px;
background-position: 0px 0px, 5px 5px, 0px 0px;
}
If you need an exact replica of the effect in that website (where the gradient fades into a black color at both the left and right side) then add an extra layer on top of the existing gradients and make it go from black to transparent to black like in the below snippet.
body {
background-color: rgb(32, 32, 32);
background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,1)), 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(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));
background-size: 100% 100%, 10px 10px, 10px 10px, 10px 5px;
background-position: 0px 0px, 0px 0px, 5px 5px, 0px 0px;
}
How would I create the below image using only CSS?
I'm attempting to draw a line with a transparent gradient at either end - here's what I've tried which does not work:
background-image: -webkit-linear-gradient(left, transparent, #8C8C8C),
-webkit-linear-gradient(right, transparent, #8C8C8C);
So at the left and right end of the line the gradient moves inwards.
You should just use a single gradient like in the below snippet with the start and end as transparent.
Explanation:
transparent 0% means the gradient starts with transparent color
#8C8C8C 15% means that between 0% to 15% the gradient's color gradually changes from transparent to #8C8C8C.
#8C8C8C 85% means that the gradient's color stays as #8C8C8C from 15% to 85%.
transparent 100% means that the gradient's color would again change gradually from #8C8C8C to transparent between 85% - 100%.
The color stops create the illusion as though the gradient is proceeding inwards from either direction. Equal splits make the change look equal on either side.
div {
background-image: -webkit-linear-gradient(left, transparent 0%, #8C8C8C 15%, #8C8C8C 85%, transparent 100%);
background-image: linear-gradient(left, transparent 0%, #8C8C8C 15%, #8C8C8C 85%, transparent 100%);
height: 2px;
}
<div></div>
The various color stop values can help achieve that effect.
Stop the white at 10% and prolong a mix of transparent and gray(increasing) up to 50% and then a mix of gray and transparent(increasing) up to 100%.
.gradient {
width: 600px;
height: 1px;
background: linear-gradient(to right, transparent 10%, gray 50%, transparent 100%);
}
<div class="gradient"></div>
Also, you can play around with the % values to get the exact gradient. For example, your image can be made as accurate as possible by increasing the stop points like below.
.gradient {
width: 600px;
height: 1px;
background: linear-gradient(to right, transparent 10%, gray 20%, gray 90%, transparent 98%, transparent 100%);
}
<div class="gradient"></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;