A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.Once a certain amount of the page gets scrolled, the header will decrease its size and the inner elements will adjust their font-size/line height. There are example media queries for dealing with different screen sizes.
Best jQuery CSS2 / CSS3.0 Plugins & Tutorials with Demo
Smooth Diagonal Fade Gallery with CSS3 Transitions & jQuery
In this tutorial we are going to create a gallery with a smooth diagonal fade effect, powered by css3 transitions. It will scan a folder with photos on the server and display them in a grid that spans the entire browser window. Adding new photos is as easy as copying two files (a regular image and a thumbnail, preferably 150×150 px) to the gallery folder.
CSS3 capable browsers will show a smoothly animated diagonal fade effect, while older browsers will fall back to a simpler but still perfectly usable non-animated version of the gallery.
BlueprintUI: jQuery Responsive Modal with CSS3
BlueprintUI Responsive Modal is a super simple fully featured jQuery modal plugin with more than 30 CSS3 powered animation possibilities and 7 home made themes to use it.
Features:
- Responsive Design – The layout adpats to the viewing environment.
- CSS3 Animation – 31 funny and really smooth animations.
- Themeable – 7 provided themes and simple api to create more.
- 3D Scaling – If the browser support 3D, you can add a super smooth scaling effect to the overlay.
- Extensive Documentation – The plugin is provided with an extensive documentation to help you use it
Blueprint : Tooltip Menu with CSS3 & JavaScript
This is a simple tooltip menu that will show a tooltip submenu when hovering over an item. The submenu will either appear above or below the main menu, depending on where more space is available. Using Modernizr’s touch detection, the menu will either react on hover or on click. Example media queries show how to adjust the style for smaller screens.
Menufication : jQuery Responsive Fly-Out Menu with CSS3
Navigation is one of the most important aspects of a website. The fly-out menu (with inspiration from Facebook) has been proven to be the most efficient navigation that dramatically can improve your visitors experience on your website!
Menufication is a user-friendly, customizable jQuery-plugin to transform your sites navigation to a responsive fly-out menu in Facebook fashion.
Features:
- Utilizes CSS3-tranforms for optimal and native-like performance.
- Swipe to open/close the menu (iOS only in v1.0).
- Option to only generate the menu on predefined browser sizes.
- Option to only generate the menu on mobile devices.
- Support for hierarchical menus.
- Several options to customize the behaviour of the menu.
- Only dependency is jQuery.
Natural Language Form with Custom Input Elements in CSS3 & JS
An experimental form that uses natural language instead of the usual form display. Values are entered using custom input elements.The idea is to turn a classic form into one that uses natural language to obtain information from the user. For that we’ll construct a sentence where some words and parts are select elements and text inputs. We’ll then transform the select elements so that we can customize them.
Natural language forms are quite suitable for some UI cases, not for all, of course. They have a couple of limitations but they can also be more engaging for users if used in the right place and in the right way. Anyway, we wanted to give this concept a try and we’ll show you how we did it.
