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 using rgb values and had to resort to using a hex value instead, not that this is a huge problem, but I'm trying to only use rgb values. Is there a way round this or does it just not accept them?
If I was to use rgba instead of rgb would I then need to have a rgba gradient background value, an rgb 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 the rgb from the rgba without a separate rgb 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 a hex value but the idea of using rgb is if rgba is usable it makes for a quick and easy colour change throughout the site. So having a fall back hex value would make using rgb/rgba pointless for what I'm intending it's used for since I'd need to go through and edit all hex 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.
May i suggest you this website to help you with your Gradients and fallback:
http://www.colorzilla.com/gradient-editor/
Related
I want to hover an svg with a diferent set of colors after grayscaling that svg.
There is any way of setting a certain color palette to an svg with a filter css or an math algorithm?
Im not any expert in color manupulation so any help would be apreciated.
This can be done through CSS filters or through SVG filters. SVG filters are probably the more technically complex solution.
You can try playing with the hue-rotate function on the example on this page: filter in MDN CSS Reference
You can combine more than one function, in different orders too, to get different results.
Keep in mind that you won't get far if you set grayscale to 100% or saturate to 0% as your first function, as you wipe out the hue info and you can't recolorize (at least not through CSS IIRC).
Try playing with hue-rotate, brightness, contrast, invert, or even combining them.
Also keep in mind that most of the functions are set in percentage units, but hue-rotate is in degrees of the color wheel (deg).
I'm relatively new to CSS. I’m trying to figure out why my UX team sometimes defines colours with hex codes and sometimes uses RGBA.
Context: We build highly technical, management web apps. All of our web apps have a white background and don’t tend to layer elements (e.g., not marketing images as backdrops). Some of the designers feel RGBA helps control colour contrast ratios. Some designers just prefer using RGBA over hex. Some designers use hex. No one has given me a clear reason for their choice. I’d like to know the pros and cons of each technique and in which situations one method is better than the other because I’m building a colour theming solution for our core framework. We want gradient scales for each of our primary and secondary colours. There's no current requirement for transparency, but I suppose one day there could be.
I came across a related UX SE post: https://ux.stackexchange.com/questions/105503/why-isnt-primary-text-full-opacity Answers talk about RGBA helping to enforce standard use of colour. That is, if you start with an RGB colour and use the alpha value to adjust light/dark, you could ensure a consistent colour gradient scale. (Note: That post has a good image showing a colour scale using hex and then the equivalent alpha value beside it: https://i.stack.imgur.com/MWust.png)
But then what happens when you have HTML elements overlapping and you don’t want to them to appear partially transparent and yet want to use the appropriate colour? Do you use an equivalent RGB with alpha 1 or a hex code?
As for the contrast ratio theory, here’s what one UX designer told me: RGBA color always maintains the same level of contrast from whatever it's placed on. If you put an #AAA body text on an #FFF background, versus if you put it on a #EEE background, the #AAA text will look lighter on the #EEE background. But if you put rgba(0,0,0,0.33) on an #FFF vs #EEE background, the text will always have a 33% darker contrast on both. Is that true? Using a contrast ratio calculator (https://contrast-ratio.com/) rgba(0,0,0,0.33) on #FFF has a 2.3 ratio whereas rgba(0,0,0,0.33) on #EEE has a 2.26 ratio. Close, but not identical. #DDD goes down to 2.23.
Material UI Color Palettes seems to use hex codes (see https://material.io/design/color/#color-theme-creation ), but I’ve seen other writing to suggest at times Material UI uses RGBA sometimes. Not that Material UI is always right. :)
So again, I'm looking for the pros and cons of hex values vs. RGBA values and when it's best to use which.
Related StackOverflow Posts:
Difference between hex colour, RGB, & RGBA and when should each they be used?
Explains the technical purpose of the two options but doesn't address the UX purposes, in particular using which one for base colours in a core framework of colour themes
Use HEX or RGBA
Likewise, although with it being an older post, also talks about browser support. My project requires users to use newer browsers, so I'm more interested in the benefits of both solutions.
Hex is more traditional, but for a long time it was not possible to define an alpha channel with it.
rgba was introduced to allow people to create semitransparent colors.
However, an addition to the CSS spec means that hex colors can include an alpha channel, when they have 4 or 8 characters.
So #00000055 is the same as to rgba(0,0,0,0.33). #0005 is similar.
So rgba used to be required for alpha blending, but it is no longer necessary. It doesn't matter which one you use.
Okay, I built a fiddle to study these ideas in context: https://jsfiddle.net/marniea/1q9adxo6/
It shows how the same colour expressed as opaque RGB behaves differently when expressed in RGBA. I'm using RGBA and RGB (rather than HEX) since the discussion is really about using partially-transparent color in place of opaque.
The colour values used:
RGB: rgb(128, 128, 128)
RGBA: rgba(0, 0, 0, .54)
The colours look the same on a white background (Example 1).
RGBA says, “mix 54% of my colour” – which is black in this case – “with whatever the background is”.
So for example 2, the RBGA value mixes 54% of its black with the grey background. 54% black + grey is darker than 54% black + white. The RGB value looks the same as in example 1. Because it's nearly the same colour as the background grey, so we don’t see it in example 2.
For example 3, it mixes 54% of its black with the black background. 54% black + black is just black, which is why you don’t see the RGBA text or box in example 3.
The RGB colour is predictable; it always looks the same. The RGBA colours are not so predictable. RGBA sometimes adapts better (as in example 2) and sometimes doesn’t (as in example 3).
If we are looking at defining a known number of app skins, defining one set of colours using RGBA and hoping they adapt to the background colours leaves things to chance (or a lot of testing, especially to check contrast ratios). I feel it's best to know ahead of time what the colours will be every time, regardless of background colour. If the colours are meant to be opaque, why not make them?
The only advantage I can see with RGBA so far is to ensure an exact colour gradient / saturation scale. But the primary use case is using the colours; defining the colours is the secondary use case.
So until I come across an argument to the contrary, I feel opaque colours (i.e., RGB or hex) are best used for opaque use cases.
Often I get a sketch file where a designer put the opacity on a colored text. This in itself isn't that awful thing, since I can just use rgba for color on my text in css.
But the problem is that this is a taxing function, and there really is no need for text to be opaque unless there is an image underneath it.
I can use a tool like http://marcodiiga.github.io/rgba-to-rgb-conversion
But I'd like to instruct the designers not to do that in the future. Now, knowing them, they probably won't use the above link, so I was wondering if there is a way in sketch to set the opacity of the text and just 'convert' it to rgb or hex color, depending on the background?
This would make my job a bit faster and easier :)
Is there a functionality like that in sketch?
normally #AARRGGBB is used for hex color with opacity. When you set AA to FF its fully opaque. But in some applications there may be a control that restricts number of digits when you enter hex color (probably there is one and limited to 6).
I didn't find anything easier than using a color picker to sample the value of the rasterized pixel. I use Affinity Designer but there are many other options out there.
I'm working with SVG sprites to create an icon system. I'm using gulp-svg-sprites to generate the sprites and am using the symbol option so when calling each SVG, I can use something as simple as:
<svg class="icon"><use xlink:href="sprite/svg/symbols.svg#icon-alert"></use></svg>
With fill: currentColor I'm able to also control the color of each icon, which again, is great.
The issue comes when I need to use these icons as a background element. I'm aware that you cannot use xlink:href to grab a specific icon from the sprite -- and am okay just grabbing the individual SVG when needed here, but the issue comes when I need to change the fill/color of that SVG that is referenced as a background image.
Things like -webkit-background-clip: text; work great for applying a different background and cutting off based on the text, but I need a solid color overlay that can be switched out on demand.
Is there a simple SVG filter I can attach onto this background (referenced as an SVG) that I can bolt-onto this? Would appreciate any help. Thanks!
Update
Here is a working example. BUT, I'm looking for something that could also work in IE9, which is why I was hoping for something else.
Wrote an article using a LESS function I wrote that edits the SVG object once its pulled in with LESS http://zslabs.com/articles/svg-background-fill
You can apply a filter to change the color of the entire element (including the background) - but in most cases you cannot selectively apply it to just the background as you want to. If you had an exact example online with the exact cases you're trying to cover - there may be some very specific solutions for your exact case (eg. if your foreground is all black-stroked, then a color matrix filter could possibly work.))
To set a semi-transparent background I use:
background-color: rgba(0, 120, 180, 0.8);
For IE, which doesn't support rgba I use a 1x1 png with the same color:
background-image: url(http://i53.tinypic.com/2mgtu9e.png);
(demo here)
Question 1
I know that there is another method for IE which uses filters.
Is this method considered as W3C compliant ?
Question 2
Say I combine 20 1x1 png images into a single sprite.
How could I use this sprite to set an element's background color according to the 7th pixel in the sprite ?
As others have said, no IE filters are not W3C compliant. They also incur significant overhead and have performance ramifications. Unless I am mistaken when a filter is applied to an HTML element it will be applied to everything in that element including its text. So you'd end up with semi-transparent text too. There may be a way to keep that from happening but I haven't come across it. Also there are times when IE filters don't play well with semi-transparent PNGs as this article mentions.
Speaking of PNGs, the idea of using a sprite really only works if you have a specific height or width or both. So this really won't work for what you need, like Merianos Nikos said. Also tiling a 1x1 image is a really terrible idea. I say this because there are performance issues when you do that, especially with IE6. Though IE6 may not be a concern for this, tiling such a small image still causes a performance hit since the browser must draw and redraw each and every one. See this StackOverflow entry.
For this situation I would use something like Modernizr which will make rgba available to use in browsers that don't support rgba. After customizing a download for just rgba and a few other things (HTML5 shim, yepnope, and adding CSS classes) the download was 6.1kb. Not a huge hit to make development easier.
Update I misspoke when I said that Modernizr enables rgba. It doesn't do that but it will let you know that rgba is enabled in the browser. It will add classes to the html tag that tells you the abilities of the browser.
Answer #1
This method is not W3C compliant. The way that Internet Explorer uses Filters is not the regular one. Filters are not supported at all from the W3C specification. The filters are Internet Explorer plugins.
Answer #2
There is no way to use them. In sprites you can only use images that are not repeated in the background.
In example: Say that you have the following sprite
x y z
r t s
u v a
if you have now an area that you like to use as a background the image t from your sprite. You can set the very top left side of the div to display the t image, but then when you need to reapeat the background you will start again from x. That means that you will have repeated all the images from the sprite.
Question 1: CSS3please. The box-gradient shows how to use the MS-filter.
To check if valid: W3C CSS validator . I'm getting errors, so I guess it's not considered valid CSS