Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 months ago.
Improve this question
Is there a CSS way to display only intersecting elements on the screen?
Take a look at this layout, it has 4 pseudo-elements, white semi-transparent circles located in the top corners of each square. The circle in the center is a brighter color, because there are 2 semi-transparent circles in that place, they overlap each other.
The effect I'm trying to achieve is that the side circles are invisible, and only the ones that overlap each other are displayed. But it turned out to be not easy.
There are mask, mask-composite CSS properties that do something like this, but I can't get them to work.
mix-blend-mode didn't help either.
Does anyone have any ideas how this effect could be achieved?
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
how can I animate a linear gradient use as background as it is in this video: https://vimeo.com/471351659 ? I tried the technique of one gradient, whith a big background size, where I animate the background-position property, but it hasn't been a success.
How can I set a good animation with the background-position property, to have a gradient for each of the image.
It's definitely possible.
Personally, I'd take the approach of having two divs with background: cover and in an window.setInterval() callback, transitioning the opacity of the one in front (to be introduced) from zero to 1, then removing the one behind.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I'm trying to clip an image like the curve here:
I'm breaking my head over this, very much appreciated if someone could help me on the way. I'm pretty sure this can be done with css but if not, I'll probably end up using an svg image
For reference: https://css-tricks.com/clipping-masking-css/
Try to use ellipse clip-path.
clip-path: ellipse (radiusX radiusY at x y);
radiusX has to be your imageWidth*2
radiusY can be what ever you want
Afterwards set the x and y values to the bottom right corner of your image.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am writing a mobile/web app which has coloured clickable and movable circles.
I am aware of the fact that I can draw them in two ways:
A div using border-radius
A <circle> in a <svg>
Now considering the fact that with svg I can take advantage of doing cool animations, why one over the other?
It seems to depend on what you're going to do with the circles.
If they're just buttons for a link, stick with a div, But if you're going to do all sorts of animation or create a game, I might go with SVG as it's more flexible but not supported by some old or mobile browsers.
I will update this answer with more info if you answer my question comment.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
Is there a way to create a background using CSS without the image? with color, and texture?
As Dustin said, there's no "texture" CSS feature. however, if you're using CSS3, you can do some pretty cool tricks like gradients or shadowing to make some neat backgrounds.
No, there is no "texture". However if you find a color and could drop the texture then you can. I would just find a small image to repeat.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'm looking at only latest gen browsers:
IE9 (haven't really looked into this once much)
FF4
Chrome10
Safari5
iOS 3.4
Opera?
I know I can get squares and rectangles easy, circles and ellipsis with rounded borders (circles: W=H, ellipsis: W!=H). I know I can get slopes with border settings. I know how to get 1/2 and 1/4 circles, but is it possible to get:
Pie wedge (any size, at any location in the circle? ie. a 18% wedge, 20% off the horizontal)
Trapezoids, octagon, pentagon, hexagon
Stars (n pointed stars)
Any of the individual shapes in this that aren't already mentioned
I'm looking for CSS + DIV options, not <canvas> options. I'm also looking for options that use the least amount of nested divs. Here is an example that shows several shapes in one example...
Check out this page for some examples: http://css-tricks.com/examples/ShapesOfCSS/. The examples use only a single HTML element, so more would be possible with added complexity.