I have multiple divs, each of the same class. The class is semi transparent (by setting opacity: 0.2;).
The layout is pretty complex, and occasionally those divs will overlap.
The problem is that wherever they are overlapping the opacity adds up, so the overlapped area is darker. The more elements overlap, the darker it gets. See this image for an explanation:
(red and blue borders were added for clarity, they are not present in the real thing)
I'm looking for a way to prevent this, so that the color in the overlapping region does not further darken. Is there a way to do that? Some fancy "mix mode" of sorts?
Ideally, it could all be done in CSS.
Here is an example in JSfiddle: https://jsfiddle.net/begkw16d/
Would appreciate any help. Thank you very much...
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 have a scrollable div containing a table and I want the last three visible rows to become less and less clear, slowly fading into the background color. The effect would be much like this (http://css-tricks.com/examples/FadeOutBottom/), but with a table. Initially I was selecting the last three visible rows of the div and applying lowering degrees of opacity to the elements. This worked, but required me to constantly reassess which were the last three rows as scrolling occurred; mayhem.
My next idea was to apply a div over the table that would mimic the background of the page and be (initially) 100% transparent but then slowly decrease transparency as it applied the mimicked background, effectively hiding the rows more and more. But my background isn't a constant color, it's a gradient that goes from color A to color B and I am having large issues mimicking that background without creating it in the exact same way (height 100% of page, gradient from color A to color B). If I could do that but then also say, hey div with the exact coloring of my background, I would like you to initially be 100% transparent so the actual background is seen at the top of the div but the bottom x percent of your body I'd like to have an decreased transparency level so your color is applied over the underlying table thus dimming the text...well, that'd be perfect.
I initially thought going from transparent to gradient B would accomplish what I was looking for but no dice; in retrospect it's unsurprising that the steps of colors to go from color A to color B are not the same steps of color that occur when going from transparent to color B.
Working on a quick jFiddle now, but thought I'd put this out there in case there was a simple CSS component or technique I had overlooked.
I'd suggest looking into css masks. I've thrown together a quick JSFiddle that shows how a mask might help you accomplish what you're looking for:
ie:
table {
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0.00, rgba(0,0,0,1)),
color-stop(0.70, rgba(0,0,0,1)),
color-stop(1.00, rgba(0,0,0,0)));
}
http://jsfiddle.net/Fp7dE/
You can learn more about masks here:
http://css-tricks.com/webkit-image-wipes/
I like sprites, they are extremely helpful to my overall needs, however. I am trying to figure out if there is a means of using a sprite image as a background image for an element thats 100% wide, but the background part of the sprite I want to apply is 1px wide. Where as the sprite is currently 100px wide and about 180px high currently. Is this even possible/legal? If so how would I do that? Or do I have to stick with the idea of a 1px by 120px image thats independent of the sprite to span a background the way I want to on a given element?
Note I thought about doing just the 0 0 position of the sprite as the BG I want but my issue with that is I have a similar portion of the sprite I want to use as a rollover effect for some areas
For a repeating background image you'd need to use an image that's independent of the sprite; as there is, to my knowledge, no way of specifying a particular segment of a sprite to repeat across the background, so you'd end up simply showing, and repeating, the entirety of the sprite.
And it seems, certainly in Chromium 19, that using background-size isn't the answer.
I think you might be able to achieve this through a pseudo background crop. There's a usful article here: http://nicolasgallagher.com/css-background-image-hacks/ that might help.
However, I'm skeptical that this can be used as a repeating background image. You might be able to stretch it (background-size:100%) but I'm not sure about that.
So it makes 3 divs placed inside one div. For left and right, clip your sprite as you would usually do. For middle, make your sprite LONG ENOUGH so that any middle part of the button is filled with the long portion of the sprite.
Never ask questions, use your imagination.
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 am currently making a website here. And to the right is a postcode search div. The top corner of that needs to be rounded.
I am using images to round the corners. I do not want to use another method unless it fully supports all browsers, up until IE7.
I have already done this on the navigation (to the left. only top right and bottom left corners). But I cannot seem to get it to work for the top left corner. Please help. This may be a silly little mistake I have made.
If the "postcode search div" is fixed width and height (as it appears to be), the simplest solution would just be to do the entire thing as an image, and set that as the background:
(yes, the images are the correct size and colour)
The problem is that your background color is covering your image. If you remove the background-color property, you will see the corner image.
Take your image http://molossi.psm2.co.uk/assets/images/li-bg-tl.png and add in the grey background with it. Set the width and height of the entire grey background element to 225x120 or whatever you want and you will be good to go. Basically move from it being just the corner image piece to the full image.
If you don't want to do it this way then take your corner image and make it 225px in length with the grey extending out all the way.
There are two methods for creating round corners without using border-radius (CSS3) and without using images:
Use four small divs of height: 1px and progressively increasing widths that create the round corner illusion. This is probably the better option. For a code sample, see the following site:
http://webdesign.about.com/od/css/a/aa072406.htm
Use an HTA file and browser hacks. I've never tried this personally. For code samples and techniques, see the following site
http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
For older browser support using images is the best and probably only option. If you don't mind lower levels of browser support CSS3 Rounded Corners (in the CSS3 Boarders page of W3Schools) may have your answer.