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).
Related
While using a CSS black to transparent linear-gradient I noticed that it doesn't gradually fade to transparent, instead it makes the grey area linger longer and only near the end it becomes transparent with a noticeable limit.
After noticing this I decided to use a photoshop gradient with the exact properties and it looked better, the gradient was changing from black to transparent smoothly and linearly.
The following contains an example showing a CSS linear-gradient on the left and Photoshop generated gradient on the right - Both were created with the exact same properties:
#css, #ps{
height:100px;
width:50%;
}
#css{
float:left;
background:linear-gradient(black, transparent);
}
#ps{
float:right;
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAMAAABw8qpSAAABLFBMVEUCAgIDAwMEBQUGBgYICAgJCQkLCwsNDQ0PDw8RERETExMVFRUXFxcZGRkbGxsdHh4gICAiIiIkJSUnJycpKiosLCwvLy8xMjI0NDQ3Nzc5Ojo8PDw/Pz9CQkJFRUVISEhLS0tOTk5RUVFUVFRXV1daWlpdXV1gYGBjY2NmZmZpamptbW1wcHBzc3N2dnZ5eXl8fX2AgICDg4OGhoaJiYmMjIyQkJCTk5OWlpaZmZmcnJyfn5+ioqKlpqaoqamrrKyvr6+ysrK0tbW3uLi6urq9vb3AwMDDw8PGxsbJycnLy8vOzs7R0dHT09PW1tbY2Njb29vd3d3g4ODi4uLk5OTm5ubp6enr6+vt7e3v7+/x8fHy8vL09PT29vb4+Pj5+fn7+/v8/Pz+/v4AAAE6GCMnAAAAY3RSTlP+/Pv5+Pb08vHv7evp5uTi4N3b2NbT0c7LyMbDwL26t7SxrquopaKfnJmWk4+MiYaDgHx5dnNwbGlmY2BdWldUUU5LSEVCPzw5NzQxLiwpJyQiHx0bGRYUEhAODQsJBwYEAwEIFXNRAAAAEElEQVQIHWNJZpnLwjj0IQCJ8QLzQI0QnQAAAABJRU5ErkJggg==");
}
<div id="css"></div>
<div id="ps"></div>
As you can see the difference is clearly visible. Is it possible to replicate Photoshop's real linear-gradient into CSS's or my only option is to use base64/png tricks to achieve an actual linear gradient?
Because currently css's linear-gradient is everything but linear, in fact from what I can see it creates an easeInOut-gradient instead of linear.
As GRC says, you can set multiple midpoints values to adapt the gradient to your exact needs
A good starting point is colorzilla, where you can import an image file and get an automated result.
For your image, the result is:
.test {
height: 100px;
background: #020202; /* Old browsers */
background: -moz-linear-gradient(top, #020202 0%, #1f1f1f 9%, #434343 18%, #989898 38%, #b2b2b2 45%, #d1d1d1 56%, #e9e9e9 67%, #f2f2f2 73%, #f9f9f9 80%, #fdfdfd 87%, #fefefe 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#020202), color-stop(9%,#1f1f1f), color-stop(18%,#434343), color-stop(38%,#989898), color-stop(45%,#b2b2b2), color-stop(56%,#d1d1d1), color-stop(67%,#e9e9e9), color-stop(73%,#f2f2f2), color-stop(80%,#f9f9f9), color-stop(87%,#fdfdfd), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* IE10+ */
background: linear-gradient(to bottom, #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020202', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
}
<div class="test"></div>
The problem is that this tool gives only rgb values, you will need to manually convert those to rgba, and play with the alpha values.
You can do following:
background:linear-gradient(black, transparent, transparent);
or
background:linear-gradient(black 10%, transparent);
10% of space is taken by black.
Hope this helps.
What will be the idea behind a photoshop like angled css3 gradient background...
Any reference??
there are no css3-effect that does this. you can make gradients from two or more colors, but you can't angle it.
it is possible to achieve tho, if you make your background from two/four stacked boxes, the top one from dark to medium, and the bottom one from medium to light.
edit:
this page explains radials pretty well:
http://www.impressivewebs.com/css3-radial-gradient-syntax/
edit 2:
i tried my theory in fiddle, and i think i was wrong in my statement earlier - it can't be done the way i suggested. this is the closest i came:
http://jsfiddle.net/drPMj/4/
.topbox1 {
background-image: -moz-radial-gradient(200px 150px, #777 50%, #ccc);
background-image: -webkit-radial-gradient(200px 150px, #777 50%, #ccc);
}
.topbox2 {
background-image: -moz-radial-gradient(0 150px, ellipse cover, #777, #ccc);
background-image: -webkit-radial-gradient(0 150px, ellipse cover, #777, #ccc);
}
.bottombox1 {
clear:left;
background-image: -moz-radial-gradient(200px 0, ellipse cover, #777, #ccc);
background-image: -webkit-radial-gradient(200px 0, ellipse cover, #777, #ccc);
}
.bottombox2 {
background-image: -moz-radial-gradient(0 0, ellipse cover, #777, #ccc);
background-image: -webkit-radial-gradient(0 0, ellipse cover, #777, #ccc);
}
the problem seems to be that color-stop only works away from center, not along the radial (if that makes sense). anyway, maybe my fiddle can be a start :)
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%)
I have this linear gradient, and I can't figure out why it doesn't "work".
It is supposed to start in light gray and end in with, but about 80% in, it goes all white, with a notable white line. Can anyone see what is wrong?
My CSS is here:
background: white -webkit-linear-gradient(left, #efefef 0%,#f7f7f7 58%,#ffffff 100%);
background: white linear-gradient(left, #efefef 0%,#f7f7f7 58%,#ffffff 100%);
Thanks
Edit: I'm using chrome to test the gradient...
You set the default color white, use transparent...
background: transparent -webkit-linear-gradient(left, #efefef 0%,#f7f7f7 58%,#ffffff 100%);
background: transparent linear-gradient(left, #efefef 0%,#f7f7f7 58%,#ffffff 100%);
#JPuge Take a look here to make easy the CSS Gradients http://www.colorzilla.com/gradient-editor/
I need to create a "sharp" gradient for both the header and navigation text on a site I'm building. I'm trying to make it as pure HTML5/CSS3 as possible, and would like to stick with #font-face and not move over to Cufon. What I mean by sharp gradient is two colors, with no blending in between.
Example: http://dl.dropbox.com/u/12147973/sharp-gradient.png
I found a way to do it in Cufon, but as I said, I want to stick to #font-face. Cufon gives me too much grief in IE, and I really love how #font-face works.
I also found a way to do gradients on text with CSS3, but I can't figure out how to do it with "sharp" gradients. http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-pure-css-text-gradients/
As you can see from my example, using the PNG image trick won't work, because it's not on a solid background. If all else fails, I'll just use a smooth gradient, but I have trust in the good people of StackOverflow.
Gradient I'm currently working with:
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8a8a8), color-stop(50%,#a8a8a8), color-stop(50%,#6d6d6d), color-stop(100%,#6d6d6d))
NOTE: I don't mind if it's only a one-browser solution. If that's all their is, then at least it's better than nothing.
I believe you'll need to use color stops. In this situation, you'll want to colors in your gradient to stop at the exact spot.
Looking at the demo you have on Nettuts, I took the code and modified it to create a two-tone sharp gradient using this code:
-webkit-mask-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.5, rgba(15,8,188,1)),
color-stop(0.5, rgba(70,62,255,0.5)));
Replace "-webkit-mask-image" piece from the demo with what I have above and it should be what you're looking for. Adjust the RGB values for your preferred colors. Note though in the demo there's some additional things in the CSS that might produce unexpected results, e.x. the color property in the "h1 a" selector and the color & text-shadow property in the "h1:after" selector. You may want to remove those to get a better idea of how the effect looks like in its purest form.
Also, please note that the above code will only work for webkit based browsers (e.g. Chrome & Safari). You'll need to implement the appropriate browser prefix properties for other browsers (e.g. -moz-), but before you do that make sure the browser supports the "mask-image" and "gradient" property.
Cheers! :)
Here is an example I did for buttons in an app
a.primary[type="button"],input.primary[type="button"], input.primary[type="submit"],input.primary[type="reset"]{
background-image: linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%);
background-image: -o-linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%);
background-image: -moz-linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%);
background-image: -webkit-linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%);
background-image: -ms-linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%);
a.primary[type="button"] span,a.secondary[type="button"] span{padding: 0 20px;height: 20px;}
Then you can use it with inputs or a tags with a type = button
<a type="button" class="primary" href="/neeto"><span>Button!</span>