Today we’d like to show you how to create a little experimental glitch-like effect on an image. The effect will be powered by CSS animations and the clip-path property. The technique involves using several layers of images where each one will have a clip-path, a blend mode and a translation applied to it.
Best jQuery CSS2 / CSS3.0 Plugins & Tutorials with Demo
Expanding Grid Item Animation with CSS & JS
Today we’d like to share a simple implementation of a grid animation with you that is based on the Dribbble shot. When a grid item is clicked, the background and the thumbnail are scaled up and moved to their fullscreen position. While the Dribbble shot is an animation for the mobile phone, we thought we could explore this concept for the desktop, too. We are using anime.js by Julian Garnier.
Checkbox & Radio Custom Style Bootstrap
Custom style checkbox & radio for web:
- Semantically Correct / Valid HTML Code
- HTML5, CSS3
- Full project and seed project (build with: Gulp, Sass)
- Cross browser compatible ( Internet Explorer 8+, Firefox, Safari, Opera, Chrome etc. )
- W3C Valid source code, properly formatted and commented
- Animations CSS3
Sliced Dual Image Layout with CSS
Today we’d like to share some layouts with a sliced image look with you. The idea is to show some text elements in a grid layout and change the content and images in a slideshow fashion. For the background image slices, we created a little plugin that has a couple of additonal options. For making an interesting transition, we use a glitch effect. This effect we also apply to some of the text.
jQuery Multi level Push Menu Plugin
Multi-level push menu is cross-browser compatible jQuery plug-in allowing endless nesting of navigation elements.This jQuery plugin is inspired by Codrops MultiLevelPushMenu but unlike it not relaying on CSS 3D Transforms and therefore functional in older browsers too (i.e. IE 8).
Features:
- Multi-level menu support
- Endless nesting of navigation elements
- Expand/Collapse navigation with a left/right swipe gesture
- Push/Slide DOM elements of choice
- Left-to-right and Right-to-left sliding directions
- Flexible, simple markup
- JS Array input, if markup is not present
- A number of exposed Options, Methods and Events
- Cross-browser compatibility (IE8+, Chrome, Midori, Firefox, Safari, Opera, Android Browser, iOS Safari)
