Creating an angled split feature area with CSS transforms
For an upcoming project I’m working on, I needed to have a feature area that showcased two things equally. The easy option would have been to show them in boxes, either side by side or one on top of the other. I decided instead to try my hand at a comic book look, where the cells are split diagonally. I also wanted to have a hover effect, so that each cell grew bigger or smaller depending on which cell was hovered.
CSS has traditionally not been good at things that are not square (or rounded with border-radius), but it is possible with minimal extra markup. I was speaking to Simurai and he suggested using skew to skew the box, then skew the contents back again. That idea worked and formed the basis of the technique, along with a bunch of other fiddling.
box-sizing: border-box; the results are in
A week has passed since I created a poll on the use of box-sizing: border-box. In that time 256 people filled out the survey. The results so far are as follows:
Sizing Boxes (Back to the Future)
The way we are building web sites is fundamentally changing. The XHTML (Strict if we took pride in our work) has given way to the more loose HTML5. Image slicing and dicing, and wrapper divs are starting to be replaced with lean (perhaps semantic if we’re lucky) HTML and CSS3 effects such as border-radius, box-shadow and gradients. Elastic layouts have metamorphosed into responsive design with Media Queries. JavaScript–no longer considered a toy–has earned its place at the table, forming a triumvirate with HTML and CSS. We may be at the cusp of a real tool for layout with flexbox. Perhaps even the venerable em unit will fall out of favour, replaced with the more predictable rem, and flexible vh and vw units.
What are CSS Shaders?
Adobe announced a proposal for CSS Shaders at Adobe Max two days ago. This was backed by both Opera and Apple, and the spec will be developed by the FX Task Force at the W3C. For those of you who are not aware, the FX task force is an elite band of ninjas’s chosen from the ranks of the CSS and SVG Working Groups to work on specs common to both technologies. Their most notable work so far is perhaps the Filters Effects 1.0 spec, but they’re also working on a common model for Transforms and Animations.
So what exactly is the CSS Shaders proposal, and how does it relate to the existing proposals and technologies? First I will introduce you to the required terminology (you can skip that section if you are already into computer graphics), then I will dig into the proposal and see what it can do. I’m basing this off the spec as I don’t have a build to play with.
What’s slated for CSS4 Selectors?
The CSS Working Group recently published the first working draft of CSS4 Selectors. “Wait…CSS 4? I thought CSS3 was still incomplete” you might ask. The spec process changed after CSS2.1. Instead of one monolithic spec, CSS3 was broken down into smaller bite sized chunks. Each chunk or module graduate to the Recommendation stage independently when they’re ready. As each module doesn’t depend on each other (typically. Some related modules might have dependancies, such as CSS3 Selectors on CSS Namespaces) work can start on the next level of the module–if there is demand for a new version–after the current level reaches REC. Therefor work on CSS4 specs will go on in parallel with CSS3 modules. The selectors specification is one such module where there is demand for some new features .
