Happy new year!
When I was reading the description of CSS property box-shadow, I can not figure out what Interpolation section on this page means.
I googled for this but still confused.
Is it about CSS animation?
Could you please help? Thanks.
Please provide some code examples if possible.
Let me have a stab at digesting this block of nonesense
Each shadow in the list (treating none as a 0-length list) is
interpolated via the color (as color) component, and x, y, blur, and
(when appropriate) spread (as length) components.
Each shadow in the list is interpolated (various meanings but generally: mixed, blended) using the color, x, y, blur and spread values.
For each shadow, if both input shadows are or are not inset, then the
interpolated shadow must match the input shadows in that regard. If
any pair of input shadows has one inset and the other not inset, the
entire shadow list is uninterpolable.
We can only interpolate (blend, mix whatever) the same type of shadow, be it inset or not, we cannot blend an inset shadow with a non inset shadow
If the lists of shadows have different lengths, then the shorter list
is padded at the end with shadows whose color is transparent, all
lengths are 0, and whose inset (or not) matches the longer list.
I'm not sure how you would end up with a list of various lengths but from what I can garner this is saying that if we somehow end up with a list of different lengths, the browser will compensate for this by adding in transparent shadows so that it has something to interpolate (blend, mix etc) with
TL;DR
It's just explaining the steps that the browser goes through to interpolate multiple shadows and isn't related to animations from what I can see.
Don't worry about it, let the browser do it's thing!
Related
I have recently learned about rgba for setting colours in css. I am curious about the technical aspect of the transparency channel actually works.
For example, if I set the values to be rgba(15, 34, 160, 1) and rgba(15 34, 160, 0.5) for two separate headers, then they are referred to as having the same colour, but having a different opacity value. What I am wondering is whether or not these colours are actually the same. By this I mean that in terms of the light coming out the pixels, they must surely be different in order to create two different looks of headers. Does this mean that the alpha value is actually used to change the colour in some sort of specific way?
Cheers!
since you can "half see" the color of the element behind a half-transparent element, it will be mixed with that color (if the background is white, it will appear lighter, if it's black, darker, and if it's another color there will also be a mixture of the colors.
So, technically it's the same color with different transparency, but the perceived result will be a different color (unless by chance the element behind the transparent one has the same color)
An RGB value is a color, an RGBA value is a color plus transparency. When you overlay it on a colored background, it can result in a different apparent color. So yes, they are the same COLOR, but can result in different colors depending on where they are.
Check out this JSFiddle
Play with the the top CSS property that looks like this:
background-color: rgba(225, 225, 225, 0.7);
The last value there is the opacity (opposite of transparency) measured from 0 to 1. 0 is fully transparent and 1 is fully opaque. The first three values are just like a regular rgb() CSS property.
By setting an RGBA color value. You are really just setting the color and a separate opacity value. This could be accomplished by setting the color with RGB and then the opacity separately with opacity, but RGBA combines the two into a single function. Using RGBA is shorter, but setting RGBA and then opacity separately allows you control over the values separately.
So, your two examples are setting the same value for color, but applying two different levels of opacity to that color.
In the Spark BorderContainer component the border sides and corner radius styles were not copied over from the halo component set (see here).
Specifically:
borderSides (left, top, bottom, right)
cornerRadius(TL/TR/BL/BR)
borderThickness(Left/Right/Top/Bottom) * optional
backgroundAttachment (fixed, scroll) * optional
I've been trying to add them manually but I'm having some difficulty.
I've brought over some code from the HaloBorder.as skin and it is sortof working except it is appearing behind the background fill.
It's a lot of code so I pasted it here.
BTW That code was my first approach. But it looks like I could use the insetPath that is already there to draw border. That would be better since it allows me to set all the stroke properties but I don't know how to write path data so I'd have to learn that as well. But at this point I'd be happy to get anything working.
Update:
I found a class that has some methods for generating curved border path data. Look in spark/skins/spark/TabBarButtonSkin.mxml. You can see the code here, in the createPathData() method.
I am new to RRDtool. I generated a graph with grid(--grid-dash 1:0), a LINE(LINE1:rt#4e9a06) and I also have the area between the line and the x-axis coloured (AREA:rt#4e9a06 ). I notice the grid still shows up in the colored-area. I am wondering if there is any way to cover the grid with the colored-area.
Also, I am also wondering if there is any good-looking rrdtool samples/examples available online? Thanks.
I have no way of testing this currently, but here's what the documentation says (emphasis mine) :
[-c|--color COLORTAG#rrggbb[aa]]
Override the default colors for the standard elements of the graph.
The COLORTAG is one of BACK background, CANVAS for the background of
the actual graph, SHADEA for the left and top border, SHADEB for the
right and bottom border, GRID, MGRID for the major grid, FONT for the
color of the font, AXIS for the axis of the graph, FRAME for the line
around the color spots, and finally ARROW for the arrow head pointing
up and forward. Each color is composed out of three hexadecimal
numbers specifying its rgb color component (00 is off, FF is maximum)
of red, green and blue. Optionally you may add another hexadecimal
number specifying the transparency (FF is solid). You may set this
option several times to alter multiple defaults.
What about making an almost transparent grid with arguments like these (note the extra 7F parameter which translates to 127 in decimal):
-c MGRID#<hex triplet>7F -c GRID#<hex triplet>7F
It should still be visible in the background but be invisible (or barely noticeable) once any graph covers it.
Note that this answer from the developer of RRDTool says that the grid is always painted after the graph, so in the end you'll always have it in the foreground, your only solution is to either totally disable it or tinker with color/transparency parameters to make it invisible when covered by the graphed data.
I have a screen full of tiled/stacked triangular pieces of 2D "paper" using three.js. The objects are added at random positions/intervals and are positioned very close to each other on the z-axis so they don't stack too high.
I have the lighting exactly how I want it for the bump-map and shape shadows... but the shapes themselves have no cast shadow. This is because the objects are too close together to get the desired effect, and I don't want to mess up the current light source. Cast shadows would also be only in one direction (opposite the light source)... whereas I am attempting to get a shadow (actually an outer-glow) around the entire piece of paper.
I am therefore trying to create an outer-glow or at least find a reasonable solution to fake soft drop shadows around the entire shape. I have attached an image illustrating what I'm trying to accomplish... in essence it's like a CSS box-shadow effect.
box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.75);
Any guidance would be greatly appreciated, thanks!
tl;dr: Trying to create a outer-glow around 2D shapes in three.js
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