CSS3 Crossbrowser Gradient Background with rgb/rgba and fallbacks
Question
I want to try and get a cross browser gradient effect working with rgb
values with fall backs in case the browser doesn't support it.
jsFiddle example: http://jsfiddle.net/HelloJoe/hUxdh/
I believe I've covered the majority of browsers, but I have a few questions:
Are there any other browsers that I have missed which are commonly used, as well as what properties would be needed for devices such as iPads/SmartPhones, or would they render from one of the currently used properties?
If by chance the gradient isn't rendered, is having the original
background: rgb(50, 50, 50);
enough to generate just a solid colour?With the
filter
value, I couldn't get it working by usingrgb
values and had to resort to using ahex
value instead, not that this is a huge problem, but I'm trying to only usergb
values. Is there a way round this or does it just not accept them?If I was to use
rgba
instead ofrgb
would I then need to have argba
gradient background value, anrgb
gradient background value as a fall back for not rendering the alpha transparency and then a solid background fall back in case no gradient was rendered at all? Or would the browser ignore the alpha transparency value and just display thergb
from thergba
without a separatergb
background fall back?As a final fall back for everything, would having a set
hex
value at the start of the CSS properties be needed? I guess there is no harm is adding ahex
value but the idea of usingrgb
is ifrgba
is usable it makes for a quick and easy colour change throughout the site. So having a fall backhex
value would make usingrgb/rgba
pointless for what I'm intending it's used for since I'd need to go through and edit allhex
values anyway.
I've done a bit of searching and examples vary, understanding is misinterpreted between different people and I was just try to create an accurate working example of getting the desired outcome.
Solution
May i suggest you this website to help you with your Gradients and fallback:
http://www.colorzilla.com/gradient-editor/