While I was working to de-uglify one of my GitHub pages (no time to prettify yet), I noticed that, the more fluid I made the layout, the more likely it was that the “Fork me” ribbon would cover up my most visible download buttons.
Obviously, this needs to be fixed, but according to what I could search up, there’s no general solution for clicking through the transparent parts of a PNG. However, given that the ribbon doesn’t necessarily have to be a PNG and that it’s not something like a frame with clear stuff in the center to be clicked through, there may be a specific solution.
None of the ones I’ve found are perfect, but here’s my research so far:
- This nifty little property does exactly what I want… but only with an SVG image (For PNGs, it’s an all-or-nothing deal) and it’s apparently only implemented for HTML in Webkit and Gecko-based browsers.
- This has actually been done (and since that was written, Opera 10.50 added support for it via the
-o-vendor prefix) and you could probably use a polyfill like Transformie or cssSandpaper to make it work on Internet Explorer, but Firefox 6 and below on Linux don’t anti-alias it, so it looks awful. (I haven’t tested Firefox 7+ yet)
- This is paradoxically the best and worst for graceful degradation, not to mention being a less than ideal solution.If you use
clipon your “
position: absolute” container to shave off as much whitespace as you can without noticeably affecting the shadow in the PNG, and then use large values of
border-radiuson the image itself for the bottom-left and top-right corners, you can shave off a pretty respectable amount of the clickable region… but only in Gecko-based browsers (Firefox, SeaMonkey, Fennec, etc.). It turns out that, in other rendering engines,
border-radiusis a purely visual thing.
Anyway, that’s all I’ve found so far. If anyone has any further suggestions, leave them in the comments and I’ll work them into the post with credit.