CSS3 is great way to create animations, we can replace flash animations,animated images and Javascript with CSS3 Animation properties.
In this tutorial I will explain how to create walking man Animation effect using CSS3 alone as shown below.
Best jQuery CSS2 / CSS3.0 Plugins & Tutorials with Demo
Buttons With Built-in Progress Meters in jQuery & CSS3
Progress bars have become quite popular lately, and there are lots of plugins that can help you add one to your site. But how do you make one yourself? The problem is that there are plenty of implementations already, so in this tutorial, we are going to code something different – buttons that have built in progress meters.
They will be perfect for displaying progress while submitting forms or loading content via AJAX. They will also use CSS3 styles and transitions to make them easy to customize.
Responsive Share Buttons CSS and jQuery
Today let’s create a cool looking responsive share buttons for your website contents, which will adjust according to the users’ screen size. If you are not satisfied with your current share buttons, you can try this solution. Advantage of creating own set of share buttons is that, it goes well with your layout, and you don’t have to rely on bulky files that are loaded from anonymous servers, which could also slow down the page loading time significantly.
jQuery.column : CSS3 column layout with jQuery
Simulate CSS3-style automatic columnization for the few browsers (IE) that don’t support it. It tries to follow CSS3 specification (http://www.w3.org/TR/css3-multicol/) closely.
This should point to the DOM node(s) that hold the content to be columnized. Typically this is a element, but other elements are possible.
Jet : jQuery CSS3 Responsive Megamenu
Jet Responsive Megamenu is a menu component based in CSS and Javascript code. It can be used like a dropdown navigation, megamenu navigation or both. It’s has a responsive and fluid layout.
Features:
- 14 Styles
- Responsive
- Collapsible
- Javascript/CSS effects
- Grid system
- Cross browser
- Easy to use
jQuery CSS Emoticons Plugin
jQuery plugin to style emoticons with pure CSS3 properties (no images).The CSS Emoticons plugin is a simple jQuery plugin (and stylesheet) that allows you to turn any text emoticons on the page into cute little smiling faces with pure CSS3 styling (no images whatsoever).
The result is great-looking emoticons that leave the text exactly as written (so that the text emoticons actually get copied and pasted with the text if you select a block of text from the page). This uses the CSS3 properties, transform, border-radius, box-shadow, gradient, and transition (when supported).
Animated Border Menus with CSS3 & JavaScript
A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash’s bounce menu for mobile apps.The other day I saw a really nice concept of a menu on the UI8 site. CreativeDash implemented that gorgeous concept and I instantly had some ideas for more effects involving border transitions but also with the desktop in mind. So today I want to show you how to create something like that and provide some more inspirational examples.
Please note that we’ll be using transitions and animation on pseudo-elements which won’t work in some browsers (e.g. Safari and Mobile Safari).
jQuery CSS3 Modern Menu 3
Modern Menu 3 is a clean, modern and easy to use menu. It has a number of features that make it both useful and compelling:
- It has a clean and attractive design.
- It offers both a horizontal and a vertical layout.
- It comes with 8 different themes to choose from.
- The look is completely customizable.
- It supports multilevel dropdowns.
- It has smooth and attractive animations for the buttons as well as the dropdowns.
- It uses CSS animations for better performance.
- It has a jQuery animation fallback for browsers that do not support CSS animations.
