Setting a CSS gradient in javascript? - javascript

so I've been trying to set a gradient with javascript so that it has a mouse over effect, but I've had no luck and cannot get it to work, here is my javascript.
function mouseOVER(x)
{
x.backgroundImage="-webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #FFFFFF));";
}
function mouseOFF(x)
{
x.backgroundImage="-webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #BABABA));";
}​
I've been using jsFiddle to test things, so here is mine for this.

Try somethink like this, with CSS only
CSS
#home{
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #BABABA));
width:100px;
height:45px;
text-align:center;
border-radius:10px;
position:relative;
top:15px;
left:15px;
}
#home:hover{
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #FFFFFF));
}
#homenav{
font-family:Arial, Helvetica, sans-serif;
text-decoration: none;
color:#000000;
position:relative;
top:12.5px;
}
DEMO http://jsfiddle.net/enve/ZauwA/11/
To change your text on mouseover use this code
HTML
<nav>
<div id="home">
HOME
</div>
</nav>​
<script>
function changeText()
{
document.getElementById("homenav").innerHTML='Welcome'
}
function returnText()
{
document.getElementById("homenav").innerHTML='Home'
}
</script>
FULL DEMO http://jsfiddle.net/enve/ZauwA/19/

With jQuery this works:
$('#block').css({
background: "-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000))"
});
You also need to apply the styles for other non-webkit browsers.
Dont know why youre Fiddle doesnt work. The Console tells me that youre functions are not defined.
Why are you trying to do this? If not necessary i would definteley suggest the CSS-way mentioned above.

No need to use jQuery, vanilla JS is fine. You're simply missing a correct style property reference:
x.backgroundImage='...'; //no such property
x.style.backgroundImage='...'; //works correctly
Working sample (requires a webkit browser obviously)
That being said, you should really use pure CSS and rely on :hover dynamic pseudo-class:
#home {/*gradient 1*/}
#home:hover {/*gradient 2*/}

Would you be open for a pure CSS solution?
if so, add this:
#homenav:hover{
-webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #FFFFFF));
}
​

Related

How to disable linear-gradient when scroll to the bottom

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

Inline style in react background: linear-gradient

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>

Animate multiple background image in one div

I need a smart/tough guy to help me with my issue right now.. please check div that set css multiple background image ... in that image I set the background of a div in a gradient color while I called other background images that looks polygonal, and the css is something like this:
.at{
height: 650px;
padding-top: 130px;
background-image: url(../../../img/2nd_element.png),
url(../../../img/1st_element.png),
url(../../../img/3rd_element.png),
url(../../../img/4th_element.png),
linear-gradient(to bottom, #017a92 0%,#91d2c1 100%);
background-position: 3em 60px, left bottom, 70% -90px, right top, left bottom;
background-repeat: no-repeat, no-repeat, no-repeat;
}
I needed to animate these different background images with offset(and it depends on the scrolling page that if this content is centered).
for example: bg-image1 = will appear after 3s, bg-image2 = will appear after 4s, bg-image3 = will appear after 5s.. then etc etc... until the polygonal background images completed.
I'm not sure if this can be done by jQuery or javascript or css3 animation or svg animation but I think you get my point sir! thanks for helping! looking forward to donate who can help me with this! thank you!

Strange gradient behaviour in css with angularjs [duplicate]

This question already has answers here:
CSS3 gradient background set on body doesn't stretch but instead repeats?
(13 answers)
Closed 6 years ago.
Here is the css that i am using
html .body-dark{
background: #242A3F;
background: -webkit-linear-gradient(left top, #242A3F, #333C55);
background: -o-linear-gradient(bottom right, #242A3F, #333C55);
background: -moz-linear-gradient(bottom right, #242A3F, #333C55);
background: linear-gradient(to bottom right, #242A3F, #333C55);
background: -moz-linear-gradient(-90deg, red, yellow);
}
And the jade related
doctype
html.no-js
head
meta(charset='utf-8')
meta(http-equiv='X-UA-Compatible', content='IE=edge')
base(href='/')
title Travel
meta(name='description', content='')
meta(name='viewport', content='width=device-width, initial-scale=1')
link(rel='stylesheet',href='main.css',async)
body.body-dark(ng-app='application')
div(ng-view)
<!-- build:js inline app.min.js -->
script(src='app.min.js')
<!-- /build -->
script(src='//localhost:35729/livereload.js')
So as you can see the gradient class is attached to the body and i assume that there should be only one gradient. But on the other hand here is the output i am getting
Another important information might be that the page is made of two components, the nav template and form template both of which are called using ng-include Although i am not sure if the error is because of that.
Also here is a copy of DOM from browser
As you can see the body is only till the form ends, how can i extend it out to whole page. Also why are there two gradient elements under that ?
Set
html, body, .body-dark{
background: #242A3F;
background: -webkit-linear-gradient(left top, #242A3F, #333C55);
background: -o-linear-gradient(bottom right, #242A3F, #333C55);
background: -moz-linear-gradient(bottom right, #242A3F, #333C55);
background: linear-gradient(to bottom right, #242A3F, #333C55);
background: -moz-linear-gradient(-90deg, red, yellow);
height: 100%;
}

Can you create gradients that fade to opacity using CSS or JavaScript?

WebKit has introduced the ability to create CSS gradients. For example, with the following code:
-webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
However, is it possible to have an opacity gradient using CSS? I want the gradient to be a single color on one side, and fade to zero opacity on the other.
Cross-browser compatibility isn't important; I just need it to work in Google Chrome.
Is there some way to do this using CSS? If not, can something similar be done using JavaScript (not jQuery)?
Thanks for your help.
Yes
for the colors, use rgba(x, y, z, o) where o is the opacity
should work
e.g.
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0)));
Edit:
For the final value (opacity) 1 is opaque & 0 is transparent
Yup, rgba(red, green, blue, alpha) is what you should use http://www.w3.org/TR/css3-color/#rgba-color, example (Try it out on jsFiddle):
/* Webkit */
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(1, rgba(0,0,0,0.0)), /* Top */
color-stop(0, rgba(0,0,0,1.0)) /* Bottom */
);
/* Gecko */
background: -moz-linear-gradient(
center bottom,
rgba(0,0,0,1.0) 0%, /* Bottom */
rgba(0,0,0,0.0) 100% /* Top */
);
not tested, but this should work (in FF this works (with a different syntax) - i'm not sure if safari/webkit knows rgba):
-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(0,0,0,0)));

Categories

Resources