Related
I am trying to make a rainbow gradient ::selection, I have tried this:
::selection {
background: linear-gradient(
90deg,
rgba(255, 0, 0, 1) 0%,
rgba(255, 154, 0, 1) 10%,
rgba(208, 222, 33, 1) 20%,
rgba(79, 220, 74, 1) 30%,
rgba(63, 218, 216, 1) 40%,
rgba(47, 201, 226, 1) 50%,
rgba(28, 127, 238, 1) 60%,
rgba(95, 21, 242, 1) 70%,
rgba(186, 12, 248, 1) 80%,
rgba(251, 7, 217, 1) 90%,
rgba(255, 0, 0, 1) 100%
);
color: white;
}
but it just appears as if I did this:
::selection {
background: white;
color: white;
}
Is it possible to have a rainbow gradient? Preferably with no JavaScript? I have looked all over, but none of them look good, and all of them use JavaScript.
Can't be done using a gradient on ::selection, because background-image isn't supported. According to MDN:
Only certain CSS properties can be used with ::selection:
color
background-color
text-decoration and its associated properties
text-shadow
stroke-color, fill-color and stroke-width
In particular, background-image is ignored.
I'm attempting to show a white gradient overlay from just the left side. A liner gradient, from left to right. Where only the left side is white and the right side is transparent. Is this possible with css?
try this
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
doing this, you are setting white-transparent gradient color in your page from left to right
You can try something like this one.
background: rgba(255, 255, 255, 1);
background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 50%, rgba(246, 246, 246, 0.9) 72%, rgba(237, 237, 237, 0.78) 100%);
background: -webkit-gradient(left top, right top, color-stop(50%, rgba(255, 255, 255, 1)), color-stop(72%, rgba(246, 246, 246, 0.9)), color-stop(100%, rgba(237, 237, 237, 0.78)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 50%, rgba(246, 246, 246, 0.9) 72%, rgba(237, 237, 237, 0.78) 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 50%, rgba(246, 246, 246, 0.9) 72%, rgba(237, 237, 237, 0.78) 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 50%, rgba(246, 246, 246, 0.9) 72%, rgba(237, 237, 237, 0.78) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 1) 50%, rgba(246, 246, 246, 0.9) 72%, rgba(237, 237, 237, 0.78) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=1);
It is possible in CSS, see this code snippet for example :
body {
background-color: #9999ff;
}
.bg-demo {
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}
<div class="bg-demo">
<p>Don't mind me I'm just a very long text, like veeeery long ! I know I'm long right ? I know y'all know better my cousin Lorem Ipsum but hey ! Is he that long ? I don't think so ! Like I said, I am so long you probably won't ever find something as long as me.</p>
<p>So anyways what is like being long ? It is much like being tall except on a much different axis. Also instead of growing up I am basically "longging left", right ? Just in case that wasn't obvious, I just did a joke, a short one. Yeah sure, that is quite interesting to have a short joke for a text as long as me</p>
</div
My whole body has a blue background but my .bg-demo div has a linear-gradient starting from the left and going from white to transparent.
How do I achieve a texture like this using CSS3 gradients?
The first background is easy using repeating-linear-gradient:
body {
height:100vh;
width:100vw;
background:repeating-linear-gradient(
to bottom,
#58D68D 0,
#58D68D 30px,
#2ECC71 30px,
#2ECC71 60px
);
}
The second background is much more complicated and should not be a CSS solution. I recommend to use a background-image instead!
It is not impossible to solve it with CSS (using perspective):
body {
transform: perspective(100em) rotateX(50deg) scale(2);
overflow:hidden;
}
div {
height:100vh;
width:100vw;
background:repeating-linear-gradient(
to bottom,
rgba(46, 204, 113, 0.5) 0,
rgba(46, 204, 113, 0.5) 30px,
rgba(88, 214, 141, 0.5) 30px,
rgba(88, 214, 141, 0.5) 60px
), repeating-linear-gradient(
to right,
rgba(46, 204, 113, 0.5) 0,
rgba(46, 204, 113, 0.5) 30px,
rgba(88, 214, 141, 0.5) 30px,
rgba(88, 214, 141, 0.5) 60px
);
}
<div></div>
I am using the following to create a 100% width multi-colored bar which runs across the page.
In Firefox its ok but all other browsers it's empty, no colors.
Here's the CSS:
.colorBar {
position: relative;
height: 0.5em;
background: -moz-linear-gradient(left center ,
rgb(231, 82, 57) 0%,
rgb(231, 82, 57) 12.5%,
rgb(255, 150, 28) 12.5%,
rgb(255, 150, 28) 25%,
rgb(255, 204, 39) 25%,
rgb(255, 204, 39) 37.5%,
rgb(252, 230, 47) 37.5%,
rgb(252, 230, 47) 50%,
rgb(205, 227, 91) 50%,
rgb(205, 227, 91) 62.5%,
rgb(130, 204, 51) 62.5%,
rgb(130, 204, 51) 75%,
rgb(65, 190, 206) 75%,
rgb(65, 190, 206) 87.5%,
rgb(4, 156, 219) 87.5%,
rgb(4, 156, 219) 100%)
repeat scroll 50% 0px transparent;
background: -webkit-linear-gradient(left center ,
rgb(231, 82, 57) 0%,
rgb(231, 82, 57) 12.5%,
rgb(255, 150, 28) 12.5%,
rgb(255, 150, 28) 25%,
rgb(255, 204, 39) 25%,
rgb(255, 204, 39) 37.5%,
rgb(252, 230, 47) 37.5%,
rgb(252, 230, 47) 50%,
rgb(205, 227, 91) 50%,
rgb(205, 227, 91) 62.5%,
rgb(130, 204, 51) 62.5%,
rgb(130, 204, 51) 75%,
rgb(65, 190, 206) 75%,
rgb(65, 190, 206) 87.5%,
rgb(4, 156, 219) 87.5%,
rgb(4, 156, 219) 100%)
repeat scroll 50% 0px transparent;
background: -ms-linear-gradient(left center ,
rgb(231, 82, 57) 0%,
rgb(231, 82, 57) 12.5%,
rgb(255, 150, 28) 12.5%,
rgb(255, 150, 28) 25%,
rgb(255, 204, 39) 25%,
rgb(255, 204, 39) 37.5%,
rgb(252, 230, 47) 37.5%,
rgb(252, 230, 47) 50%,
rgb(205, 227, 91) 50%,
rgb(205, 227, 91) 62.5%,
rgb(130, 204, 51) 62.5%,
rgb(130, 204, 51) 75%,
rgb(65, 190, 206) 75%,
rgb(65, 190, 206) 87.5%,
rgb(4, 156, 219) 87.5%,
rgb(4, 156, 219) 100%)
repeat scroll 50% 0px transparent;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25) inset;
}
Called simply like: <div class="colorBar"></div> so question is how to make it all browser compatible
Here's a fiddle
The syntax is slightly different in various browsers.
Is this closer to what you are looking for? (just added the standard, no vendor prefixes)
background: linear-gradient(90deg,
rgb(231, 82, 57) 0%,
rgb(231, 82, 57) 12.5%,
rgb(255, 150, 28) 12.5%,
rgb(255, 150, 28) 25%,
rgb(255, 204, 39) 25%,
rgb(255, 204, 39) 37.5%,
rgb(252, 230, 47) 37.5%,
rgb(252, 230, 47) 50%,
rgb(205, 227, 91) 50%,
rgb(205, 227, 91) 62.5%,
rgb(130, 204, 51) 62.5%,
rgb(130, 204, 51) 75%,
rgb(65, 190, 206) 75%,
rgb(65, 190, 206) 87.5%,
rgb(4, 156, 219) 87.5%,
rgb(4, 156, 219) 100%)
repeat scroll 50% 0px transparent;
http://jsfiddle.net/mNZDP/6/
90deg simply means "go from left to right". Personally I think it's easier to understand than the longer "left top, right bottom" (or whatever). If you don't provide a directional argument, it will default to a zero degree rotation – which means, it will go from top to bottom.
A bit on vendor prefixes:
Chrome, Opera and IE10+ use the standard. If you need to support Android, iOS6 (or lower) or Safari 6 (or lower), you need the -webkit- prefix.
IE has never used a prefix for gradients (people who tell you to use -ms- are filthy liars), so if you need to support IE9 or lower, you need some kind of fallback.
You probably won't need the -moz- or -o- prefix, except in special cases.
Beware: Older versions of Webkit (say, on Android 2.3) use a different syntax.
Check the spec for more details: http://dev.w3.org/csswg/css-images-3/
Also checkout Can I Use to see which browser supports what.
I'm trying to animate a CSS gradient as described here but I can't get it to work. As an example I've put together this jsfiddle.
As a overview, it seems that CSS transitions on gradients doesn't seem to work.
div#Machine {
-webkit-transition: background 5s;
-moz-transition: background 5s;
-ms-transition: background 5s;
-o-transition: background 5s;
transition: background 5s;
background: rgb(71, 234, 46);
background: -moz-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(71, 234, 46, 1)), color-stop(100%, rgba(63, 63, 63, 1)));
background: -webkit-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%);
background: -o-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%);
background: -ms-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%);
background: linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#47ea2e', endColorstr='#3f3f3f', GradientType=0);
}
div#Machine.doublewin {
background: rgb(247, 247, 49);
background: -moz-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(247, 247, 49, 1)), color-stop(100%, rgba(63, 63, 63, 1)));
background: -webkit-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%);
background: -o-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%);
background: -ms-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%);
background: linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f731', endColorstr='#3f3f3f', GradientType=0);
}
I'm using some javascript / jQuery to add / remove the "doublewin" class. When using the same code but using a solid background it works fine, as shown in the jsfiddle link.
Is it actually possible to animate a CSS3 gradient or am I doing something wrong?
Any help is greatly appreciated.
It seems you can't animate css background gradients, but you can still animate opacity to try and get this to work.
If you have two containers, one on top of the other with the exact same width and height, each with a different gradient background colour, you can fade out the container on top to opacity: 0.
If you don't want to add extra mark-up to your code for the second background container, you can use the CSS pseudo selectors ::before and ::after to do this.