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.
Related
Hello everyone I want to set the ion-tab-bar background to gradient like the toolbar in this image.
What I have tried. (sets the toolbar as expected but doesn't work as intended for the tab-bar)
--ion-toolbar-background: linear-gradient(90deg, rgba(252, 176, 69, 1) 0%, rgba(255, 149, 0, 1) 50%, rgba(241, 90, 41, 1) 100%);
--ion-toolbar-color: var(--ion-color-light);
--ion-tab-bar-background: linear-gradient(90deg, rgba(252, 176, 69, 1) 0%, rgba(255, 149, 0, 1) 50%, rgba(241, 90, 41, 1) 100%);
--ion-tab-bar-color: var(--ion-color-light);
Checking Ionic 4 Tabs styling I tried the following but still same result.
ion-tab-bar {
--ion-background-color: linear-gradient(to right, rgba(252, 176, 69, 1) 0%, rgba(255, 149, 0, 1) 50%, rgba(241, 90, 41, 1) 100%) !important;
}
ion-tabs ion-tab-bar {
--ion-background-color: linear-gradient(to right, rgba(252, 176, 69, 1) 0%, rgba(255, 149, 0, 1) 50%, rgba(241, 90, 41, 1) 100%) !important;
}
All help is appreciated thanks.
I have fixed it using
ion-tab-bar {
--background: transparent;
background-image: linear-gradient(90deg, rgba(252, 176, 69, 1) 0%, rgba(255, 149, 0, 1) 50%, rgba(241, 90, 41, 1) 100%);
}
I want to create a background with two gradients - layered atop one another.
I created the below example, and it seems like I can't put multiple gradients together. (The example was created based on MDN-Using multiple backgrounds & MDN-gradient)
.radial-gradient {
background: radial-gradient(red, yellow, rgb(30, 144, 255));
}
.linear-repeat {
background: repeating-linear-gradient(45deg,
blue, blue 5px, white 5px, white 10px);
}
.combined-gradient {
background: radial-gradient(red, yellow, rgb(30, 144, 255)),
repeating-linear-gradient(45deg, blue, blue 5px, white 5px, white 10px);
}
<div class="radial-gradient">radial gradient</div><br/>
<div class="radial-gradient linear-repeat">linear gradient</div><br/>
<div class="radial-gradient linear-repeat">combined gradient 1</div><br/>
<div class="combined-gradient">combined gradient 2</div>
Maybe the following constraint prevents layering gradients:
Only the last background can include a background color.
If it's not allowed to layer two gradients as a background, how should I layer them in another way?
I think what you're looking for is this.
What's the problem with your code?
Well, each of your gradient is non-transparent, so one will overlap the other completely and that's why only one is visible. The workaround is, you make use of rgba(x,y,z,alpha) to give them alpha transparency which gives the background a fade effect to see through each other.
.combined-gradient1 {
background: repeating-linear-gradient(45deg, rgba(00, 00, 255, 0.8), rgba(00, 00, 255, 0.8) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px), radial-gradient(rgba(255, 0, 0, 0.8), rgba(255, 255, 0, 0.8), rgba(30, 144, 255, 0.8));
}
.combined-gradient2 {
background: radial-gradient(rgba(255, 0, 0, 0.8), rgba(255, 255, 0, 0.8), rgba(30, 144, 255, 0.8)), repeating-linear-gradient(45deg, rgba(00, 00, 255, 1), rgba(00, 00, 255, 1) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px);
}
<div class="combined-gradient1">combined gradient 1</div>
<br>
<div class="combined-gradient2">combined gradient 2</div>
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 wanting to add a transparent black overlay to a button for it' :active state, so when you click it, it's the same gradient but with just an overlay of e.g. rgba(0,0,0,.3)
The way I thought this would work is (using webkit in this example):
background:rgba(0,0,0,.3), -webkit-linear-gradient(top, #fcfcfc 0%,#bababa 100%);
or without the comma, and the order reversed... but nothing shows up at all!
I'm not keen on adding another div to act as the overlay to do it, so is there a strictly CSS way to do this? I was thinking maybe it's a :before or :after pseudo class, but I don't have a clue how to use these!
Would really appreciate an answer, this has been bugging me for a long time.
You can't do that; rgba defines a colour, not an image. What you can do is use a gradient that's not a gradient:
background: -webkit-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), -webkit-linear-gradient(top, #fcfcfc 0%,#bababa 100%);
This is why I always specify background-image instead of using the shorthand when developing - it makes debugging easier.
You can do it with ::after pseudo-element.
First, you need to define the button CSS with position: relative and then use ::after with position: absolute, like this:
.button {
position: relative;
}
.button:active::after {
content: ' ';
position: absolute;
background: rgba(0, 0, 0, 0.3);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Live Fiddle demo
Think in Reverse
Set background-color: black and overlay the gradient with your colors converted from hex to rgba (initially set to 1 for alpha), then on :active fade the gradient to 0.7 (which will show 30% black) alpha.
See the fiddle.
button {
background-color: black;
background-image: -webkit-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(186, 186, 186, 1) 100%);
background-image: -moz-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(186, 186, 186, 1) 100%);
}
button:active {
background-image: -webkit-linear-gradient(top, rgba(252, 252, 252, .7) 0%, rgba(186, 186, 186, .7) 100%);
background-image: -moz-linear-gradient(top, rgba(252, 252, 252, .7) 0%, rgba(186, 186, 186, .7) 100%);
}