7 Experimental CSS3 Effects

Posted by & filed under Tech, Web Development. 12,841 views

Experimental CSS3 effects always give us a glimpse of the future of web development. With the introduction of CSS 3D transform and keyframe animation capabilities, it opens up great potential of animation with pure CSS. These examples I found most of them are powered by javascript to create interactivity with the viewers. They are simply stunning and you can use them on your website as well, just make sure you have a fallback support for browsers that doesn’t support it.

  • Paperfold CSS

    The plugin takes a dom element, slices it into parts and arranges them like a folded paper in 3d space.

  • Apple’s iPhone 4 Slider

    An explanation of the CSS animation on Apple’s iPhone 4S webpage

  • CSS3 Lighting Effects

    3D transforms are awesome, but they’re even cooler with lighting effects! The specular highlights are created with CSS gradients and masks. The cast shadow relies on box shadows and transforms. (Best in Safari)

  • Scroll Effect

    Impressive scrolling effect from Hakim

  • CSS 3D Lighting Engine

    Photon is a JavaScript library that adds simple lighting effects to DOM elements in 3D space. It’s rather processor-intensive, so please use responsibly.

  • dodecahedron

    Amazing dodecahedron effect!

  • CSS and Type

    CSS&TYPE.COM is a showcase of typography and text effects using CSS 3.0 properties.



3 Most Flexible And Comprehensive UI Frameworks For Building Websites
6 Plugin for Impressive HTML Slideshow And Presentation
Top 5 Javascript Notification Plugins to Replace Browsers Alert Box