The following HTML tag is rendering as expected statically.
style='background: linear-gradient(to right, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 30%, rgba(255,255,255,1)), url(<%= image_path "/bg/#{#this_area.id}.svg" %>);'>
However, as this is being dynamically managed by a variable, and the goal is to add
#keyframes moveBg {
to {
background-position: 100% 0;
}
}
I was attempting to do the following
<div class='bg_x' style='background: url(<%= image_path "/bg/#{#this_area.id}.svg" %>);'>
and define the class
.bg_x {
background: linear-gradient(to right, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 30%, rgba(255,255,255,1))
animation: moveBg 20s linear infinite;
}
However using a class plus an inline definition fails to integrate the gradient with the background image (even before adding the animation). So the inline is overriding the class, even though the instructions are complimentary.
As the CSS file cannot take variables, can this desired effect be achieved partially not inline?
Because of the Cascading in CSS the inline indeed overrules the class. Never the less. linear gradients are a part of the background-image property (shorthand background if you want to combine multiple styles, just like margin-left and margin). Normally you can separate the background-color and background-image or other elements, but with linear-gradient() that isn't possible because they both use background-image property too bad.
In the example below you can find two solution that I found. Hopefully this helps you progress this issue.
/* ClassBased */
.bg_classBased {
position: relative;
}
.bg_classBased:before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: linear-gradient(to right, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 30%, rgba(255,255,255,1));
width: 100%;
height: 100%;
}
/* Animation */
.bg_x {
animation: moveBg 20s linear infinite;
}
#keyframes moveBg {
to {
background-position: 100% 0;
}
}
/* misc styling */
div {
padding: 40px;
}
<h1>Inline based</h1>
<div class="bg_x" style='background: linear-gradient(to right, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 30%, rgba(255,255,255,1)), url("https://placehold.it/100x100");'></div>
<h1>Classbased</h1>
<div class="bg_x bg_classBased" style='background: url("https://placehold.it/100x100");'></div>
Related
Is it possible to create a fade-in fade-out effect in pure css, each running from left to right (cf. gif)?
I implemented the fade-in hover effect with the following code:
input[type='submit'] {
background: linear-gradient(to left, var(--btn-prim-bg-color) 50%, var(--color-primary) 50%) right;
background-size: 200%;
transition: .5s;
color: white;
text-transform: uppercase;
border: none;
}
input[type="submit"]:hover {
background-position: left;
color: var(--color-text);
}
But I have problems with the fade-out on mouse leave, it runs from right to left afterwards. but it should run from left to right again (cf. gif)
We can take advantage of the fact that some properties can be transitioned and others can happen instantly.
In this snippet the background-color of the input is changed instantly on hover, its background image which consists of a blue part and a yellow part initially is changed to a transparent part and a yellow part on hover.
The only property that is transitioned is the background sizes of the two linear gradients.
input {
background-color: yellow;
background-image: linear-gradient(cornflowerblue, cornflowerblue), linear-gradient(yellow, yellow);
background-size: 100% 100%, 0% 100%;
background-position: left top, left top;
background-repeat: no-repeat;
transition: background-size 5s linear;
border: none;
}
input:hover {
background-color: cornflowerblue;
background-image: linear-gradient(transparent, transparent), linear-gradient(yellow, yellow);
background-size: 0% 100%, 100% 100%;
}
<input>
I have an animated gradient background, and I want to override the original color by applying an other class. When I apply this new class, the animation stops.
See the code below and try to add the oc class to the div to reproduce.
.background {
background: linear-gradient(
to right,
#eee9e5 20%,
red 50%,
#eee9e5 80%
);
background-size: 400% 400%;
height: 16px;
margin: 16px 0;
}
.oc {
background: linear-gradient(
to right,
#eee9e5 20%,
blue 50%,
#eee9e5 80%
) !important;
}
.animated {
animation: move 4s ease-in infinite;
}
#keyframes move {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
<div class="background animated" />
You can also see the code at https://codepen.io/Taskim/pen/KegLmJ.
Do you know any workaround to achieve that?
The problem is with the use of the !important on the background rule.
The background is a short-hand property that alters all the background-* properties.
So when you set background: linear-gradient(...)!important you override the background-position as well and setting it to default values that cannot be animated since they are more important.
Use background-image: linear-gradient(...) and it should work.
document.querySelector('button').addEventListener('click', function() {
document.querySelector('.animated').classList.toggle('oc');
})
.background {
background: linear-gradient( to right, #eee9e5 20%, red 50%, #eee9e5 80%);
background-size: 400% 400%;
height: 16px;
margin: 16px 0;
}
.oc {
background-image: linear-gradient( to right, #eee9e5 20%, blue 50%, #eee9e5 80%);
}
.animated {
animation: move 4s ease-in infinite;
}
#keyframes move {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
<div class="background animated"></div>
<button>toggle gradient</button>
Also keep in mind that you cannot self-close a div (unless that is not real html but some template from a framework)
my page has three background colors that change depending on what a div displays (just a word actually).
The colors do change right now, but the transition is not smooth as expected. Colors just change brutally, without a transition operating.
Here is my CSS :
.gradient-low{
background: #ddd6f3;
background: -webkit-linear-gradient(to left, #faaca8 , #ddd6f3);
background: linear-gradient(to left, #faaca8 , #ddd6f3);
transition-duration: 0.4s;
}
.gradient-moderate{
background: #ff6e7f;
background: -webkit-linear-gradient(to left, #ff6e7f , #bfe9ff);
background: linear-gradient(to left, #ff6e7f , #bfe9ff);
transition-duration: 0.4s;
}
.gradient-high{
background: #EECDA3;
background: -webkit-linear-gradient(to left, #EF629F , #EECDA3);
background: linear-gradient(to left, #EF629F , #EECDA3);
transition-duration: 0.4s;
}
Do you have any suggestions so the change of colour is operated gradually and smoothly ?
Using transition it is not possible, but we can use CSS animation and keyframe animation. Try this :
.gradient-high{
background: #EECDA3;
background: -webkit-linear-gradient(to left, #EF629F , #EECDA3);
background: linear-gradient(to left, #EF629F , #EECDA3);
animation-name: drop;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 5s;
}
#keyframes drop {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(50);
}
}
Please check out the FIDDLE
Unfortunately you can't transition CSS gradients at present. You can, however, work around this to achieve a similar effect.
The CSS below moves the gradients to ::before pseudo-classes. Because these gradients are now from transparent to the secondary colour, the solid colour background transition on the classes themselves is visible in the background.
.gradient-low {
background: #ddd6f3;
transition: background 0.4s;
}
.gradient-low::before {
height: 100%;
width: 100%;
content: '';
position: absolute;
left: 0px;
top: 0px;
background: linear-gradient(to left, #faaca8 , rgba(0,0,0,0));
}
Full fiddle here:
https://jsfiddle.net/mstringfellow/zftzrobv/
I am having an issue where I am unable to get the level of specificity I need to make some code work. I have a <ul> for which I want to make the backgrounds of the <li>'s change when hovered on with a fancy little slide-in animation.
I managed to get it working pretty well using a linear-gradient with a transition on :hover. I decided that I wanted to have the different list items have different background colors than each other, so I added three classes: .red, .blue, and .gold, and I figured I would just make everything with the .level1 class have the required properties other than the linear gradient itself—namely, background-size: 200% 100%, background-position:right bottom, and transition:all 1s ease, and then specify the linear gradient and color for each individual color class. I know this is all pretty intangible, but I will post my code below.
Here is what I was hoping to have (or something like it):
body .push [class^="level1"] {
background-size: 200% 100%;
background-position:right bottom;
transition:all 1s ease;
}
body .push [class^="level1"]:hover {
background-position:left bottom;
}
body .push .level1.blue {
background: linear-gradient(to right, #282e59 50%, rgba(0,0,0,0) 50%);
}
body .push .level1.red {
background: linear-gradient(to right, #94272a 50%, rgba(0,0,0,0) 50%);
}
body .push .level1.gold {
background: linear-gradient(to right, #e5d037 50%, rgba(0,0,0,0) 50%);
}
But that doesn't work. For the values in the first class to take effect, I have to get rid of the first one body .push [class^="level1"] { ... } and put that information in the three color-specific ones, like
body .push .level1.blue {
background: linear-gradient(to right, #282e59 50%, rgba(0,0,0,0) 50%);
background-size: 200% 100%;
background-position:right bottom;
transition:all 1s ease;
}
body .push .level1.red {
background: linear-gradient(to right, #94272a 50%, rgba(0,0,0,0) 50%);
background-size: 200% 100%;
background-position:right bottom;
transition:all 1s ease;
}
body .push .level1.gold {
background: linear-gradient(to right, #e5d037 50%, rgba(0,0,0,0) 50%);
background-size: 200% 100%;
background-position:right bottom;
transition:all 1s ease;
}
Is there any way to consolidate that information?
It seems the problem is not specificity, but that your shorthand background: declaration is overwriting the position & size values in your original declaration. Try changing background: to background-image: in your overwrites:
body .push .level1.blue {
background-image: linear-gradient(to right, #282e59 50%, rgba(0,0,0,0) 50%);
}
body .push .level1.red {
background-image: linear-gradient(to right, #94272a 50%, rgba(0,0,0,0) 50%);
}
body .push .level1.gold {
background-image: linear-gradient(to right, #e5d037 50%, rgba(0,0,0,0) 50%);
}
I am guessing you have html like:
...
<li class="level1">...</li>
<li class="level1 red">...</li>
<li class="level1 gold">...</li>
<li class="level1 blue">...</li>
In that case you can change your code to
.push .level1 {
background-size: 200% 100%;
background-position:right bottom;
transition:all 1s ease;
}
.push .level1:hover {
background-position:left bottom;
}
.push .blue {
background-image: linear-gradient(to right, #282e59 50%, rgba(0,0,0,0) 50%);
}
.push .red {
background-image: linear-gradient(to right, #94272a 50%, rgba(0,0,0,0) 50%);
}
.push .gold {
background-image: linear-gradient(to right, #e5d037 50%, rgba(0,0,0,0) 50%);
}
Is it possible to make a transition from a div without background to a div with gradient background?
div { background-color:none;}
div:hover {
background:#D74413; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D74413), to(#8A2D0D));
background: -webkit-linear-gradient(top, #D74413, #8A2D0D); background: -moz-linear-gradient(top, #D74413, #8A2D0D);
background: -ms-linear-gradient(top, #D74413, #8A2D0D); background: -o-linear-gradient(top, #D74413, #8A2D0D);
}
Animating gradients is not simple and involves playing with background-size and -position of the gradients. Shown here for example:
http://www.impressivewebs.com/animating-css3-gradients/
An easy workaround that works for me is to put the gradient on a child of the div and animate it's opacity like here:
http://jsfiddle.net/willemvb/rWpZN/
HTML:
<div id="container">
<div id="back"></div>
</div>
CSS (for webkit, but would work for other modern browsers too if you add the variants)
#container {
position: relative;
width: 500px; height: 500px;
background: transparent;
}
#back {
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
opacity: 0;
background: -webkit-linear-gradient(top, #ccc, #999);
z-index: -1;
-webkit-transition: opacity 3s ease-out;
}
#container:hover #back {
opacity: 1;
}
Use this site:
Ultimate CSS Gradient Generator