I am looking for a way to make a linear-gradient from "nothing" (alpha) to a defined colour: #e6a015. I can't find it neither in google nor here, can someone tell me how to do this?
You can use rgba colour with alpha as zero
background-image: -ms-linear-gradient(top left, rgba(230,160,21,0) 0%, rgb(230,160,21) 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top left, rgba(230,160,21,0) 0%, rgb(230,160,21) 100%);
/* Opera */
background-image: -o-linear-gradient(top left, rgba(230,160,21,0) 0%, rgb(230,160,21) 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(230,160,21,0)), color-stop(1, rgb(230,160,21)));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top left, rgba(230,160,21,0) 0%,rgb(230,160,21) 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom right, rgba(230,160,21,0) 0%, rgb(230,160,21) 100%);
DEMO
Related
I am working from this answer here: Use css gradient over background image
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 59%, rgba(0,0,0,0.65) 100%), url('/img/fondo-home.jpg') no-repeat;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(59%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))), url('/img/fondo-home.jpg') no-repeat;
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.65) 100%), url('/img/fondo-home.jpg') no-repeat;
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.65) 100%), url('/img/fondo-home.jpg') no-repeat;
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.65) 100%), url('/img/fondo-home.jpg') no-repeat;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.65) 100%), url('/img/fondo-home.jpg') no-repeat;
If I use the above (I change the url) it works as expected. ie I see a list with with a gradient and an image.
However if I change my original code that gave me a nice blue gradient and no image to:
background: -moz-linear-gradient(top, #6daad3 0%, #396b9e 100%), url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6daad3), color-stop(100%,#396b9e)), url('/img/fondo-home.jpg') no-repeat;
background: -webkit-linear-gradient(top, #6daad3 0%,#396b9e 100%), url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat;
background: -o-linear-gradient(top, #6daad3 0%,#396b9e 100%), url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat;
background: -ms-linear-gradient(top, #6daad3 0%,#396b9e 100%), url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat;
background: linear-gradient(to bottom, #6daad3 0%,#396b9e 100%), url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat;
background-size: 80px;
I see the space for the image and firefox debugger see's the url but I dont see the image.
The only difference I see is that I am using Hex in my example.
Any ideas ?
MrWarby.
Working using the following:
/* background: #6daad3; Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-moz-linear-gradient(top, #6daad3 0%, #396b9e 100%); /* FF3.6+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-webkit-gradient(linear, left top, left bottom, color-stop(0%,#6daad3), color-stop(100%,#396b9e)); /* Chrome,Safari4+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-webkit-linear-gradient(top, #6daad3 0%,#396b9e 100%); /* Chrome10+,Safari5.1+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-o-linear-gradient(top, #6daad3 0%,#396b9e 100%); /* Opera 11.10+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-ms-linear-gradient(top, #6daad3 0%,#396b9e 100%); /* IE10+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,linear-gradient(to bottom, #6daad3 0%,#396b9e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6daad3', endColorstr='#396b9e',GradientType=0 ); /* IE6-8 */
background-size: 80px 80px;
From the W3C working draft on css gradients :
Given a color expressed as an rgba() 4-tuple, one can convert this to a premultiplied representation by multiplying the red, green, and blue components by the alpha component...
Hex representation are not mentioned in the document. Maybe not all browsers support Hex values.
Convert your colors to rgba using http://hex2rgba.devoth.com/ or any other tool.
If it doesn't work, then maybe that's just because you're applying opaque colors on top of an image, which is supposed to make it not visible...
[EDIT]
You're indeed actually really very hiding the image with opaque colors here!
The backgrounds are rendered one under the other in the order of css value text... So the image is LAST, thus behind...
You can just convert your colors and add transparency by setting alpha values between 0 and 1 at every color-stop.
The reason is in RGBA the "a" stands for alpha. Alpha channels allow you to produce transparency. Notice that the last value in the example gradient has a .65 in the fourth position, meaning that it is only 65% opaque. Your gradients start with a fully opaque color at 0% and go to a fully opaque color at 100%, so they essentially cover the entire image.
show Finally got it working using the code posted above. Adding the url first made the image at the front.
background-size: 80px 80px; sized the image correctly.
So I was able to set all the opacities back to 1.
im trying to get this gradient to work in Firefox
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,transparent),color-stop(50%,transparent),color-stop(50%,$panda), color-stop(100%,$panda)); /* Chrome,Safari4+ */
I've tried with this, but no luck ?
background: linear-gradient(to bottom, #fff 0, #fff 50%, $panda 100%);
Depending on your version of Firefox, you may have to use the prefix -moz when using background linear-gradients.
Here's a general example:
.box_gradient {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Chrome, Safari 4+ */
background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, #444444, #999999); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
The Mozilla documentation would have more examples on how to render these gradients in Firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
Also, refer to a nice handy resource here that I generally use: http://css3please.com/
You can try these:
background: -moz-linear-gradient($panda, transparent);
background-image: linear-gradient(to bottom, #FFF 0, #fff 50%, $panda 100%);
My current css is
background: -moz-linear-gradient(top, rgba(47,163,216,0.85) 0%, rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(47,163,216,0.85)), color-stop(100%,rgba(47,163,216,0.85))),
url(http://i.imgur.com/HS5coix.jpg); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(47,163,216,0.85) 0%,rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(47,163,216,0.85) 0%,rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(47,163,216,0.85) 0%,rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg); /* IE10+ */
background: linear-gradient(to bottom, rgba(47,163,216,0.85) 0%,rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d92fa3d8', endColorstr='#d92fa3d8',GradientType=0 ),
url(http://i.imgur.com/HS5coix.jpg); /* IE6-9 */
background-position:center;
The problem is that the background-position isn't formatting the background image to center. Possibly something like background: linear-gradient(to bottom, rgba(47,163,216,0.85) 0%,rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg) center;?
Hope you can help!
Have you tried setting background-position: center center;?
This solution worked here: Background Image won't center in IE 9
I'm afraid I just answered my own question. The solution was url(http://i.imgur.com/HS5coix.jpg)50%;. Sorry for the inconvenience and thanks for all the help!
Is it possible to add gradiency on hover? I want to avoid images and use pure css3.
I have a simple box with
backgroundc-color: blue whihc has an icon.
I want to add a gradient effect on mouse over.
How can i get that gradient glow effect as the screen grab?
I am trying to get this effect below:
You can do gradients in CSS, although the definitions can get a bit verbose. Here's a solid CSS3 gradient creator.
Then just add a :hover to your link.
.your-link:hover {
// gradient here
}
This is how I would do it:
.link:hover {
background-image: -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 116, color-stop(1%, #57fdfe), color-stop(100%, #2c95dd));
background-image: -webkit-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%);
background-image: -moz-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%);
background-image: -ms-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%);
background-image: -o-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%);
background-image: radial-gradient(farthest-side at center bottom, #57fdfe 1%, #2c95dd 100%);
}
Thats a complete example, you can just copy and paste and it should work :) enjoy!
Note that has your colours in there and its radial :)
Is this the kind of thing you are looking for?
Obviously use your own colors.
DEMO
This is the css:
.blah:hover {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0198E1), to(#00FFFF));
background-image: -webkit-linear-gradient(top, #0198E1, #00FFFF);
background-image: -moz-linear-gradient(top, #0198E1, #00FFFF);
background-image: -ms-linear-gradient(top, #0198E1, #00FFFF);
background-image: -o-linear-gradient(top, #0198E1, #00FFFF);
}
For best practices for css3, you can go to css3please.com. Just adding :hover to the class will give you what you need:
.box_gradient:hover {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Chrome, Safari 4+ */
background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, #444444, #999999); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
}
I used css3please to generate a top-to-bottom linear gradient rule that would work across all browsers that support this style and it gave me:
.box_gradient {
background-color: #75A319;
background-image: -webkit-gradient(linear, left top, left bottom, from(#75A319), to(#9FCC1D)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #75A319, #9FCC1D); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #75A319, #9FCC1D); /* FF3.6 */
background-image: -ms-linear-gradient(top, #75A319, #9FCC1D); /* IE10 */
background-image: -o-linear-gradient(top, #75A319, #9FCC1D); /* Opera 11.10+ */
background-image: linear-gradient(to bottom, #75A319, #9FCC1D);
}
I'm a little suspicious of the last rule in this class:
background-image: linear-gradient(to bottom, #75A319, #9FCC1D);
Intuitively, one would expect:
background-image: linear-gradient(top bottom, #75A319, #9FCC1D);
Can someone confirm or allay my suspicions?
MDN explains the linear-gradient property here: https://developer.mozilla.org/en/CSS/linear-gradient
What you got from css3please is correct. to bottom specifies the angle. In this case, the angle is 180deg.