- This topic is empty.
December 11, 2013 at 8:05 am #158166Artem GordinskyParticipant
I am making a slider with position indicating “bullets”. The issue is that they should look like holes in the parent’s background color or image. Does anybody have any idea how you could make something like this? The background is either RGBA or an image. Browser support doesn’t matter.December 11, 2013 at 8:17 am #158168Paulie_DMember
Basically…you can’t do this with CSS as the ‘holes’ would individual elements within a ‘white’ parent’ If the child elements have no background the parent bg will show through.
Unfortunately, in general, styling a child element will not affect the styling of the parent. CSS just doesn’t work that way.
A PNG bg image (or images)would be the best option but the implementation will depend on your exact requirements.December 11, 2013 at 10:53 am #158189paulobParticipant
It can be done (sort of) but not in any usable way apart from a CSS trick.
The holes are made by using a fixed positioned background which just overlays the original image on top of the gradient and creates the illusion of a hole.
A fixed positioned image only appears if the element is over the space where the image is placed (from the viewport) so you don’t have to specify individual positions for the holes because they will just show the relevant part automatically.
However it all goes to pot when the page scrolls so is of no use other than an example. :)
You will have to do what Paulie_D suggests above and overlay an image of the background in the correct spot or use a png image with holes already cut out.December 11, 2013 at 12:58 pm #158201paulobParticipant
If holes can be drawn within a surface that is not too big, you may use box-shadow : http://codepen.io/gc-nomade/pen/GHqtd
Nice :) (clever technique but a little fiddly)December 13, 2013 at 6:34 pm #158303Artem GordinskyParticipant
After all, I ended up going with PNG, as it is the easiest way.
Thank you all for your help and interesting solutions, I really appreciate it!
- The forum ‘CSS’ is closed to new topics and replies.