Background-Image Gradient Not Animating - css

I am hoping someone can help clear this up.
I'm working on a search bar using HTML5 CSS3 here is the working example http://jsfiddle.net/4Mr6D/
text-decoration: none;
transition: all 400ms;
-webkit-transition: all 400ms;
-moz-transition: all 400ms;
-o-transition: all 400ms;
starting line 164 or where I commented 'SEARCH RESULTS'
I am trying to get the gradient background to animate on hover, it seems to only work animating back to the original color on rollout.
I've tried using background-image to animate, that doesn't work. I then turned to using the keyword 'all' and that isn't working.
So far, only the text color will animate. Can someone help me and locate what I'm doing wrong in getting the background gradient to animate also?

Edit: In the modern day web you can use CSS variables as a part of your gradient and animate them instead to do this sort of animation. The below still works if you need it (for browser support).
Background images are not animatable. Since gradients in CSS use background images, you cannot use a transition to a new one like you would text color.
With that being said, if you only have text in the drop downs, you can do a work around using a pseudo element and animating its opacity instead. The following is an example of how to do so:
.container:after {
content: "";
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #FF0000, #770000);
background-image: -moz-linear-gradient(top, #FF0000, #770000);
background-image: -ms-linear-gradient(top, #FF0000, #770000);
background-image: -o-linear-gradient(top, #FF0000, #770000);
background-image: linear-gradient(top, #FF0000, #770000);
position:absolute;
top:0;left:0;
opacity:0;
width:100%; height:100%;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
z-index: -1;
}
.container:hover { color:white; }
.container:hover:after { opacity:1; }
Demo
Also, I'd remove the 900ms delay that you have (I did in my demo). It is REALLY annoying for users, they want immediate feedback, not feedback a second later.
P.S. You should localize your code to the relevant parts like I did in order to get a quicker, better response. No one wants to look through 300 lines of code for a problem that only takes 20.
Special thanks to vals for improving it using z-index.

Sorry bud, but transitions on gradient images are not supported yet. Yeah I think thats crazy too.
But there is hope: Here's a work around in a fiddle. You can set the background of your search input to your primary color and transition it to the secondary color on hover. This way you get a color transition effect that looks like your gradient is transitioning.
Reduced example for clarity:
.search {
background: primary_color;
background-image: linear-gradient(top, primary_color, secondary_color);
transition: background 1s ease-out;
}
.search:hover {
background: secondary_color;
}

Related

How can I create a transparent background for discord with CSS?

I am at my first year programming and just learning Java this is why I am completly lost with CSS and need help.
I want to edit this code (not mine)
===== CUSTOMIZABLE COLORS =====
:root {
main-color: #057F95;
hover-color: #045B6B;
}
===== CUSTOMIZABLE IMAGES =====
IMPORTANT: EVERY URL MUST BE HTTPS:// IN ORDER TO WORK IN DISCORD
RECOMMENDATIONS: EVERY URL AT THE BOTTOM SHOULD BE THE SAME TO MAKE THE
tHEM MATCH. (YOUR CHOICE)
/*Change the url in .app to change the background behind chat */
.app { background-image: url("https://imgur.com/RG03PyX.png") !important;
background-size: cover !important; }
/*Change the url in .callout-backdrop to change the background when modal pop outs happen */
.callout-backdrop { background-color: black !important; background-image: url("https://imgur.com/RG03PyX.png") !important; -webkit-transition: 0.3s all ease; -o-transition: 0.3s all ease; -moz-transition: 0.3s all ease; transition: 0.3s all ease; background-size: cover !important; -webkit-filter: brightness(75%); }
/*Change the urls below to change the background of a profile modal pop up */
.user-popout:before {
background-image: url("https://imgur.com/RG03PyX.png") !important;
content: "";position: absolute;left: 0;top: 0;height: 100%;width: 100%;z-index: -1;background-position: 50% 50%;-webkit-filter: blur(3px);-webkit- transform: scale(1.05);transform: scale(1.05);}
#user-profile-modal .header:before {
background: -webkit-linear-gradient(top, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0.5)), url("https://imgur.com/RG03PyX.png") !important;
background: linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0.5)), url("https://imgur.com/RG03PyX.png") !important;
content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: -1;background-position: 50% 50%;background-size: cover !important;-webkit-filter: blur(3px);-webkit-transform: scale(1.1);transform: scale(1.1);}
I try diffrent things (color:transparent,transparency: true, rgba(0,0,0,0.1), visibility: hidden, opacity:0.5, make a transparent background and some other but none of them work.
I hope you can find a solution for my problem.
Sadly you can't.
This is because of the way Electron (the framework that Discord uses on desktop) works, the window you show content on needs to have a color. If you make it transparent, it will just fallback to white.
There are countermeasures for this, mainly shaders that copy what is behind the window and reflect it on it, but they use up a lot of computing (and they're also very overkill for one of your first programs).
Still, if anybody want to check it out:
electron-acrylic-window
window-vibrancy for Tauri (not Electron, won't work on Discord)
This is most definitely possible. Use BetterDiscord, then find someone elses theme that is modifiable and try to work from there. (https://imgur.com/a/Yp2mPQY here is a link as proof, of a transparent discord, over this post)
*I did not create this, here is the link to the exact theme https://betterdiscord.app/theme/Translucence . I wanted my own picture as the background so I went in and changed the url link for the image. However for a transparent background, there are probs other was to do this, but all i did was deleted characters from the img url, so it could not link to an image.
Uses no computing power at all, fast and easy, could probs setup in 5-10mins
ik super old post, but cause I saw a new response, that is not entirely correct, thought I would put this in here
color is the property for the text color in the element. background: transparent is the one you're looking for.
You would want to use background-color: rgba(255,0,0,0.3), if you wanted a transparent red, etc.

How can I remove a bootstrap buttons hover effect?

I've gotten an assignment to remove the hover effect of the following button:
Visit http://www.appsbayou.se, search for the text "Kontaktinformation". Above it there's a button, "Skicka" which has an ugly black hover effect. This style comes from existing css.
I'm using Chrome and even if I open up Devtools I can't nail down the style rule that does this effect.
How can I remove this black hover color or at least change it to a color of my choosing?
You will need to toggle the hover state inside the developer tools in order to view the CSS which is applied to the button on hover state. Adding this CSS to your stylesheet will fix the problem:
input[type=submit]:hover {
background-position: 0px;
}
You have these rules:
input[type=submit]:hover {
color: #fff;
background-color: #222; // Here is the black background-color
text-decoration: none;
background-position: 0 -15px; // moves the background
-webkit-transition: background-position .1s linear;
-moz-transition: background-position .1s linear;
-o-transition: background-position .1s linear;
transition: background-position .1s linear;
}
.wpcf7-submit:hover {
background-image: linear-gradient(to bottom,#fb8800,#975200) !important; // remove this?
}
Simply change the backgound-color to your choice of color. I would also suggest removing the gradient hover and the background positioning if you only wish to change a color. (And of course then the transitions doesn't make much sense either. )
Go into the HTML and you will see this line which is the button:
<input class="wpcf7-form-control wpcf7-submit" type="submit" value="Skicka">
Remove the wpcf7-submit to get rid of the orange. It changes the color of the button but it may be a solution.
Or go into the CSS file and change this attribute:
.wpcf7-submit {
background-image: linear-gradient(to bottom, #fb8800, #975200) !important;
}
The code for the orange is #fb8800
remove this from the page
.wpcf7-submit:hover{
background-image: linear-gradient(to bottom,#fb8800,#975200) !important;
}
or do a search for it... find it... then kill it!
In BS4 you also need to overwrite the button:before pseudo-selector to set opacity to zero, otherwise hover remains, so you will end up with something like:
button.greyed-out-disabled,
button.greyed-out-disabled:focus,
button.greyed-out-disabled:hover {
background-color: #E3E3E3 !important;
color: #9E9E9E !important;
outline: none;
}
button.greyed-out-disabled:before {
background: rgba(255,255,255,0) !important;
}

CSS background repeat-x spacing

Thanks for looking at my question! Hopefully somebody can help! :)
Basically I'm trying to use CSS3 (because I'm being lazy and can't be bothered to work it out in Javascript!) to animate a background on a button exactly like the "Buy Tickets Now" button about 800px down on the right on this website's homepage. http://festivalofeducation2013.org.uk/
I'm 90% sure you can do this, but if i'm being silly please just say!
Also, if any of you know and can tell me a simple way to do this with Javascript/jQuery then please feel free! I need to do this anyway possible!
Thanks again in advance.
Do you mean something like this?
http://jsfiddle.net/coma/BzXSf/1/
CSS
a.fancy {
...
background: #ccc url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3591/3591132.png?1367352237) 0 0;
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
-o-transition: background-position 1s;
-ms-transition: background-position 1s;
transition: background-position 1s;
}
a.fancy:hover {
background-position: 0 -100px;
}

Please help! CSS3 glowing transition problems

I am trying to follow this tutorial because I like the effect so much.
CSS Text Glow on Hover with Transition Effects
But the problem is, I set the background color to white.
<style>
.text-glow-hover-with-delay{
background: #FFFFFF;
color: #fff;
transition: text-shadow 3s;
-moz-transition: text-shadow 3s; /* Firefox 4 */
-webkit-transition: text-shadow 3s; /* Safari and Chrome */
-o-transition: text-shadow 3s; /* Opera */
}
.text-glow-hover-with-delay:hover{
text-shadow: 0 0 10px #fff;
}
</style>
<div class="text-glow-hover-with-delay">
Put your mouse over me and I will glow slowly.
</div>
and now it doesn't glow anymore. I'm noob on CSS here. :(
May be you are not able to see the shadow cause its white.
But, its working fine and smoothly. Just reduce the time, 3 seconds are too much.
Here is the working DEMO
OR, if you just want a white shadow See Here
I removed the transition CSS as it seemed to be messing it up and I changed the color tpo black:
http://jsfiddle.net/Ce5SB/
For css transitions you must go from point A to point B.
This means that point A should have a default text-shadow on your default class.
.text-glow-hover-with-delay{
text-shadow:0 0 0 #fff;/*This is the missing piece*/
....
}
With the above missing piece, point B will know where to transition from.
also let me know if the above doesn't work. You may also want to try the transition as
transition:all 300ms ease;/*just in case each browser wants to capture its browser specific text shadow property*/

-webkit-transform how can I change rotate() while preserving translate3d()?

What I am looking to do is change the translate3d transform of an element while a css3 animation is running on the element. When I try to do this, however, it seems that the animation resets the transform every time right before updating the animation such that the translation is always (0,0,0). I wish to have the animation running and still be able to translate it with javascript such as:
element.style.webkitTransform='translate3d(100px, 30px, 0px)';
I know it would be possible by using a second containing div to set the translation on while the inner div runs the animation, but I would like to be able to just use one div if possible. Do you know how to achieve this?
This is my css as it stands:
.class{
width:32px;
height:32px;
position:absolute;
background: transparent url('./img/sprite.png');
background-size:100%;
-webkit-transform: translate3d(48px, 176px, 0px);
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 100ms;
-webkit-animation:spin .75s infinite linear;
}
#-webkit-keyframes spin {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
You can concatenate several transformation functions with a space:
-webkit-transform: translate3d(48px, 176px, 0px) rotateY(30deg) rotateX(10deg);

Resources