I am trying to confine a background to a specific shape.
Example: I have a div or img tag that is square. Then I want part of it (the corners) to be transparent, and part of it (a diamond in the middle) to be a certain color (with background-color) or a certain image (with background-image).
I can simulate this by making a white png file that has a transparent diamond in the center, and setting the background of the image to what I want so the background shows through only in the diamond shape.
I want to get rid of the white part that shows around the edges (for example, have a transparent png with a white diamond in the center), but then the background will only show through on the edges. So basically, I want the background on the image to show where it isn't transparent, and not where it is transparent. I am almost certain this has to done with images, but if you have another option, let me know.
Here is an example http://jsfiddle.net/r7jxm/. You can see that all the images have white edges where it should be transparent, so the images below don't show through. I still need to be able to change the background colors in the end with css.
It doesn't have the best support, but CSS masks do exist.
They sound like they would achieve what you want.
Related
For the fun, I want to try to replicate the design from the Valorant loading map screen, and I am having the problem to replicate triangle on certain section. I will provide you the image so you can of course see what is the issue here. I tried using :before but I do not know how to make certain parts of the triangle transparent like on the image. I think of having two separate parts which will be separated so that always in the middle I have transparent space.
Image
I am talking about the triangle in the middle of this cool component, not the rhombus above it
I'm trying to animate a radial wipe (not a pie/circling effect) in which a bg color is sort of erased by a transparent round element scaling from 0 to 100% of viewport, revealing a bg image. Perhaps the two images will clarify.
Thanks in advance for any suggestions,
Whiskey T.
Just in case someone finds this question and wants to know how we pulled it off:
My hat's off to the designer who suggested using an svg element with the baby blue background color, and a donut hole cut out of the center. I discovered the need therefore to add a mask element to cover the hole, which, via css transitions, is crossfaded with the darker blue circle and timed carefully so that the hole is never exposed and thus the background image is not exposed. Finally the donut svg is transitioned via scale to several times the default size (100%, 100%) so that it expands outward, exposing the bg image.
I have a navigational div (div A) running horizontally with a div (div B) z-indexed above it that will contain a cross fading series of background images using jquery to set background-image property every 5 seconds. However, I need the section in red to be "masked" out over the background image of the div while the blue sections need to be transparent through to the lower div (div A). The masking/clipping would be applied to and be the same no matter which background image is displayed.
Because the end user may upload new images to use as the cycling background image there wont be an ability to edit the images through an image editor to create the masking and transparency so....
Can this be accomplished through some combination of HTML 5 masking/clipping functions being applied to the background-images or containing div (div B)? If so can someone show me example where masking/clipping have both been applied to an image?
If not, can someone advise a different method other than image editing before upload?
To clarify: You want every red pixel to become transparent?
Here's an explanation of how to do it and a Demo: http://jsfiddle.net/m1erickson/2oun9t1x/
draw the background image on the canvas.
make a "masking" image containing only the red pixels you want to use as a mask.
set compositing to 'destination-out' which will cause any existing pixels to be made transparent where they intersect new drawings: context.globalCompositeOperation='destination-out'.
draw the red image to "erase" the image only where it intersects those red pixels.
Background image (left) and Mask (right):
Background image masked using compositing:
I have a div that contains a background image of size 64x64. I would like to give this div a circular shadow or radial background when the user hover's over the div with the mouse.
If I simply give the div a box shadow, the shadow is cast around in a square shape. If I make the div have a radius, then I will need to make my div bigger than 64x64 so that it doesn't crop?
Have a look at at the following example that illustrates what I am trying to describe:
http://jsfiddle.net/rNeaZ/2/
The 4th example (shown in link above) in particular doesn't suit what I am after because:
it's size is much larger than my 64x64 image
the image looks to have a circular border now, which is not what I want; I am after a circular shadow or background behind it
It will probably just be easier and more effective and more efficient to add a nice radial shadow to an image sprite and change the location of the background image on hover.
The simplest solution would be to add an appropriate background-color, but that would only work when you need an offset of 0 0, like your example.
The more general case would be to create a pseudo-element and apply the shadow and background color to that. I can describe this in more detail if the first idea doesn't apply to your case.
I'm setting up a design that uses some gradients, and of course that causes issues. What I want is for my one background image with the vertical gradient to be the main background, but then if the content extends and pushes the div out, I want a different sliver image to repeat on the bottom. Is it possible to do something like this?
The closest you can get is using a background color with your background image. Then set the image to non repeating. Then the color will be the background for the parts of the div where the backgound image is not.