Sliding door effects using CSS

#1

Post by html5web » Sun, Oct 14, 2012, 10:20 AM UTC

Sliding door effects using CSS
codepen.io

Re: Sliding door effects using CSS

#2

Post by troels » Sun, Oct 14, 2012, 11:45 AM UTC

Not to confuse with "Sliding Doors of CSS" [1] - Had me confused for a moment there.

[1] http://www.alistapart.com/articles/slidingdoors/

Re: Sliding door effects using CSS

#3

Post by thefreshteapot » Sun, Oct 14, 2012, 12:29 PM UTC

Very 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.

Re: Sliding door effects using CSS

#4

Post by michaelmior » Sun, Oct 14, 2012, 12:38 PM UTC

troels wrote: post #2

Not to confuse with "Sliding Doors of CSS" [1] - Had me confused for a moment there. [1] http://www.alistapart.com/articles/slidingdoors/

I was thinking the same thing and I was shocked at first to see the link wasn't pointing to ALA.

Re: Sliding door effects using CSS

#5

Post by html5web » Sun, Oct 14, 2012, 12:40 PM UTC

thefreshteapot wrote: post #3

Very 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.

As far as I know, it's possible to make it work on iOS Safari browsers, as Safari mobile browser supports CSS animations, transforms and transition effects.

Re: Sliding door effects using CSS

#6

Post by speg » Sun, Oct 14, 2012, 1:20 PM UTC

thefreshteapot wrote: post #3

Very 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.

It's works for me on iOS 6.

Re: Sliding door effects using CSS

#7

Post by spobo » Sun, Oct 14, 2012, 2:58 PM UTC

The 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.

Re: Sliding door effects using CSS

#8

Post by go35 » Sun, Oct 14, 2012, 4:34 PM UTC

Why not use pseudo elements?

http://codepen.io/anon/pen/dpceK

edit: actually looks like it doesn't work in chrome. Anyone know why?

Re: Sliding door effects using CSS

#9

Post by SimHacker » Sun, Oct 14, 2012, 4:55 PM UTC

And 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?

Re: Sliding door effects using CSS

#10

Post by Evbn » Sun, Oct 14, 2012, 4:56 PM UTC

The edges don't align on Android, the image peeks through.