I'm trying to use transition in my SCSS file but it doesn't seem to work. I know that gradient is sometimes not supported, so I make "bg-gradienter" to create a background and hope to use it for the transition. However, this code still doesn't work. I also add width: 50%; as a debugger; the transition works well on width.
&::after {
#include bg-gradienter (( to bottom left, rgba(6, 55, 105, 0.25) 25%, rgba(8, 57, 106, 1) 100%));
top: 0;
left: 0;
width: 100%;
height: 100%;
content:"";
position: absolute;
transition: all 2s ease-in-out;
}
&:hover:after {
width: 50%;
#include bg-gradienter (( to bottom left, rgba(6, 55, 105, 0.75) 25%, rgba(8, 57, 106, 1) 100%));
transition: all 2s ease-in-out;
}
Here is my bg-gradienter:
#mixin bg-gradienter($args) {
background: -moz-linear-gradient($args), no-repeat;
background: -webkit-linear-gradient($args), no-repeat;
background: -o-linear-gradient($args), no-repeat;
background: -ms-linear-gradient($args), no-repeat;
background: linear-gradient($args), no-repeat;
}
Any ideas? Thanks a lot!
Change $args to $args... which will allow you to include commas in your argument to bg-gradienter:
#mixin bg-gradienter($args...) {
background: -moz-linear-gradient($args), no-repeat;
background: -webkit-linear-gradient($args), no-repeat;
background: -o-linear-gradient($args), no-repeat;
background: -ms-linear-gradient($args), no-repeat;
background: linear-gradient($args), no-repeat;
}
and remove the extra parentheses around your arguments in the #include
Related
Anyhow know how I can go about creating a background animation like this with CSS?
You can create two absolute html elements and align them left and right accordingly. Then you can apply CSS radial gradient on these elements for example: background: radial-gradient(45% 45% at 50% 50%, rgba(77, 230, 219, 0.2) 0%, rgba(77, 230, 219, 0) 100%); Otherwise, you can use pseudo-elements (:after, :before) instead of HTML tags.
Here is a quick sketch of what you can do:
.hero {
height: 100vh;
width: 100vw;
background-color: #000;
position: relative;
}
.hero:after,
.hero:before {
content: '';
background: radial-gradient(45% 45% at 50% 50%, rgba(77, 230, 219, 0.2) 0%, rgba(77, 230, 219, 0) 100%);
display: block;
position: absolute;
}
.hero:before {
left: -100px;
bottom: 0;
width: 300px;
height: 300px;
}
.hero:after{
right: -100px;
top: 0;
width: 300px;
height: 300px;
}
<div class="hero"></div>
To make life easier, you can use CSS Gradient Generators, such as: https://cssgradient.io/
Essentially, I want to create an element that combines a "to right" gradient with a color stop at a certain percentage and another color stop for the remaining width with a "to bottom" gradient that fades both colors to transparent. Getting the color stop part is easy, getting the fade is easy; I just can't figure out how to get both.
/*I can get this:*/
div {
width: 500px;
height: 100px;
}
.color-change {
background: linear-gradient(to right, rgb(255, 175,157) 80%, rgb(255, 95, 89) 80%);
}
/*or this:*/
.fade {
background:linear-gradient(to bottom, rgba(252, 193, 176, 0), #fcc1b0);
/* but not both*/
<div class="color-change"></div>
<div class="fade"></div>
This probably isn't hard but I can't find any examples that do exactly this. I could just use a png., but it seems as though this ought to be doable in CSS. Thanks for any suggestions (or better, solutions).
Use CSS ::before (:before)
In CSS, ::before creates a pseudo-element that is the first child of
the selected element. It is often used to add cosmetic content to an
element with the content property. It is inline by default. https://developer.mozilla.org
div {
width: 500px;
height: 100px;
}
.fade {
background: linear-gradient(to bottom, rgba(252, 193, 176, 0), #fcc1b0);
position: relative;
}
.fade::before {
display: inline-block;
content: "";
height: 100%;
width: 20%;
background: black;
position: absolute;
right: 0;
background: linear-gradient(0deg, rgba(246,115,115,1) 4%, rgba(250,192,194,1) 34%, rgba(255,233,234,1) 66%, rgba(255,255,255,1) 100%);
}
<div class="fade"></div>
Multiple background layer can do it:
.color-change {
--p:80%; /* this is your percentage */
background:
linear-gradient(to bottom, transparent, #fcc1b0) left,
linear-gradient(to bottom, transparent, rgb(255, 95, 89)) right;
background-repeat:no-repeat;
background-size:var(--p) 100%,calc(100% - var(--p)) 100%;
width: 500px;
height: 100px;
margin:10px;
}
<div class="color-change"></div>
<div class="color-change" style="--p:50%"></div>
<div class="color-change" style="--p:20%"></div>
Or you can mask it with a pseudo element. This is real transparent.
body {
background: dodgerblue;
}
div {
width: 500px;
height: 100px;
}
.color-change {
-webkit-mask: linear-gradient(to bottom, transparent, #000);
mask: linear-gradient(to bottom, transparent, #000);
position: relative;
}
.color-change:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgb(255, 175, 157) 80%, rgb(255, 95, 89) 80%);
}
<div class="color-change"></div>
I'm trying to create a repeated background existing out of two parts. Each part is a gradient and while the one moves up, the other moves down.
The best I got is this:
html {
background: black;
color: #4c4c4c;
}
body {
margin: 30vh auto;
max-width: 80vw;
}
.wave {
background: none;
height: 1rem;
width: 50%;
position: absolute;
z-index: 2;
animation: move 700ms 0ms steps(2) infinite both;
}
.color::after,
.color::before {
content: "";
position: absolute;
left: 0;
right: 0;
height: 100%;
top: 0;
}
.color {
background-image: linear-gradient(#fe0000 50%, #6531ff 0 100%);
}
.color::after {
background: linear-gradient(to bottom, #f4e04d, #3bceac 20%, rgba(22, 22, 22, 0) 100%), linear-gradient(to right, #042a2b 3rem, transparent 3rem, transparent 6rem);
}
.wave,
.color::after,
.color::before {
background-size: 5rem 1rem;
background-repeat: repeat-x;
}
#keyframes move {
0% {
margin-top: -3rem;
}
100% {
margin-top: -3.25rem;
}
}
<div class="color wave"></div>
I get why this doesn't work, but not sure how to proceed.
Since it is difficult to describe, here is an image of what I'm looking for:
At first (position 1), all odd blocks are higher than the even blocks. After the first animation, it's the other way around (position 2) and so on.
Maybe like below:
.box {
height:100px;
background:linear-gradient(red,blue,yellow,red) 0 0/100% 200%;
animation:y 2s linear infinite;
}
.box::after {
content:"";
display:block;
height:100%;
background:linear-gradient(green,lightblue,pink,green) 0 0/100% 200%;
animation:inherit;
animation-direction: reverse;
-webkit-mask:linear-gradient(90deg,#fff 50%,transparent 0) 0 0/20% 100%;
}
#keyframes y {
to {
background-position:0 -200%;
}
}
<div class="box"></div>
UPDATE: This is an interesting problem. I'm surprised to find that I don't have an obvious or particularly elegant solution to having a gradient running vertically while repeating with horizontal gaps.
Far more elusive than I initially expected.
Best I could come up with is to put one of the gradients in a pseudo element and apply a mask-image. This won't work in IE, but it appears to be supported everywhere else.
See updated demo below.
If I understand what you're trying to do, I think you could accomplish it by animating the background positions:
.demo {
height: 200px;
background-image:
linear-gradient(#f4e04d, #3bceac 20%, rgba(22, 22, 22, 0) 100%);
animation: move 0.7s infinite alternate;
background-size: 3rem;
position: relative;
}
.demo::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(#042a2b, transparent);
/* This is the magic part: using a horizontal repeating-linear-gradient
to mask out "columns", allowing the container's background gradient to
show through */
-webkit-mask-image: repeating-linear-gradient(to right, black 0 3rem, transparent 3rem 6rem);
background-size: 3rem;
/* run the same animation in reverse to animate up instead of down */
animation: move 0.7s infinite alternate-reverse;
}
#keyframes move {
from {
background-position: 0 0;
}
to {
background-position:
0 200px;
}
}
<div class="demo"></div>
It's difficult to infer exactly what you're trying to do, but here's another sample (very similar to #ray hatfield's answer) that will move the first background down while the second background moves up:
.sample {
width: 250px;
height: 50px;
position: relative;
background-image: linear-gradient(to bottom, #f4e04d, #3bceac 20%, rgba(22, 22, 22, 0) 100%), linear-gradient(to right, #042a2b 3rem, transparent 3rem, transparent 6rem);
animation: move 1s infinite linear;
}
#keyframes move {
0%, 100% {
background-position: 0 -75px, 0 0;
}
50% {
background-position: 0 0, 0 -75px;
}
}
<div class="sample"></div>
I want to css code with gradient top transparent color. can you please check below is it correct.?
background-color: transparent;
background-image: linear-gradient(to top, #f2f2f2, rgba(242, 242, 242, 0));
bottom: 0;
content: " ";
display: block;
height: 150px;
position: absolute;
width: 100%;
z-index: 8;
I suggest you to use just background property for your purpose if i undetstood it correctly.
.example {
background: linear-gradient(to top, #f2f2f2, rgba(242, 242, 242, 0));
}
Cause you use second color with opacity: 0 (last parameter in the rgba function) you'll have gradient effect to transparent.
The following snippet perfectly works on Chrome: the background image fades into to the background behind towards the bottom.
div {
width: 200px;
height: 200px;
background-image: url("http://i.imgur.com/wcDxIZG.jpg");
background-size: cover;
background-position: center center;
-webkit-mask-image: linear-gradient(black, black, transparent);
mask-image: linear-gradient(black, black, transparent);
}
<div></div>
But it doesn't work on Firefox, the value is said to be incorrect.
Why ? And how can I fix that ?
Note that I know how to use another div as overlay, which isn't a general solution to me as it has too many consequences on content and element position. The only answers I'm interested in are the ones which fix the background of the div.
I don't know why, but you can replicate the effect by using the :after property for this, and this works for all browsers - even our old friend IE:
.container {
height: 200px;
overflow: hidden;
position: relative;
}
.image {
width: 200px;
height: 200px;
background-image: url("http://i.imgur.com/wcDxIZG.jpg");
background-size: cover;
background-position: center center;
}
.image:after {
content: '';
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FAFAFA', endColorstr='#FAFAFA');
background-image: -webkit-linear-gradient(top, rgba(248, 244, 243, 0) 0%, #fafafa 100%);
background-image: -ms-linear-gradient(top, rgba(248, 244, 243, 0) 0%, #fafafa 100%);
background-image: linear-gradient(to bottom, rgba(2248, 244, 243, 0) 0%, #fafafa 100%);
display: block;
position: absolute;
pointer-event: none;
bottom: 0;
left: 0;
width: 200px;
height: 20%;
}
<div class="container">
<div class="image"></div>
</div>
Starting from Firefox 53 (released April 19, 2017) , this is now possible as the support of masking images has been completed.
See http://caniuse.com/#search=mask