I have 2 divs stacked. Means 1 div is on another div.
Both div has transparent background color.
So, when div is shown, both div in lower also shows because upper div is transparent.
If there is any way to make upper or lower div such that only upper div's shows with transparent background.
Means if there is image element stacked below lower div, image should be shown because uppder div is transparent but not color shows should be sum of both div's transparent colors.
So, current
Sadly in CSS there is no way to make a daughter element not inherit the transparency setting of the parent element. The best thing to do is to make div with the transparency on, then make a similar div of the same dimensions and what not and then position it, absolutely, over the transparent div. Then anything you want to remain non-transparent you can simply place in the second div.
If this doesn't make sense, reply and I'll try to make it clearer.
Mike.
Related
I am trying to get a waved vertical borders with a box-shadow like this.
I am able to get the waved vertical borders but when adding box-shadow, it overlaps the waves as the waves are not statically positioned and don't directly belong to the container's vertical borders.
Use a different div for shadow with exact or slightly fewer dimensions than that of the wavy-border div. Use position: absolute; on both divs and give the wavy-border div a higher z-index to make it appear on the top of the shadow div. Set the yellow shadow but on the shadow div as you want. This way the shadow won't interfere with the wavy border.
You may want to put both divs in the same parent div and set the parent's display to relative. If you don't the absolute nature of wavy-border and shadow divs will be based on body and not the proper position in your HTML.
You can also use filter: drop-shadow(...); as Temani Afif mentioned in the comment. When doing this, you won't need to use two different divs. You just set the drop-shadow directly on the wavy-border div. drop-shadow makes it possible to shadow exactly based on the content, instead of based on a box.
Consider the following fiddle: http://jsfiddle.net/xNSm2/
In this scenario I've got a div with a background-image of a triangle. I also have a div underneath it.
I need both of those divs to be clickable.
I cannot have the red div sit on top of the green div. Red must be underneath.
The only solution I can think of is to have the green div have a diagonal border, rather than a square one. Is this possible?
I have an image inside a div. For example's sake, let's say this div has a background-color of #000. Now, I want this image to fade from the left, to the right.
What I mean is, the first column of pixels should appear to have 100% opacity, whilst the final column of pixels should appear to have 0/1% opacity (the final column of pixels will blend in with the background of the div).
How would I do this purely in CSS? The image will always be 50x50.
you could overlay div on top of an image
and set gradient for div
http://tinkerbin.com/xXJQrgnk
Do you always know the background color of the DIV ahead of time? Is it always a solid color (not a gradient, no texture, etc)? Are your images roughly the same width? If so, I'd create a PNG that is the same color as the background, and have it fade to totally transparent at the right side. It can be any height since we'll tile it verically.
Drop the PNG over the image after you give the PNG the same height as the image and it will appear that the image is fading out into the background.
I have a navigation bar set to "fixed" positioning at the top of my web page with a transparency of 75%. I have another div that holds all of my text/content that also has a transparency of 75%. However, when the "content" div overlaps with the navigation bar, I want the overlapped area of the "content" div to not be there, so to speak. I also want there to be a tiny gap between where the "content" div and the navigation bar would overlap.
When it's scrolled up:
When it's overlapping:
In the 2nd screenshot, I want the part of the "content" div that is overlapping to go away.
to overlap.
1st div
position:absolute;
z-index:2;
2nd div to over lap the 1st div
position:absolute;
z-index:3;
z-index will make elements overlap but it must have the position
you can use fixed or relative also.
I think you could put the "content" div in a transparent "container" div that was fixed just below the navigation and 100% wide/tall. Then put overflow:auto on the "container" and overflow:hidden on the body.
The "container" div will effectively become the body of your page and all scrolling will happen within it, instead of the body. So it should then look like the "content" div disappears before it reaches the navigation while you're scrolling down.
This may or may not be practical depending on the rest of your page, but i think it might work, give or take a few other css tweaks u may need.
I got this PSD comp from a print graphic designer and I'm not sure it's doable on the web.
Please note that the blacked bordered, rounded-corner container (pictured below), already exists. There are several z-indexed divs on this page, so it's hard to figure out which one has the priority in stacking order.
As you can see, I have the two grey ribbons on top (representing a box with ribbon and an ornament) stationed on the top-left and bottom-right corners, along with two images (the smaller blue boxes i.e.: To:/From:) underneath those "ribbons" but on top of the container. The background color for the container is white. The top-left corner has to have a transparent background so that the smaller blue box will show through. Can someone tell me how position these "slanted ribbon" on this rounded corner container div? Or if this can even be done using CSS and HTML.
Simplest answer is to have two <img>'s, and have them both absolutely positioned. Position one with a top:0px; left:0px; and one with a bottom:0px; and right:0px;. Give them a high z-index to ensure they are at the top of the div. Make sure the parent div has position: relative defined.