Not Clickable

[psanders]

Has anyone seen this page?

I have, and I like the effect.

Has anyone seen the ":after"?

I have, and it will make it impossible to highlight, click, etc. any text in the element.

Is there a work-around?

Also, where can I find tutorials on making those? All I can find are automatic calculators that do the job for you.

 

[essellar]

By "making those", do you mean the CSS gradients? The generators (like the ColorZilla Ultimate CSS Gradient Editor) will make your life so-o-o much easier that it's not really worth anyone's while to do it by hand. If you insist, though, the syntax for each of the gradient types (and you'll need to use four of them if you want to support IE, in addition to the fallback) is pretty much self-explanatory. There's a good overview here.

As for the :after getting in the way... yes, it does. It's higher in the z-index than the image, link or text that lies underneath it, and it has to be for the effect to work at all. You could, I suppose, duplicate the content (other than images) over top of the glass effect, but that would need to be done using either JavaScript or extra markup. (If you duplicate text, it would have to be transparent text on a transparent background or the effect would be ruined. You can create links around spaces to get clickable but invisible links.)