5th
Two great tastes that taste great together!
I speak, of course, of transparency and clipping!
Weeks ago it seems, I promised a CSS-focused entry. I may be tardy (or anyway, slow to deliver), but here we are! What we have here is some relatively simple transparency-making and image clipping achieved via CSS, although without using the actual clipping attribute (mostly because it was a right pain to do, very confusing).
What you see here is: the same image & text with two executions using the same code with just 1 difference for the 2nd execution.
Seeing right through you
First, the transparency. Sure, you could use an image — say a PNG — but I like this method with the background colour. If I’m feeling frisky at a later date: I can change the colour or shape or size only using Terminal, without having to upload new images, etc.
I’m using browser-specific properties (noted in “Easy cross-browser transparency”) for the effect. The way I got around child elements inheriting the opacity of my see-thru block was to make the see-thru block an empty div. Not everyone is down with empty elements and generally speaking: I’m not. However, this seems to be such a specific application as to be an unobtrusive amount of extra code.
Just a bit off the sides, please
And on to clipping. There is, of course, the actual clipping property. I don’t happen to like it, with all its having to find coordinates from the upper left corner and blah blah. No, thanks.
Instead: pick the size (300 x 300px, for example), off-set the image inside of it with negative margins. Done and done.
I mentioned earlier that the clipped version only has (or needs) 1 difference and for this method, that difference is in the parent container (I called it "clipped-photo"). From the parent container, you cascade your clipped updates downward with nested styles.
What’s that you say?
Finally, the text! In this method, I place the empty transparent div and the content/message div via absolute positioning (inside the relatively positioned parent container). The 2 divs are the same size and in the same position.
That’s pretty much it! Have another look at the final results. (: