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.
Best jQuery CSS2 / CSS3.0 Plugins & Tutorials with Demo
Simple card flip animation using jQuery and CSS3 animations.
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.
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.
An elastic SVG progress loader based on the Dribbble shot “Download” by xjw and implemented with SVG and TweenMax.
A simple modal window with an SVG background animated using Snap.svg.
- Apply CSS3 hover effects to the images on your website without any CSS coding knowledge.
- Assign any of predefined effects to featured images for standard and custom post formats.
- Create your own hover effects with unlimited variations of styles and colors in our Editor.
- Combine different effects to create unique animation hover effects.
- Apply fully customizable shortcode to any image in WordPress Post/Page Editor.