Grow your CSS skills. Land your dream job.

Pure CSS Animated Slide Toggle

  • # May 31, 2012 at 6:41 pm

    http://jsfiddle.net/joshnh/evePU/

    Although this is webkit only, I feel as though it is quite an accomplishment; to animate the toggling of a checkbox.

    I would love to see what you guys can come up with.

    EDIT: Here is a mini version, with a range slider: http://jsfiddle.net/joshnh/jrFbM/show

    # June 1, 2012 at 2:08 am

    Sick UI effects.

    # June 1, 2012 at 5:24 am

    Dude…that is excellent!

    I’m TOTALLY stealing that!

    # June 1, 2012 at 10:15 am

    This is pretty awesome, very slick effect.

    I wish it wasn’t webkit only, I’d definitely be snagging this otherwise.

    # June 1, 2012 at 12:06 pm

    Great! When CSS could actually take over the term of input elements that don’t have any room inside it like a

    or tag.

    Are selectboxes can be made like this too?

    # June 1, 2012 at 10:53 pm

    Thanks guys. Feel free to take it and do what you like with it.

    @DrewKerriganNY The appearance property was removed from CSS3, but it is still present in webkit. Hopefully it will be back with CSS4 and then other browsers will also implement it.

    @Hompimpa You can style the select itself, but not the options. You can of course do so with JavaScript. Here is a jQuery select and option skin I did a while ago: http://jsfiddle.net/joshnh/eZzv7/

    # June 3, 2012 at 2:54 am

    waow !

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".