CSS Flexible Box With Four Custom Corners
This is not that revolutionary, considering that Roger Johansson created the flexible box technique sometime ago. However, I guess what’s new is I’ve added my own little twist to this technique. My flexible box has four custom corners, instead of two custom corners. This might bend the mind a bit, but having a box with four corners that are not alike is actually rather difficult. It, well, complicates how the technique is implemented.
If you look at my example you will see that all four corners of my box are different. It’s really the drop shadow on the box that dictated the four distinct corners required to create this particular style of box.
Also, while the technique is not original I would like to think that I may have made the markup slightly more semantical by adding the h2 element to the box for the top portion. In addition, I believe I also decreased the amount of markup required. Check out the example and if you like, you may marvel at the adjustable box with flexible heights and widths. (To marvel you must adjust your browser window.)
If the mouse pointer changes to a hand when you roll-over an image associated with a story the image upon clicking either links to enlarged version of the image or a website associated with the image.
I’m too lazy to do so, but have you done any browser testing? Any foreseeable problems?
A sweet solution either way. I wish I would have had this about a month ago.
I only checked it in IE 3. So, should be pretty solid.
My site has no spam or popups or google ads.I think it is on of the best I’ve seen, the dom corners using a tranparent gif is pretty good too, this example here though is plain excellent, great!
Ricardo, Thanks for the accolades.
Thanks. Simple and good. I didn’t use this type of boxes on my sites, because I tought it is hard.
Interesting