I'd like to insert a picture to separate the 'limits' of the progress bar.
Hence the right side would be red, than I'd have my little picture, followed by a green side
Is it possible?
Client side it is all just html, css and javascript. A css linear gradient already works great (boundaries at 10 and 90 percent)
.ui-progressbar {
background: -moz-linear-gradient(left, rgba(0,255,0,1) 0%, rgba(0,255,0,0) 10%, rgba(255,0,0,0) 90%, rgba(255,0,0,1) 100%);
background: -webkit-linear-gradient(left, rgba(0,255,0,1) 0%,rgba(0,255,0,0) 10%,rgba(255,0,0,0) 90%,rgba(255,0,0,1) 100%);
background: linear-gradient(to right, rgba(0,255,0,1) 0%,rgba(0,255,0,0) 10%,rgba(255,0,0,0) 90%,rgba(255,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#ff0000',GradientType=1 );
}
And if you want to combine it with an image, see
How do I combine a background-image and CSS3 gradient on the same element?
Related
I'm looking at the heroku website: https://www.heroku.com/
I was curious how they have achieved the ability to have a full page gradient on the home page with content under it, and then on the next page, seemingly with very similar markup, they have been able to keep the exact same section of gradient but applied only to the navigation bar at the top.
How might I get that kind of technique?
Apply the gradient to the body, and then having a transparent div on the front page?
Apply the gradient to a full height div, then have a transparent header div on top of it with a white coloured body.
Demo Header gradient as heroku
Demo Background gradient as heroku
Demo Background gradient in general with all cross browser styles and support
html {
background: #1e5799;
/* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(50%, #2989d8), color-stop(61%, #207cca), color-stop(100%, #7db9e8));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
/* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
/* IE6-9 */
min-height: 100%;
}
You can use your inspect tool to see their css:
background-image:
-webkit-radial-gradient(50% top, rgba(84,90,182,0.6) 0%, rgba(84,90,182,0) 75%),
-webkit-radial-gradient(right top, #794aa2 0%, rgba(121,74,162,0) 57%);
This is just a bit complicated, but not too much:
1) You can have multiple backgrounds, which is often useful as a fallback or for more complex gradients
2) You can set the origin and "destination" of a gradient using percentages or just names like "top right" "bottom" and such, thus avoing having to give an angle - so it's always the same thing, independent of the aspect ratio.
Worth noting is, that they specifically only support webkit (Chrome, Safari), even though I'm pretty sure this could easily be done on any modern browser.
Hope this clears it up a bit.
Read about "parallax" technology on the web
I'm using a gradient as a background. I was hoping that the gradient would start out darker and gradually lighten as it gets to the other end of the container that it is applied to. Instead, what I notice is that the darker part covers around 90% and only after this 90% does it start to get lighter. It would be nice if around 50% it was halfway between the start and end color. Is there any way of achieving this? Here is my css:
background: -moz-linear-gradient(center bottom , #f4f7fa 0pt, #FFFFFF 100%) repeat scroll 0 0 transparent;
background: linear-gradient(bottom, #f4f7fa 0, white 100%);
background: -webkit-linear-gradient(bottom, #d6d6d6 0, white 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f7fa', endColorstr='#FFFFFF', GradientType=0);
Try using this code
background: linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -o-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -moz-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -webkit-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -ms-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
Gradient property explanation:
linear-gradient(Gradient Starting Position,Color & Offset,Color & Offset);
So in your code the color #D6D6D6 started form 0% and moves upwards,
then color #FFFFFF stated form 100% as offset is set as 100%(and it ends there too).
So to get the consistent flow from one color to other you should set the offset of second color to 50%.
Check this link to better understand CSS Gradient property.
Regards
Shiva
Does anyone know how I could plot a gradient like in the image below with pure CSS.
It doesn't have to work in IE.
I can get it to work but I can't seem to be able to taper off the gradient on both sides left and right like the image shows.
Any ideas would be grateful. Again this is using straight css to do this.
This website is amazing for doing CSS gradients:
http://www.colorzilla.com/gradient-editor/
You can even import an image or CSS.
An example would be:
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
Why do you need gradient for this? How about drop shadows.
Examples
That is a very complex task. They position one div behind the front one. The one behind is where they create the shadow, then they transform it and position it to achieve that effect. Here is a guide guide to do this technique (has it on one corner, but you can tweak a bit and get that effect)... I am sure there are specific guides to achieve the exact effect you want to out there as well, but they seem to be escaping my search skills for the day.
http://www.red-team-design.com/how-to-create-slick-effects-with-css3-box-shadow
With pure CSS, you could use radial-gradient.
Suppose that you have a div to emulate that shadow, and it has 300px of width and 100px of height, then, you just could achieve the effect with:
background: radial-gradient(70% 10%,gray 20%, white 60%);
background-position: 0px -54px;
background-size: 100% 110%;
Here is the example --> enter link description here
This is what I have so far: http://jsfiddle.net/xzTGv/21/
I really need an improvement with my css button/anchor. I can't really get the right 'triangle'( which is really a square, rotated) to blend into the button properly.
Is there something else I should be doing? I've seen some people manipulate borders to make an actual triangle. But I've found that I can't really get the gradient with that method. I'd really appreciate all the help I can get with this.
Thank you in advance!
The problem I'm seeing is that the main button is a light to dark gradient from top to bottom, but the rotated "triangle" is a gradient from right to left. If you can rotate your gradient to go from top to bottom on the rotated one (so, rotate the gradient 90 deg) then you'd be set.
i was just trying at the jsfiddle with the answer from Mike
.arrow:before{
background: -moz-linear-gradient(left top, #ffffff 0%, #e6e6e6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6));
background: -webkit-linear-gradient(left top, #ffffff 0%, #e6e6e6 100%);
background: -o-linear-gradient(left top, #ffffff 0%, #e6e6e6 100%);
background: -ms-linear-gradient(left top, #ffffff 0%, #e6e6e6 100%);
background: linear-gradient(left top, #ffffff 0%, #e6e6e6 100%);
should work!
I am having the most difficult time getting textured background images to show up correctly in HTML5 tags. Specifically, I'm trying to add a .png texture of low-opacity watercolor daubs to a tag that already has a cross-browser gradient applied to it. I can get the gradient to show up fine, but can't get the background image to show up correctly.
I've been told that the CSS command for it is shorthanded:
background:url("filepath");
Is it a matter of the type of quotes I'm using? Does it matter if it's single / double quotes? Or no quotes at all? i'm not sure what the quotes are doing to the selector, or if it's a matter of you can't apply a background image AND a gradient? You can view the space I'm trying to modify at http://www.zeldezine.info/demo/ in the obvious footer position.
Thanks!
You can't add a background image and a gradient to the same element. As for quotes it doesn't matter whether they are single, double or none at all. Just make sure the image path is correct.
If you want both, you can do something like this:
http://jsfiddle.net/vjEh7/
CSS:
footer {
background: rgb(169,3,41);
background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1)));
background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -o-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
}
div {
width: 150px;
height: 160px;
background: url(http://www.zeldezine.info/demo/img/logo_bottom.png) no-repeat;
}
HTML:
<footer>
<div></div>
</footer>
Try this:
body
{
background-image:url('images/image.jpg');
background-repeat:repeat;
}