4 ms·
Sliding door effects using CSS
- troels 14y agoNot to confuse with "Sliding Doors of CSS" [1] - Had me confused for a moment there. [1] http://www.alistapart.com/articles/slidingdoors/ http://www.alistapart.com/articles/slidingdoors/
- michaelmior 14y agoI was thinking the same thing and I was shocked at first to see the link wasn't pointing to ALA.
- thefreshteapot 14y agoVery nice effect. Very very smooth on Firefox Aurora with plenty of ram. Is it possible to make this CSS effect work on the iphone? Is it a matter of tweaking the CSS or is it due to the limitation of the iOS Browser? Im curious of how smooth it looks on the iPhone. Would happily have checked a different mobile... but I dont have one of those.
- spobo 14y agoThe door is just a border being resized with a transition. Borders can't be styled that well. So this effect is neat but not very usable imo.
- go35 14y agoWhy not use pseudo elements? http://codepen.io/anon/pen/dpceK http://codepen.io/anon/pen/dpceK edit: actually looks like it doesn't work in chrome. Anyone know why?
- lloeki 14y agoYou beat me to it. I'd say it's WebKit — not just Chrome — since it doesn't work with Safari 6 either.
- stan_rogers 14y agoWorks for me in Chrome (22.0.1229.94 on Win7). There's nothing in the CSS to prevent it from working in Webkit.
- SimHacker 14y agoAnd just what is the point of not using JavaScript? Are there browsers that support the latest CSS features but don't support JavaScript? Are there people who turn off JavaScript but expect animations to work?
- lloeki 14y agoThings like GPU acceleration come to mind, and also having the visual style where it's actually relevant: in the stylesheet.
- Evbn 14y agoThe edges don't align on Android, the image peeks through.