I've been trying all day to find a solution to colorize text when a slanted element is over it. I have partially solved this with mix-blend-mode. But I don't like that you don't have a full control over the colors.
The buttons should be available in many different colors and you have to be able to clearly define what color the text should have and what color it should get when the element moves over it.
I have created a Stackblitz here. With a yellow background, the text should be black and become white when the element is placed over it, this does not seem to be possible with mix-blend-mode.
Does anyone have an idea? In worst case is a js solution also fine for me.
https://stackblitz.com/edit/mix-blend-mode-text-color?file=styles.scss
I have not found a suitable answer using mix-blend-mode but, depending on your use case, you may be able to get the required effect using background clip and linear gradients as you will have absolute control over the colors.
This is a simple snippet which just does the styling for the text and background to give the idea:
button {
background-image: linear-gradient(-45deg, #f7ff14 0, #f7ff14 50%, black 50%, black 100%);
}
button span {
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(-45deg, black, black 50%, white 50%, white 100%);
color: transparent;
}
<button>
<span>Weiter</span>
</button>
I am using the answer from Fading out text at bottom of a section with transparent div, but height stays under section after overlaying div to achieve fading text at bottom
and a snippet of my code is below
<div className={styles.description}>
{description}
</div>
.description {
position: relative;
overflow: auto;
width: 640px;
height: 495px;
padding-right: 17px;
text-align: justify;
-webkit-mask-image: linear-gradient(to bottom, black 46%, transparent 100%);
mask-image: linear-gradient(to bottom, black 46%, transparent 100%);
}
and the effect is like this
however, the fading effect is fix, so when I scroll to the bottom, it still exist, therefore, some lines in the end of text would eventually unclear.
A simple way to solve this puzzle is add a extra transparent space in the end which large enough to expand the scrollbar, so that the text can get rid of fading out area. However, in my opinion, it seems not very elegant to me, so I wonder if there have methods can disable linear-gradient when scroll to the bottom.
Really appreciate your help, many thanks
I'm trying to make inline styles with a background that has a linear-gradient but the style is not being applied.
Here is my code:
<div className="card" style={{background:"linear-gradient(to bottom, Transparente 0%,Transparente 50%,red 50%,red 100%)"}}/>
When I add "simple" color for my background, meaning no linear-gradient, it works well.
<div className="card" style={{background:"red"}}/>
Thanks in advance.
I do not think you've written your code correctly. See examples of this site examples
<div className="card" style={{background: "linear-gradient(#e66465, #9198e5);" }}>sada</div>
use this code:
backgroundImage: "linear-gradient(to right, #4880EC, #019CAD)"
I had something like:
<div style={{background: `linear-gradient(190deg, #fa7c30 30%, rgba(0, 0, 0, 0)30%), url(${somePic});`}}/>
This was not working because of the ; at the end of the linear-gradient. I removed it and it worked.
Used like this with a variables
const color1 = "#343336";
const color2 = "#B408A4";
style={{background: `linear-gradient(to bottom, ${color1} 0%,${color2} 100%)`}}
for react version 17.0.2, i used bacgroundImage property to style div background as follows:
<div
style={{
backgroundImage: "linear-gradient(yellow,lightgreen)",
color: "darkred",
}}
>
Inline style in react background: linear-gradient
</div>
So, I came across your post because I was facing the same issue, but I've found a solution.
<button style={{ backgroundImage: `linear-gradient(to right, rgba(0, 224, 255, 1), rgba(0, 133, 255, 1))`, }} >
Note that I've used ` instead of ' which solved the issue, and tbh I have no idea why.
Iam a little bit late maybe, but I found a solution, what I did, I add it in css page, then inspect the element.
For example : for * background: linear-gradient(to right, #000 0%, #000 50%, #fff 50% #fff 100%)*; if you inspect it using inspect element, you will find : -webkit-gradient(linear, left top, right top, from(#000), color-stop(50%, #000), color-stop(50%, #fff)) .
So just add this last line in the inline style of your react compenent:
<div className="card" style={{background:"-webkit-gradient(linear, left top, right top, from(#000), color-stop(50%, #000), color-stop(50%, #fff))"}}/>
for my example, I used this one above instead of :
<div className="card" style={{background: linear-gradient(to right, #000 0%, #000 50%, #fff 50% #fff 100%)"}}/>
So in conclusion, add this to a css file, it will work, see the output in the "inspect element", and use it and edit it as you like in the inline style of your react js component.
Please use Below code for adding the gradient and change the value (for Safari and Chrome)
-webkit-gradient: (linear, left top, right top, from(rgba(0,0,0,0.5)), color-stop(50%, rgba(0,0,0,0.2)));
You misspelled transparent with Transparente. This works: linear-gradient(to bottom, transparent 0%,transparent 50%,red 50%,red 100%)
If you are trying to do it inline this worked for me.
<Button style={{ backgroundImage: 'linear-gradient(#f67a36,#ed008c)' }}/>
I believe for gradient backgrounds you must use the background-image property. So it should look something like this. You also have a typo with Transparent.
<div className="card" style="background-image:linear-gradient(to bottom, Transparent 0%,Transparent 50%,red 50%,red 100%)"></div>
I have a plunker to show my case - https://plnkr.co/edit/NUriO63pxAa0tUrMOuZa?p=preview
If you see the css code in it, i am using gradient linear to apply background color to div.
background: linear-gradient(90deg, red, green);
With this css, i am able to see gradual change of color from red to green. All i want is 50% of the div to have red color and 50% of the remaining div to have green color.
Can anyone help me how to get this one. ?
Silly me, here is a answer if it helps someone in the future
background: -webkit-linear-gradient(left, red 50%,green 51%, green 100%);
I need to blend the background colors of 2 elements using CSS
I have been fiddling around with the background-blend-mode:multiply but that works only when I have the 2 colors in the same element.
I need to achieve something like this -
I have been searching a lot but haven't been able to figure it out.
Most helpful resource I found was New blending features in CSS which shows how to do it using Canvas.
Is it possible to do the same thing using CSS?
EDIT
The circles above were just an example to show what I needed. As I mentioned, I was looking for blending colors for 2 different elements. I have created a fiddle for my actual shapes that I need to blend.
http://jsfiddle.net/fmgfsr4o/2/
You can combine CSS multiple background with radial-gradients to achieve this effect:
CSS
div {
/* adjust the width of the container to adjust circle's
overlap size and shape */
width: 80px;
height: 50px;
/* for debug purpose only */
border: solid blue 1px;
background:
/* draw the red circle */
radial-gradient(red 0%, red 70%, transparent 70%, transparent 100%) 0 0,
/* draw the green circle */
radial-gradient(green 0%, green 70%, transparent 70%, transparent 100%) 0 0;
/* the red on the left, the green on the right */
background-position: top left, top right;
/* you can make then bigger or smaller */
/* but you have to change width size above too */
background-size: 50px 50px;
/* You want both circles to appears once only */
background-repeat: no-repeat;
/* you can try with other values too */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode */
background-blend-mode: multiply;
}
HTML
<div></div>
I have done a JSFiddle for you to try: http://jsfiddle.net/pomeh/07nLpwwj/
This is the result I get using Firefox 31:
Even if the browser support seems "correct" (see here http://caniuse.com/#feat=css-backgroundblendmode), please note that the background-blend-mode property has the Candidate Recommendation status for now, so be careful when using it (thanks to #Paulie_D for pointing that out).
Try this pure CSS3, although you will need to figure out how to position the circles.
html {
height: 100%;
background:
repeating-radial-gradient(
circle,
transparent,
transparent 3.5em,
tomato 1em,
tomato 4.5em
),
repeating-radial-gradient(
circle,
transparent,
transparent 3.5em,
dodgerblue 3.5em,
dodgerblue 4.5em
);
background-blend-mode: multiply;
background-size: 10em 10em;
background-position:
0 0,
5em 5em,
10em 5em;
}
JSFiddle