I have an image that has:
White pixels: I would like to dynamically set these to any colour
Black pixels: I would like these to remain black
Transparent pixels: I would like these to show through whatever background it is currently on.
Here is an example of the image overlaid on a reddish background:
I would like to be able to tint the bunny any colour I like, without resorting to background tricks because the background colour that the tinted image is shown against, should show through unchanged.
A pure CSS solution is preferred, but javascript image manipulation ideas are also welcome.
The bunny by itself:
Using mask and blend mode you can do it:
.bunny {
--img: url(https://i.ibb.co/ngFGkgy/clOwR.png); /* Your png */
width: 32px;
aspect-ratio: 1;
background: var(--img) center/cover;
background-blend-mode: darken;
-webkit-mask: var(--img) center/cover;
mask: var(--img) center/cover;
background-color: red; /* the color */
}
<div class="bunny"></div>
<div class="bunny" style="width:100px;background-color:green"></div>
<div class="bunny" style="width:100px;background-color:blue"></div>
Related
For a client I am trying to implement a background on an HTML element, which contains 2 radial gradients. One is located in the top right, one is located in the bottom left. My CSS only renders one of the radial gradients.
I have tried putting two radial gradient elements as a background:
body {
width: 100vw;
height: 100vh;
background-color: green;
background:
radial-gradient(
circle at top right,
red,
black 20%
),
radial-gradient(
circle at bottom left,
yellow,
orange 20%
);
}
Only the first radial-gradient appears, but the second one doesn't. When I switch the position of both gradients in de CSS markup, the colors change. So it appears as if only the first gradient is recognised.
I'm not sure which amount of color you want to see in the result, but my guess is you are after something like this.
body {
width: 100vw;
height: 100vh;
margin:0;
background-color: green;
background-image:
radial-gradient(
circle at top right,
red,
black 20%,
transparent 40%
),
radial-gradient(
circle at bottom left,
yellow,
orange 20%,
transparent 40%
);
}
One problem with your code was that you used the background shorthand for the background images, which resets the background color, so the green was no longer there. Use background-image instead.
Another was that both gradients covered the whole page, while you apparently want them to take up only the top right corner and bottom left corner instead. I solved this by giving them both transparent from 40%.
And I took the liberty of giving the body 0 margin, to get rid of the scrollbars.
My CSS only renders one of the radial gradients.
Simply because you are using opaque colors and by default a gradient will cover all the element so your will only see the top layer.
In addition to the answer of Mr Lister, you can adjust background-size to control the space each gradient should take:
body {
margin:0;
height: 100vh;
background:
radial-gradient(circle at top right, red, black 40%) right,
radial-gradient(circle at bottom left, yellow, orange 40%) left;
background-size:50% 100%;
background-repeat:no-repeat;
}
This looks a bit ugly but if you want to have a continuous background make sure both end color are the same:
body {
margin:0;
height: 100vh;
background:
radial-gradient(circle at top right , red, black 40%, green 60%) right,
radial-gradient(circle at bottom left, yellow, orange 40%, green 60%) left;
background-size:50.5% 100%;
background-repeat:no-repeat;
}
So I have a background:
I want this background to appear pretty much like it is and then repeat vertically, but instead of the rest of the background being white, I want it to be the same color as the last color on that gradient.
My CSS:
body {
background-image:url('background.jpg');
background-repeat:repeat-y;
background-size: 20%;
}
This makes it take up 20% of my background size and then leaving a trail of white which I want turned into the last color of the gradient.
Add
background-color:#86a6b5;
To you CSS.
Demo: http://jsfiddle.net/2KYWL/
Try adding background-color:
body {
background-color:blue;
background-image:url('background.jpg');
background-repeat:repeat-y;
background-size: 20%;
}
I have a navigation bar and want it to have a border at the bottom like a multi-colored stripe. For example, Google uses a multi-colored stripe like this:
Could I do this in pure CSS, or would I have to use something like border-image?
You can do this with a linear gradient. In addition to just plain colors, you can do gradients for each stop. For google's own stripe, the color stops would look like this, CSS color names used for clarity:
background-image: linear-gradient(
to right,
blue,
blue 25%,
red 25%,
red 50%,
orange 50%,
orange 75%,
green 75%);
You can play with background-position and background-size to make it smaller than just the full header size, or put it into an :after / :before element and change the size on that element.
Example of color stops with gradient:
http://codepen.io/tholex/pen/nCzLt
I think you're much better doing this with a background image. You can keep the image really tiny by making each colour 1px wide and your image file 1px tall (they'll scale perfectly, with crisp edges).
An example:
.navigation-bar:after {
content: " ";
height: 6px;
width: 100%;
background: url(../img/stripe.png) repeat;
background-size: 100% 1px;
}
I've tried to do this various different ways, but have had no success so far.
Essentially what I want is a gradient going down the page (which I am using a background image for), then once the image ends, I want a background colour to take over (so that the page doesn't just turn white).
I've tried messing around with using different div tags and the like to layer things etc, but have had no luck so far. Either the background colour overrides the image, or the colour doesn't extend to the bottom of the page.
You could just use a background for your body:
body {
/* Your gradient image */
background-image: url(my_gradient.png);
/* Color below the background image */
background-color: #C0FFEE;
/* Only repeat from left to right */
background-repeat: repeat-x;
}
Or use the background shorthand
body {
background:#C0FFEE url('my_gradient.png') repeat-x left top;
}
You probably want to do something like this:
body
{
background: #FFCC00 url('your-background.png') repeat-x;
}
Try something like this:
http://jsfiddle.net/pUKeT/
body{
background: blue url(http://www.laserasecroydon.com/assets/images/blue-gradient.jpg) no-repeat fixed left top;
}
It's not pretty, but this way you can see where the color should take over
body{
background:url("image.jpg") #COLOR no-repeat;
}
Thanks guys, I've worked it out. The CSS I was using was fine, it was the image that was the problem. Instead of setting the background to white, it was transparent. Hence the colour came through and overrode the gradient. I've now set the background to white, and it works fine.
How to design
1) a vertical gradient background with unfixed height,
2) a vertical gradient background with fixed height (say 600px, from blue to white to green), then the rest has the same green color?
update
Now the new design is from the top to the bottom, 120px fixed height from blue to white, then unfixed height for white, and then 120px fixed height from white to green. How to code that?
There is a way to do it, you will want to take advantage of the available background properties:
body {
background-color: green;
background-image: linear-gradient(blue, white, green);
background-repeat: no-repeat;
background-size: 100% 600px;
}
Live example: http://jsfiddle.net/sl1dr/PxNhY/
If you want an unfixed height then replace 600px with 100%.
EDIT: Here is the new solution according to your changes: http://jsfiddle.net/sl1dr/EtYLZ/
You can try crossbrowser (ie5.5+) linerar gradient generator
This Link:
Css Gradient From Green To White To Blue
Or you can use this link directly: Gradient Generator for generating cross-browser Css 3.0 Backgrounds.
You can generate Professional gradients and get the code for pasting in your own css file.
You must know that the css may not support some versions of IE