The ultimate CSS tools for web designers. Responsive Nav — Responsive Navigation Plugin. Responsive navigation plugin without library dependencies and with fast touch screen support.
Try it out by resizing this window. Download Features Responsive Nav is a tiny JavaScript plugin which weighs only ~1KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. Weighs only ~1KB minified and Gzip’ed. Usage Instructions Following the steps below you will be able to get the plugin up and running. Link files <! Add markup <nav class="nav-collapse"><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Projects</a></li><li><a href="#">Contact</a></li></ul></nav> Hook up the plugin <!
Customizable options Public methods // Destroy nav.destroy(); // Toggle nav.toggle(); // Open nav.open(); // Close nav.close(); // Resize nav.resize(); CSS3 properties explained. 30 Excelentes tutoriales de CSS3. Documentation. Multiple Background CSS Animations. CSS background animation has been a hot topic for a long time, mostly because they look pretty sweet and don't require additional elements.
I was recently asked if it was possible to have multiple background animations on a given element and the answer is yes...with concessions. Let's take a look at how it's done! The CSS So multiple background images on an element is something we've been able to do for quite a while now, simply separate them with commas: Note that the background image that you want at the top of the stack should go first in the image list. The result is three moving pieces inside one element! Of course this isn't an ideal case because you can't separately change background-positions and thus you need to work with the same duration for each background image.
Be Heard Tip: Wrap your code in <pre> tags or link to a GitHub Gist! Older Referencing a Script's Own Tag Newer CSS Idea: /*autoprefix*/ Prefix free: Break free from CSS vendor prefix hell! -prefix-free lets you use only unprefixed CSS properties everywhere.
It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. The target browser support is IE9+, Opera 10+, Firefox 3.5+, Safari 4+ and Chrome on desktop and Mobile Safari, Android browser, Chrome and Opera Mobile on mobile. If it doesn’t work in any of those, it’s a bug so please report it. Just before you do, please make sure that it’s not because the browser doesn’t support a CSS3 feature at all, even with a prefix.
In older browsers like IE8, nothing will break, just properties won’t get prefixed. Test the prefixing that -prefix-free would do for this browser, by writing some CSS below: Properties/values etc that already have a prefix won’t be altered. It’s not ideal, but it’s a solution, until a more intuitive way to deal with these cases is added in -prefix-free. Please note that in unsupported browsers like IE8, no such class will be added. Firefox (and IE?)