I'm trying to lighten / darken my button background when :hover on.
I tried different style like
background-color:rgba(0,0,0,0.5);
background-blend-mode:darken;
But it doesn't work like i want.
I want a really really light lighten and same for the darken.
background: linear-gradient(173deg, rgba(255,121,218,1) 0%, rgba(214,108,219,1) 39%, rgba(171,94,220,1) 85%, rgba(155,89,220,1) 100%);
here is my baby :
Thanks for your help community <3
You can use lighten inside linear-gradient like that:
background: linear-gradient(
356deg,
lighten(*your color*, 5%) 0%,
lighten(*your color*, 5%) 33%,
lighten(*your color*, 5%) 100%
);
Exemple here: https://codepen.io/perpel_/pen/LYyJWpp
You can add a linear gradient white with opacity.
background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), *your color of the btn*;
I too encountered this problem and was looking for a solution.
In the end, I decided to use different variables based on perpel's solution
/* gradient colors */
#color1: #8f23a2;
#color2: #c1276a;
#color3: #dc8f41;
#darken :10%;
#lighten :10%;
#my-gradient: linear-gradient(to bottom, #color1, #color2 50%, #color3);
#my-gradient-darken: linear-gradient(
to bottom,
darken(#color1, #darken),
darken(#color2, #darken) 50%,
darken(#color3, #darken)
);
#my-gradient-lighten: linear-gradient(
to bottom,
lighten(#color1, #lighten),
lighten(#color2, #lighten) 50%,
lighten(#color3, #lighten)
);
Related
I need to apply color variable to liner-gradient, which also needs to have opacity. So in that case rgba(red, green, blue, opacity) is mandatory. Is there any way to apply variable color without hard coding rgba() in liner-gradient?
For instance :
let gradient= `linear-gradient(to bottom, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 1) 20%)`
.arraow {
background: ${(p) => p.gradient}
}
The above code is only for one color and taht is #FFFFFF at the moment. But this needs to change depending on color selected for the gradient to use.
I need something like below:
const gradientColor = p.arrowColor;
let gradient= `linear-gradient(to bottom, var(gradientColor) 15%, var(gradientColor) 40%,
var(gradientColor) 20%)` <<<<<------ here I am missing the opacity since they are not rgba()
It doesn't seem a nice way to manually create all rgba() and keep it a file and access it with a conditional statement.
I would like to add a border on top of my footer that's several different colors like so: http://i.imgur.com/Bf8ILCu.png
I looked around and I see examples of adding images, or gradients, or multiple colors for different sides but could't find anything for what I want to do.
You can use CSS Gradients for this.
Have a look at the snippet below (you may change the colors according to your requirements):
.border-top {
width: 100%;
height: 20px;
background: linear-gradient(to right, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 10%, rgba(241,111,92,1) 10%, rgba(246,41,12,1) 10%, rgba(81,24,240,1) 10%, rgba(81,24,240,1) 23%, rgba(240,24,226,1) 23%, rgba(240,24,226,1) 34%, rgba(39,192,230,1) 34%, rgba(39,192,230,1) 46%, rgba(39,230,52,1) 46%, rgba(39,230,52,1) 58%, rgba(76,82,80,1) 58%, rgba(76,82,80,1) 69%, rgba(173,173,173,1) 69%, rgba(173,173,173,1) 81%, rgba(255,0,21,1) 81%, rgba(255,0,21,1) 91%, rgba(255,204,0,1) 91%, rgba(255,204,0,1) 100%);
}
body {
margin: 0;
}
<div class="border-top"></div>
Hope this helps!
I would like to know if it's possible to generate a mask of saturation+brightness that are used in color pickers for instance (something like http://johndyer.name/lab/colorpicker/refresh_web/colorpicker/images/map-hue.png) but using only linear-gradient in css3 ?
I tried severals things, such as :
background: linear-gradient(to right, hsla(0,100%,0,0) 0%, hsla(0,0%,0%,.5) 100%), /* saturation mask */
linear-gradient(to top, hsla(0,0%,0%,.5) 0%, hsla(0,0%,100%,.5) 100%), /* lightness mask */
but I can't make something like the picture, can't find the right combinaison, and because I don't fully understand, I don't know if it's possible.
Thanks
It is maybe the way you write it.
for the image, 1 gradient + a background-color will do.
you did not close correctly you rules , one value is still expected 100%) , /* li
:)
this could be it :
ele {
background:
linear-gradient(0deg, hsla(0,0%,0%,.5) 0%, hsla(0,0%,100%,.5) 100%) no-repeat left ,
white linear-gradient(180deg, hsla(0,0%,0%,.5) 0%, hsla(0,0%,100%,.5) 100%) no-repeat right;
background-size:95% 100%, 5% 100%;
}
http://codepen.io/anon/pen/ubDsr (gradient covers body)
You had your gradients reversed and some incorrect hsla values.
Just use hex notation, it's easier in this case:
background-image:
linear-gradient(to top, #000 0%, transparent 100%), /* lightness*/
linear-gradient(to right, #fff 0%, transparent 100%); /* saturation */
Here's a demo where you can compare the result with an image-based solution (normal = gradients, hover = Bootstrap Colorpicker).
I am trying to overlay a white-black linear gradient to an existing image. I have it set up like below; however, only the gradient layer is showing. Can someone point out where I went wrong?
JS Fiddle: http://jsfiddle.net/6nJJD/
HTML
<div>hello</div>
CSS
div {
background:linear-gradient(to bottom, #ffffff 0%, #000000 100%), url("http://us.123rf.com/400wm/400/400/adroach/adroach1210/adroach121000001/15602757-flower-and-bird-ornaments-retro-tile-repeat-as-many-times-as-you-like.jpg") repeat #eae7de;
color:#544a46;
font:62.5%/1.6 Helvetica, Arial, Sans-serif;
height:500px;
width:500px
}
try to change your gradient colours using RGBA values
background:
linear-gradient(to bottom, rgba(255,255,255, 0) 0%, rgba(0,0,0, 1) 100%),
url(...);
Example fiddle: http://jsfiddle.net/J7bUd/
Try also changing rgba(255,255,255, 0) with transparent: the result is slightly different but probably it's exactly what you're trying to achieve
You can accomplish this using RGBA in the gradient.
http://jsfiddle.net/6nJJD/3/
CSS:
linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%)
You can modify the "0.65" value to attain the desired transparancy.
For Creating More Gradients as you like you can visit Ultimate Css
Gradient Generator
Hope This HElps
like this?
http://jsfiddle.net/6nJJD/2/
linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, #000000 100%)
Using CSS or CSS3, how can i make the folowing background ?
If possible, i'd like ie6,7,8 support. I can use a javascript based tool to simulate CSS3 for old browsers (like css3pie).
If possible, i'd like ie6,7,8 support.
Use a background image. Even if you could use pure CSS3 to create such a pattern for a background (I highly doubt that is possible), it's not worth the hassle to use a bunch of JavaScript libraries and such just to get it to work in those versions of IE.
I use this.
Then you just do background-image:url(blahblahblah.gif)
Any reason you're still supporting IE6? It would be easy to do without IE6 support. IE really sucks for gradient support, so you'll need to use an image, but here's the CSS anyway.
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
I know this probably doesn't match your image. I'm sorry, but your image host is blocked by my work, so you'll have to interpret from here. This will work with webkit browsers and FF3.6, and will fall back to the color specified in background-color for non-compliant browsers.
You have to use a repeating texture square. Find a small ping and use a repeating backround.