{"id":16,"date":"2015-05-18T20:12:51","date_gmt":"2015-05-19T01:12:51","guid":{"rendered":"http:\/\/theshrouded.com\/wp\/?p=16"},"modified":"2022-08-22T20:20:53","modified_gmt":"2022-08-23T01:20:53","slug":"html5-css-crossview","status":"publish","type":"post","link":"https:\/\/theshrouded.com\/wp\/?p=16","title":{"rendered":"HTML5 CSS Crossview"},"content":{"rendered":"\n

A couple weeks ago while browsing reddit I stumbled across a very cool Android UI button that I thought was genius. https:\/\/github.com\/cdflynn\/crossview <\/a> In particular this element would be great for lists where you want to add or remove options, like a choose your toppings list for a burger (e.g. add or remove toppings).<\/p>\n\n\n\n

I thought that this would be a great time to learn about CSS transitions and make a version of the element in HTML5 and CSS with as little JavaScript as I possibly could. My first few attempts managed to get the cross to appear and then when applying<\/p>\n\n\n

\ntranform: rotate(45deg);\n<\/pre><\/div>\n\n\n
I got a nasty little issue because the center of the 2 elements that I was rotating were in different places and it just didn’t work at all. I contacted my CSS guru friend over at scottlittle.me<\/a> and asked for some advice. He pointed me towards using a label and attaching it to a checkbox to handle the toggle states. To handle the centering of the cross we figured out a method of using ::before and ::after pseudo elements.<\/p>\n\n\n\n
It took me a little while to work out the details but I managed to come up with something that worked well. Using a combination of the label, :before and :after pseudo selectors in addition to a :checked selector I was able to make the whole element work without any JavaScript. An added bonus to the methods I found was that it scales very well simply by changing the width and height of the label. I was hoping to be able to wrap the whole thing up in some easy to use package but when I looked at Web Components support on Can I Use<\/a>, things looked quite abysmal. I may eventually look to wrap this up as a Polymer Element once Polymer hits 1.0 (breaking changes are expected between 0.9 and 1.0).<\/p>\n\n\n\n
Here is the final product:\n
\n