My web page contains with a background image and a tranparent card-panel on top of it. Is it possible to only darken the background image while keeping the brightness of the area under the transparent card panel the same?
depends on how the position and the shape of card you usually can. What I should do is:
-- create a pseudo element for the HTML element having the background image
-- stretch the pseudo element out to fit the whole area of the parent element
-- make sure that the pseudo element stay under the parent content (the card) in your case
-- Make the pseudo element look darker by adding a background to it, using linear-gradient.
By using linear-gradient, you can control which part of the background image look darker than the other part, the part which you don't want to look darker should have linear-gradient value as transparent. This technique will work fine most of the time for normal shape/position however, it has its own limit. I leave it for you to research how to use them.
In case you are not used to these terms and techniques, I put a few links below:
Pseudo element:
https://www.w3schools.com/css/css3_gradients.asp
Linear Gradient as background:
https://www.w3schools.com/css/css3_gradients.asp
Is it possible to fade the bottom of a background image to transparent? Would I specify background-image and linear-gradient to achieve this?
Thanks!
Not exactly in the way you describe, but you can consider some possibilities to reach the same effect:
Edit the image so that the transparency gradient is part of the image. If the gradient will always be the same and we are talking about a single image, you should do this
Instead of fading the image over the background, put the 'background' color over the image and set a linear gradient on that (in another div or 2nd background in the same container)
You can check out fading css clipping masks, see the Harry Potter example at https://css-tricks.com/clipping-masking-css/ but I am not sure about browser support.
It is also possible to create the fading clipping mask inside an SVG (so the SVG contains a link to the image file and has a clipping mask) I would guess this is more widely supported than the above option
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 need to create this layout and I'd like to do as much of it as possible with CSS, rather than using images and whatever.
As such, how can I do this in CSS? (if at all?)
As you can see, there is the image behind, with the button overlaid with padding. The bit that I'm struggling with is creating the curves on the IMAGE above and to the left of the button and bottom to the right of the button (I've pointed them out on the pic below).
Any help would be great.
Thanks
I know just enough CSS to be dangerous so I can't detail every step, but I think you can approach it like this:
Split the background image into two separate images both at a z-index of 0 at the height of the top of the grey box. I think you can use two div's that reference the same original image with different offsets (similar to CSS Sprites) but I don't know the details of how to do that. The left edge of the lower div would start where the grey box ends. Round the lower-left corner of each "image" div.
Add the grey box at a z-index of 1 with appropriate rounding, and then the blue box at a z-index of 2, again with appropriate rounding.
The background of the block element containing all of this would also have to be grey to match the grey border and properly fill in grey where your right-most arrow is pointing.
You don't have to split your image at all, only the container divs.
Let me detail a bit:
You can have your image set as a background image instead of putting it in a src attribute of an img tag. This technique is most commonly used when working with CSS sprites.
So, if you have you uppermost div at a constant width and height, if you try to apply the background image in it, you'll see it fits very nice.
On the bottom, you have two divs or whatever block element you'll like, just be sure to put fixed width and height, so the background will be applied and you will be able to actually see it.
Then all you have to do is fiddle with css background-position to adjust the SE chunk of image.
I'll be putting a small demo together to better illustrate the idea.
After you have a big div at the top, and two smaller at the bottom, where two of them share the same background-image, but with different background-position, you can safely add some css3 border-radius to fit your roundness needs. You can also use some tool like http://css3generator.com/ to add a compatibility layer on all browsers with ease.
That is very easy to realize with pure css. The page you have shown is divided into 3 divs without any margin. You only need to set the right border radius for each div.
This is a function of the background image, which is a css element if that's what you mean, but it is not a seperate attribute for a selector, at least not in standard CSS. Wait until CSS3 becomes more prevelant, then it's corner-radius or some such thing.
Well it's 3 probably 3 seperate divs, a hole "burned" into the background image, or a div being overlayed for the button.
The best way to figure out how it's done is to read the source of the page you found it on.
For convenience:
If you have a webkit based browser like chrome or safari then enable developper mode mouse over the button "right click" and choose inspect element. Otherwise you can pour over the page source until you find what you want.
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.