Shaded 3D Progress Bars with CSS/Sass

Shaded 3D Progress Bars with CSS/Sass

Today we’d like to show you how to create some pure CSS progress bars with a special 3D look. Consider this tutorial an advanced CSS exercise that will give you insight in a lot of interesting 3D properties and shading techniques. Creating UI components using only CSS will train your ability to think outside of the box and in this tutorial we will show you some tricks on how to create a more complex shape, use it as a progress bar and animate it.

ContextMenu.js : JavaScript & CSS3 Drop Down Menus

ContextMenu.js : JavaScript & CSS3 Drop Down Menus

ContextMenu.js is a jQuery plugin for creating highly customizable drop down menus triggerable by various mouse events. Use it to create context menus, drop down lists, navigations, and more.

  • 9 customizable options
  • 7 transition effects
  • 3 action hooks
  • 4 menu item types
  • Various trigger events
  • Dynamic event binding
  • Custom positioning
  • HIDPI ready

Cloud 9 : jQuery 3D Carousel

Cloud 9 : jQuery 3D Carousel

A 3D perspective carousel using jQuery/Zepto focused on performance, based on the original.

cardflip : Card flip Animation with jQuery & CSS3

cardflip : Card flip Animation with jQuery & CSS3

Simple card flip animation using jQuery and CSS3 animations.

Screen-roller : jQuery Full Screen SlideShow Plugin

Screen-roller : jQuery Full Screen SlideShow Plugin

jQuery-plugin for full-screen slide show that can be switched in the standard display mode site (for small screens).

sortChildren : jQuery Sorting Plugin

sortChildren : jQuery Sorting Plugin

sortChildren is a jQuery plugin to sort child elements.

Fullscreen Video Opening Animation with CSS3

Fullscreen Video Opening Animation with CSS3

In this in-depth tutorial we want to show you how to create a similar video opening effect to the one seen on momentsapp.com. If you click the “Watch the video” button on the Moments App page, you will see a new image appearing on the photo stack which contains a video. The animation is a slight rotation of the frame and a subtle scaling of the video, which already starts to play. The whole wrapper expands to full screen without any play controls; just the closing cross will be shown. Once the video ends, or, if the user clicks on the closing cross, the video will simply disappear.

Lorem : jQuery plugin for Random Lorem Ipsum Snippets

Lorem : jQuery plugin for Random Lorem Ipsum Snippets

A jQuery plugin that generates random ‘lorem ipsum’ snippets on the fly. When designing/developing web interfaces you sometimes want to model content you don’t have (filler). Standardly, you copy snippets of the of an altered Latin text into your code.

Actuate.js : jQuery wrapper for Animate.css

Actuate.js : jQuery wrapper for Animate.css

A jQuery wrapper for animate.css that makes it one line easy to start using css animations. The plugin includes a bunch of swaggy animations but can be used to initialise any animation you like.

Styling & Customizing File Inputs

Styling & Customizing File Inputs

A tutorial on how to style and customize <input type=”file”> in a semantic, accessible way using the <label> element and some JavaScript.