I'm trying to set up an effect like telegrams chat scrolling, where there is a global gradient positioned relative to the screen (fixed), and any element that is at the top of the screen would be a different color than the bottom of the screen.
Scrolling elements in this container would effectively change the color of each item, but the color at any position on the screen is static.
I'm wondering what is the most efficient & flexible way I can achieve this? Two options I'm evaluating personally:
Using background-attachment: fixed and having giving all items the same background-image.
Using clip-path in some manner (although I have never used this property before).
However, I'm not entirely clear on how either of these would work, or if there is a better solution.
I tried to find an animated example but could only find a static example:
Related
I want to use PNG (or SVG) background-image (background-fit : 'contain') and then dynamically change node border (based on data). Everything works except one thing: node border is rendered "centered" around the node, so half of the line is outside the node's dimensions and half is inside the node. This clips the background image (see nodes.jpg below).
nodes.jpg
As a workaround I tried to use 'background-width' and 'background-height' (set to 60%) to create something like padding in CSS but this changes the aspect ratio of the background image (it stretched the image) which I don't want.
Is there a way how to achieve the desired result with the current CSS styles in Cytoscape.js (I'm using CY 2.7.11)?
That's the way a stroke works in a canvas. Unless browsers add new API to control stroke position (inside, outside, on/mid), there's no performant way to have outer borders.
Set a padding to enlarge the outer width/height of the node without affecting its inner width/height (used for bg img sizing): http://js.cytoscape.org/#style/node-body
Just set a padding to half the border width or greater.
Is it possible via CSS to force the background-image which is repeating that it should be completely visible (not cut at the end of the container)? The container-height is flexible!
It should look like on the right side but I get a result like on the left side if the content
grows.
There are two possible ways:
avoid the background-image to overflow (I can't use background-size: contain because it's repeating)
force the container to grow gradually
Is this possible?
this is not the best solution but maybe it will help: if you can ignore IE8 and below, you can use the background-size property, it will allow you adjust the size of the images with percents so they will feet completely to what you need (and will stay in the same position at resize), then you can use the background-position property and move the images little bit for a better result. then, when you will try to resize it you will see that it stays in the same ratio on the screen but the images are getting bigger because of the percents, so make sure to upload bigger images from scratch so when the images will get bigger they will not resize above the real image size.
example: http://jsfiddle.net/fq5dkL51/2/
I would like to animate the width of a container with multiple divs using CSS3 transitions. Each child has a background and a property background-size: cover.
I prefer to use CSS3 scale rather than width for better performances. But with scale the background doesn't keep its aspect ratio.
Here is a fiddle showing the problem.
Is it possible to keep aspect ratio?
I don't think it is possible using scale.
You see, the thing is when you use width to scale the div it forces the browser to do some math for the element and an entire box model, it doeas the layout of the CSS and repaints and rerenders it entirely.
When you use scale it moves your element to a separate layer and it doesn't recalculate anything, it's just the GPU that processes your element in a very "graphical" way, so scaling 0,5 is just shrinking it visually and thats it. This is the reasony why, as you said, CSS transform is better in terms of performance - because it doesn't recalculate things, but there are some drawbacks of using those transform as you can see. Since it deosn't do the math, it cannot do background-size: cover because there is just not enaugh information to know how to paint it.
Or, let me put it this way: if you do width: 50% browser calculates the width of the element and knows it - thanks to that information it can position your background the way you want (and you want it to cover so its doing the math, taking the width, height, you background image size etc.).
If you do scale it doesn't know the width of the element in terms of CSS layout, it doesn't even care. It just knows how wide it was initialy (visually), renders the layer and than just shrinks it down without any further processing whatsoever. And since its GPU doing that, it's really really fast.
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 trying to find out why this CSS3 transition affects the parent div:
http://jsfiddle.net/BpUqt/5/
I'm trying to move an object up inside a div without changing the height of its parent div.
But what happens is that the height of the box shrinks by 1px each time the transition begins/ends (with or without border)
While I want to use three of these in a row my content beyond begins to jump up too if the user hovers over these items very quickly.
Setting an fixed height is not an option since I'm working on an responsive layout.
Instead of animating margin (which means the box height needs to be recalculated, so rounding errors on partial pixels causes movement), use transforms.
Also, remember that IE10 has transitions, so use the ms prefix as well.
Have a look at http://jsfiddle.net/BpUqt/10/
Ok, here's a simple work-around. Simply add a negative margin and it works:
http://jsfiddle.net/BpUqt/12/
Here's how it actually looks like (minimal version):
http://jsfiddle.net/sSjQt/