Related
I'm creating an opacity slider in Angular 8.
I want to set the background to a checkerboard CSS pattern. I am creating the styles in a function because I am sensing the width of the slider and adjusting the size of the checkers as well as allowing custom colors via an input.
background-image needs to be overloaded to account for webkit/moz browser prefixes. Attempting to do that causes an error because the JSON object has duplicate background-image keys.
This code works in a Sass file with the variables hard-coded and it also works in both webkit and moz browsers when the appropriate background-image rule is commented out.
I have tried (without any luck):
Calling [NgStyle] twice with the background-image rules in two different functions.
Calling [NgStyle] using the function, and using [style.background-image] with just the moz rule
Camel casing one of the background-image keys to make it unique to JSON
Is there any way that I can accomplish my goal of having this dynamically created background and also support both moz and webkit based browsers?
public setBackground() {
let checkerSize: number = this.getCheckerSizeInPixels();
return {
"background-image": `-moz-linear-gradient(45deg, ${this.backgroundColor.toRgbaString()} 25%, transparent 25%),
-moz-linear-gradient(-45deg, ${this.backgroundColor.toRgbaString()} 25%, transparent 25%),
-moz-linear-gradient(45deg, transparent 75%, ${this.backgroundColor.toRgbaString()} 75%),
-moz-linear-gradient(-45deg, transparent 75%, ${this.backgroundColor.toRgbaString()} 75%)`,
"background-image":
`-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, ${this.backgroundColor.toRgbaString()}), color-stop(.25, transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, ${this.backgroundColor.toRgbaString()}), color-stop(.25, transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, ${this.backgroundColor.toRgbaString()})),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, ${this.backgroundColor.toRgbaString()}))`,
"-moz-background-size": `${checkerSize}px ${checkerSize}px`,
"background-size": `${checkerSize}px ${checkerSize}px`,
"-webkit-background-size": `${checkerSize}px ${checkerSize}px`,
"background-position":`0 0, ${checkerSize/2}px 0, ${checkerSize/2}px -${checkerSize/2}px, 0rem ${checkerSize/2}px`
};
}
.opacity-selector {
margin: 0;
padding: 0;
box-sizing: border-box;
display: block;
width: 100%;
height: 100%;
// background-image:
// -moz-linear-gradient(45deg, lightgray 25%, transparent 25%),
// -moz-linear-gradient(-45deg, lightgray 25%, transparent 25%),
// -moz-linear-gradient(45deg, transparent 75%, lightgray 75%),
// -moz-linear-gradient(-45deg, transparent 75%, lightgray 75%);
// background-image:
// -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, lightgray), color-stop(.25, transparent)),
// -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, lightgray), color-stop(.25, transparent)),
// -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, lightgray)),
// -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, lightgray));
// -moz-background-size: 1rem 1rem;
// background-size: 1rem 1rem;
// -webkit-background-size: 1rem 1rem;
// background-position:0 0, .5rem 0, .5rem -.5rem, 0rem .5rem;
}
<div class="opacity-selector" [ngStyle]="setBackground()"></div>
The browser pre-fixes are not required anymore. This requires the following changes to the code to get it to work as it was working with prefixes:
public setBackground() {
let checkerSize: number = this.getCheckerSizeInPixels();
return {
"background-image": `linear-gradient(45deg, ${this.backgroundColor.toRgbaString()} 25%, transparent 25%),
linear-gradient(-45deg, ${this.backgroundColor.toRgbaString()} 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, ${this.backgroundColor.toRgbaString()} 75%),
linear-gradient(-45deg, transparent 75%, ${this.backgroundColor.toRgbaString()} 75%)`,
"background-size": `${checkerSize}px ${checkerSize}px`,
"background-position":`0 0, 0px ${checkerSize/2}px, ${checkerSize/2}px -${checkerSize/2}px, -${checkerSize/2}px 0px`
};
}
Changes to background-position are from this post: CSS gradient checkerboard pattern
This solution solves for my specific use-case, but it doesn't answer the broader question: How would this be accomplished if the browser prefixs were still required? If anyone has a solution - I am still interested in hearing it, please post it.
i have this code on Codepen:
body {
width: 100px;
height: 100px;
background-color: #eee;
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: 60px 60px;
background-position:0 0, 30px 30px;
}
for some reason I get this message:
Invalid CSS after "100px": expected expression (e.g. 1px, bold), was
";"
Any idea what's going on?
see it on Codepen
When using SASS, you don't need any curly brackets or semicolons. You also have to get rid of any line breaks in comma separated values.
I don't know about the backwards-capability of SASS to CSS, but see the Codepen working with SASS enabled:
http://codepen.io/anon/pen/ygxKvK
body
width: 100px
height: 100px
background-color: #eee
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: 60px 60px
background-position: 0 0, 30px 30px
http://codepen.io/isaacalves/pen/OWoQGP - This works now.
Just set the CSS pre-processor settings as SCSS
I was just confusing Sass with Scss.
http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better
I'm trying to use http://patternify.com to try to make diagonal lines, it's working but the lines don't seem to be connecting, this is how they show up:
If you look closely you'll see small gaps between where the lines meet.
This is the link to the pattern generator http://ptrn.it/1TonkQe
Any information on how to make these lines connect or a better way to do it would be great thanks
If you want to use diagonal line from patternify copy the css code from here and use as below.
HTML:
<div class="myDiv"></div>
CSS:
.myDiv{
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAO0lEQVQYlY3KuREAIAwEsatt66cnkwDD44dAmQRYRVLTTwIsjTOlcU9hvJMbvfTEKB0xSytWaZw6AdYBgzinO79RFiIAAAAASUVORK5CYII=) repeat;
height: 400px;
width: 400px;
}
Yeah I just got the same result as you, I am not a fan of those css generator tools. This is how I create css diagonal stripes: https://jsfiddle.net/d4f3y92h/1/
body{
background-size: 50px 50px;
background-color: #ccc;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
}
I want to create a checkerboard pattern using gradients. I've found an example and modified it to my needs, however it only works with -moz prefix. When I remove the -moz prefix, the pattern is completely different.
How can I make this -moz checkerboard pattern work with unprefixed linear-gradient?
body {
background-image:
linear-gradient(45deg, #808080 25%, transparent 25%),
linear-gradient(-45deg, #808080 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #808080 75%),
linear-gradient(-45deg, transparent 75%, #808080 75%);
background-size:20px 20px;
background-position:0 0, 10px 0, 10px -10px, 0px 10px;
}
Just modify the background-position like in the below snippet to get the required output. This works fine in Firefox, Chrome, Opera, IE11 and Edge.
body {
background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
The problem seems to be happening because of a difference in the way the angles are handled by the -moz linear gradient and the standard one. -45deg in the -moz linear gradient seems to be equal to 135deg in the standard gradient (but changing the angle is resulting in a strange dot in the middle).
The below screenshots show the difference (both taken in the latest Firefox v44.0).
Output with -moz-linear-gradient:
Output with linear gradient:
It's 2020 and this can now be created with a single CSS gradient (if you don't need to support IE/ pre-Chromium Edge).
html {
background:
repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%)
50% / 20px 20px
}
I wrote a detailed explanation on CSS Tricks for how this works.
The 45deg version works nicely, but can end up showing a line between the triangles at different zoom levels or on retina screens. Depending on what browsers you need to support you can also use background-blend-mode: difference (Caniuse currently shows support nearly everywhere except IE), you can tint the checks using an additional background image:
body {
background-image: /* tint image */
linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),
/* checkered effect */
linear-gradient(to right, black 50%, white 50%),
linear-gradient(to bottom, black 50%, white 50%);
background-blend-mode: normal, difference, normal;
background-size: 2em 2em;
}
This was Chrome's implementation for when you opened an image with transparency for a while (though they later removed it in favor of just using a solid background).
body {
background-position: 0px 0px, 10px 10px;
background-size: 20px 20px;
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
}
Thanks Harry for the inspiration - here's an scss mixin to do that
#mixin checkers($size: 50px, $contrast: 0.07) {
$checkerColor: rgba(#000, $contrast);
$angle: 45deg;
$tp: 25%;
background-image: linear-gradient($angle, $checkerColor $tp, transparent $tp),
linear-gradient(-$angle, $checkerColor $tp, transparent $tp),
linear-gradient($angle, transparent 3 * $tp, $checkerColor 3 * $tp),
linear-gradient(-$angle, transparent 3 * $tp, $checkerColor 3 * $tp);
background-size: $size $size;
background-position: 0 0, 0 $size/2, $size/2 -1 * $size/2, -1 * $size/2 0;
}
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;