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/
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 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...
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 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.
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.