Here is the end result of this experiment Kitty Corners. Continue on to read my blabber.
As developers, we’re constantly trying to “level-up”. Becoming a better developer is all about writing code. A goofy, but fun exercise I do from time to time involves browsing dribbble. I browse some of the great pieces of art on there and try to emulate it with CSS. I came across a piece by Larry Chen called Photo Border Style. I figured I could whip up that border treatment pretty easily.
I knew CSS pseudo elements would be necessary. I had seen a couple of blog posts showing how to manipulate css borders to make triangles (like this one). I figured I would just toss a :before and :after pseudo element on the image and get a nice start on my border treatment.
Snag #1
Now, I messed with that pseudo element for a while and nothing was working. I thought I was going crazy. I wasn’t, pseudo elements can’t be used on image tags?!? Why? :before and :after only work with non-replaced elements. A replaced element is any element whose appearance and dimensions are defined by an external resource. So, yup, an img falls under this category. So my first idea is a no go… moving on.
Once I found out I couldn’t use the pseudo elements on the img tags, I plopped in some span tags and added my pseudo elements. I had a white triangle overlapping the top left and bottom right corners. I was getting somewhere.
Level +1
The next task is getting the hairline drop shadows on the corner treatments. After thinking a bit, I had an easy solution. I would just add another triangle underneath it. This would be a tad bigger and blacker, but with some opacity. It turned out, the idea worked nicely.
Level +1
As you can see, the CSS is pretty messy. Lots of repetition, no inheritance, it was mostly just idea barf. Which is ok, but not final. More importantly, the damn thing doesn’t scale…
Snag #2 - Y U NO SCALE BRO?
Adding the image to scale and keep the border treatment wasn’t too bad, just change the display property on the container div
1
| |
Now comes the markup and the CSS clean up. Here’s where I ended up.
Level +1 - FINISH
I changed a few elements around. I added a div to center the image in the fiddle (totally not needed). Had one div with the psuedo elements for the top left and bottom right corner treatment, as well as a “shadow” element for each. In the end, 2 divs, and an img tag did the trick.
