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!
Related
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?
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
I am new to using CSS3 (specially gradients). How do I convert the following HTML/CSS coded border to one with CSS3-based gradient (i.e. using no image)
I want to convert FROM
Normal CSS border/background color
TO
Box with Gradient
Width/Heights are approx in the img above...I need to know how to get the gradient as per the 2nd fig ?
This link should help you. You will find the syntax for gradients there.
It's this one for all the major browsers:
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: -webkit-linear-gradient(top, #444444, #999999);
background-image: -moz-linear-gradient(top, #444444, #999999);
background-image: -ms-linear-gradient(top, #444444, #999999);
background-image: -o-linear-gradient(top, #444444, #999999);
background-image: linear-gradient(to bottom, #444444, #999999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
…while #444444 is the color at top of the gradient and #999999 the gradient-color at the bottom.
The different "vendor-prefixes" ensure that the gradient works in different browsers as the 'default'-syntax is not supported by every browser by now.
The filter-property will make the gradient work in Internet Explorer 8 and below. But this has some drawbacks (performance aso…). Just use it if really necessary.
Edit: The syntax for linear-gradient changed. The spec'd syntax:
background-image: linear-gradient(to bottom, #444444, #999999);
I've changed this above too, so everyone can just copy this.
Without seeing the colors you are working with, you want to do something like this
.class{
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
background: -moz-linear-gradient(top, #fff, #000);
}
Here's a tool that might help:
http://gradients.glrzad.com/
The Best place to look is below:
CSS3 Gradients
CSS gradients are cool stuff. But you have one problem. When you are used background gradients in ie9. You can not used border radius are other CSS3. The background filter propertiy for ie is suck. I have a better solution for this. That fix the problem in ie9.
With this tool you create a gradient: http://www.colorzilla.com/gradient-editor/
And with this tool you create a SVG for ie9: http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
Now we have this code:
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1OCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjNDQ0NDQ0IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjOTk5OTk5IiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNTgpIiAvPgo8L3N2Zz4=);
background: #444444; /* Old browsers */
background: -moz-linear-gradient(top, #444444 0%, #999999 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#999999)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #444444 0%,#999999 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #444444 0%,#999999 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #444444 0%,#999999 100%); /* IE10+ */
background: linear-gradient(top, #444444 0%,#999999 100%); /* W3C */