You can see it done here http://qunitjs.com/ and broken down here http://jsfiddle.net/xMwT8/8/ *edit (http://jsfiddle.net/xMwT8/9/)
links are available
here
here
here
here
I am trying to use an image as a texture with an overlay color above or combined with the image to blend into a subtle texture. It can be done with a gradient (like in the first and second link I posted). I don't understand why it won't work with just a color (2nd link).
I think you are asking why you can't do this with a solid color like #E4E2D6. The simple explanation is that it's a solid color :)
the jsfiddle example uses rgba(255, 0, 0, 0.3) which isn't a solid color, it's a 70% transparent red (the a == 0.3 means it's only 30% opacity)
If you want to do it with something like #E4E2D6, take a look at Convert RGB to RGBA over white and convert it to rgba(87, 74, 0, 0.16) which is the same color (when displayed over white, but it's mostly transparent) and will allow the background through.
Okay, just looked at the /9 fiddle (FYI you can just change the original link instead of putting an edit like that). It seems that this doesn't work with
background: rgba( ... ), url( ... );
Why? Because you can only have multiple background images. The -webkit-linear-gradient is an image as far as the browser is concerned, so it uses both. rgba( ... ) without it is a color, so it uses the image and the color as a fallback
Related
Context:
I have a project whose colors are coming from the backend before app is mounted, I'm setting these colors to some variables and I'm using these variables to set colors for texts and buttons.
But Currently I want to have a hover version from this color (make it lighter or darker), how can I accomplish this using scss?.
For CSS hover you'd want something like:
class:hover
for the colour, you'd want to use RGBA.
try something like:
class{ color: red;}
class:hover { color: rgba(255, 0, 0, 0.5)}
In the example, the 255 value = the colour red, and the 0.5 value is the opacity. It can range from 0 to 1 with 1 being fully solid.
It would mean looking to see what your chosen colour would be in rgba though... e.g violet is (238,130,238)
Colour value is self explanatory really due to the initials of RGB, but just in case: red = first value, Green = second, Blue = third.
You can use darken(colour, percentage) or lighten() as seen below:
.class:hover {background: darken($colour, 10%)}
See https://falkus.co/2017/05/using-lighten-and-darken-in-sass/ for more info
Should you use rgba(0, 0, 0, 0) or rgba(255, 255, 255, 0) for transparency in CSS?
What are the pros and cons of each?
The last parameter to the rgba() function is the "alpha" or "opacity" parameter. If you set it to 0 it will mean "completely transparent", and the first three parameters (the red, green, and blue channels) won't matter because you won't be able to see the color anyway.
With that in mind, I would choose rgba(0, 0, 0, 0) because:
it's less typing,
it keeps a few extra bytes out of your CSS file, and
you will see an obvious problem if the alpha value changes to something undesirable.
You could avoid the rgba model altogether and use the transparent keyword instead, which according to w3.org, is equivalent to "transparent black" and should compute to rgba(0, 0, 0, 0). For example:
h1 {
background-color: transparent;
}
This saves you yet another couple bytes while your intentions of using transparency are obvious (in case one is unfamiliar with RGBA).
As of CSS3, you can use the transparent keyword for any CSS property that accepts a color.
There are two ways of storing a color with alpha. The first is exactly as you see it, with each component as-is. The second is to use pre-multiplied alpha, where the color values are multiplied by the alpha after converting it to the range 0.0-1.0; this is done to make compositing easier. Ordinarily you shouldn't notice or care which way is implemented by any particular engine, but there are corner cases where you might, for example if you tried to increase the opacity of the color. If you use rgba(0, 0, 0, 0) you are less likely to to see a difference between the two approaches.
There a small difference when u use rgba(255,255,255,a),background color becomes more and more lighter as the value of 'a' increase from 0.0 to 1.0. Where as when use rgba(0,0,0,a), the background color becomes more and more darker as the value of 'a' increases from 0.0 to 1.0.
Having said that, its clear that both (255,255,255,0) and (0,0,0,0) make background
transparent.
(255,255,255,1) would make the background completely white where as (0,0,0,1) would make background completely black.
I would recommend using rgba(255,255,255,0) because broken (newest) safari thinks that if you are using transparent or rgba(0,0,0,0) in linear-gradent you really mean gray, For more info please head to - What happens in Safari with the transparent color?
In my CSS, I defined the #error div as:
#error {
border-width:1px;
border-style:solid;
border-color: #DD3C10;
background:#FFEBE8;
/* Other settings */
}
The code above isn't mine, actually - I used the same colors as Facebook. Now, I want to do the same with the #success div, but I don't know which colors to use. I want to keep the same tint (which is, the position on the line between "full color" and "white"), but of green instead of red. How do I do it? Is there a "formula"?
You care about the L (lightness) component in the HSL representation of your color. You can find an online converter (RGB/HEX to HSL) here: little link.
HSL for #DD3C10 is 13° 86% 46%, while #FFEBE8 is 8° 100% 95%. Difference in lightness is, as you see, 49%.
Suppose your green for border is #00FF00, which is 120° 100% 50% in HSL. To calculate the new lightness component, just add 49%. Thus the green for background is 120° 100% 99% which is #FAFFFA.
There sure is an easy way. Just use the HSL colour system, instead of RGB - it's much more intuitive to use to select the desired colour, it's the colour-system of choice to use when tinting an image.
All you then have to do is express the base colour as a HSL colour, then just change the Saturation or the Luminance, while leaving the Hue the same.
E.g
borderCol = #DD3C10; (rgb) ---- hsl(13,93%,87%)
background = #FFEBE8; (rgb) --- hsl(8,9%,100%)
new
borderCol = #49DD10; (rgb) ---- hsl(103,93%,87%)
background = #f0ffe8; (rgb) --- hsl(98,9%,100%)
Is it possible to separate a photo's RGB channels in a way that if you stack the separate images on top of each other (say in an HTML page with the images being a transparent "channel" stacked on top of each other), you can see the original image the way it was?
I tried grabbing a selection from each channel and making making it a separate layer in that channel's color, but it seems like I'm missing something, or the way channels work is more complicated than I think.
The reason I ask is because if I could get this to work, then I could manipulate the opacity of each color separately using CSS and get some neat effects (without using canvas).
I've answered my own uncertainty on this:
This process cannot recreate the original image.
(Which is what JamWaffles said in short in his comment.) Here's the explanation why:
You can take a photo and split out the RGB channels from software like Photoshop.
You can manipulate those gray scale channels in such a way to add have various alpha levels of Red, Green, and Blue and save that into a .png. So far, so good.
You cannot recombine them correctly by layering in css. Assume you have some area of the photo that is white. Note the following:
Alpha Channel Combining (is additive)
Red Layer (255, 0, 0) + Green Layer (0, 255, 0) + Blue Layer (0, 0, 255) = You see RGB(255, 255, 255), i.e. white.
CSS Layer Combining (is not additive; it will cover lower layers)
Red (top) Layer (255, 0, 0) + Green (middle) Layer (0, 255, 0) + Blue (bottom) Layer (0, 0, 255) = You see RGB(255, 0, 0), i.e. only the top layer, which is red, as it covers the green and blue layers at the point where it is 100% opaque.
So until such a time as css may offer an option to have layers "add" to one another rather than "cover" one another, then such an idea is not possible. Now that is not to say you could not achieve some rather interesting effects with layered .pngimages with monochromatic colors, and later manipulating opacity of the layers further through css, you just cannot ever recreate the image through the stacking of the channels in css.
According to this specification: http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode
CSS can support color blending, it just isn't implemented on most browsers. However many
browsers support the use of color blending in the '2d' canvas context. This blog post
demonstrates the use of canvas for color blending animations and an very basic explanation of the idea. http://mackenziestarr.co.nf/blog/?p=7
I am having an image that is being used as an image map.Image map highlights as gray onclick.I want no highlightening.This doesnot happens on safari on mac.However, this happens only on ipad simulator/device.
use CSS on your images
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
it will set the highlight color to fully transparent (alpha 0) black making it not display if you will set alpha to 1.0 on the other hand you will make the highlight to fully cover the clickable area.
refer to Safari CSS Reference for more details