If anyone can recall, about a month or so I posted up a design for my new portfolio which I’ve just started building now I’ve got some free time, the site is very CSS3 intensive. Taking advantage of the rotate and skew features that the new transform declaration provides. Along with gradients (Which I was inquiring about earlier today).
Due to the rotate and skew features not being fully available in all browsers I decided to not only make it viewable without them active but also allow users the option to turn these features on and off for accessibility purposes. I’ve been building the site in html working my way to the bottom of the page where I’ve come across an issue, the page uses white ribbon banners to separate sections of the page with the one right at the top being cut off and the one at the bottom being cut off to. I’ve managed to get the top one to cut off using minus margin values but I can’t work out a way to make the bottom one cut off in the same way as everything I try just extends the page height.
I would just make a image the exact shape of what the ribbon would look like and stick that at the bottom but when the user turns off the transforms it needs to be a full width banner again so it makes that cheaty option impossible. Any help would be greatly appreciated. And for those who aren’t entirely sure what I’m trying to do here’s a diagram, my apologies if it’s not the best diagram in the world but is should help:
http://i29.photobucket.com/albums/c265/seph-53/diagram_zps47062904.png
And here’s the site preview:
http://jamiepates.co.uk/PortPreview/
You can remove the rotations by deleting the transform stylesheet node in Web inspector of firebug.
