background preloader

CSS3 Animation Cheat Sheet - Justin Aguilar

CSS3 Animation Cheat Sheet - Justin Aguilar
How it works The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that's IE 10). Using CSS3 @keyframes, you don't have to worry about positioning the element to accomodate the animations - it will animate into place. Also for users with older browsers, the animated element will be visible and in place, even if the animation doesn't trigger. Add the animation stylesheet to the <head> element of your webpage: Replace css with the name of the directory where the animation stylesheet is. Add an animation class to the element you want animated: Replace slideUp with the desired animation class. For entrance animations, you need to make them invisible by adding the visibility: hidden property to the animated element: Adding effects

http://www.justinaguilar.com/animations/index.html#

Related:  HTML / CSSWEB DESIGN

Learn Web Design: 50+ of the Best Online Educational Resources to Learn to Build Web Sites Tutorials & Guides Free or Low Cost Keep your hard-earned dollars in your pocket Text-Based Good for those who like to learn via reading and see text code examples Shay Howe's Guides to HTML & CSS CSS Animation Tools & Tutorials Animating with CSS may have some limits, but overall they do offer a number of advantages over animations that are powered by JS. Easier to work with and being hardware accelerated are just two of the key CSS advantages. Of course CSS powered animations do have some disadvantages, such as it being difficult to have complete control over them. That is where this post comes in. Browser Sandbox - Spoon.net The Spoon.net Browser Sandbox makes cross-browser testing and backwards compatibility easy. Just click Run for any browser to launch it instantly. Browsers run within an isolated virtual environment, eliminating the need for installs and allowing legacy browsers such as Internet Explorer 6 to run on Windows 7 and 8. Virtualized browsers behave exactly like installed browsers.

Animate your HTML5 previous next action action = on most slides, something happens when you click (especially slides 4, 9, 19, 31 and 38 :-) Coder's Block Blog / Fun Times with CSS Counters CSS counters are one of those “oh neat, didn’t know CSS could do that” features with a lot of interesting potential. In simple terms, they let you keep a running tally of things in CSS — no JavaScript needed. Basic Counter Here’s an easy pagination example to get us started: The numbers you see aren’t hardcoded in HTML. They’re generated in CSS with this: Auto-Hide Sticky Header Auto-hide sticky header is a shot that shoots down two rabbits: makes site navigation easily accessible anywhere on the page and saves content space at the same. My client, Easy Shine, was happy to have this type of header for their website. I've also implemented this technique here, on my website (you can see it when the width of your viewport is below 768 px). Making header sticky A little bit of obvious HTML/CSS coding here, which makes the header stick to the top of the page, independently of the page scroll position. Now, how do we auto-hide the header?

Understanding the CSS Transforms Matrix Introduction The matrix functions — matrix() and matrix3d() — are two of the more brain-bending things to understand about CSS3 Transforms. In most cases, you’ll use functions such as rotate() and skewY() for ease and clarity’s sake. Behind every transform, though, is an equivalent matrix.

Applying styles and colors - Web API Interfaces In the chapter about drawing shapes, we used only the default line and fill styles. Here we will explore the canvas options we have at our disposal to make our drawings a little more attractive. You will learn how to add different colors, line styles, gradients, patterns and shadows to your drawings. Five simple steps to designing grid systems - Part 5 – September 19th, 2005 – It’s been a while, but this is the final part in my series ‘Five Simple Steps to designing Grid Systems’. Flexible vs Fixed. Which one to choose? Market Your PSD Mockups for box BOX004 is a top down, 45° angle, front view shot of a cereal box. This PSD Mockup can be used to render software product boxes or other packaging with similar dimensions. All shadows and highlights remain fully editiable by the designer for further customization. The top of the box is removable if the illusion of a ceral box is not desirable.

CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't particularly recommend that you just use this in its unaltered state in your own projects.

Positioning in web design explained with GIFs. A visual manual for designers. Understanding how positioning in the web works is crucial for responsive web design, as it allows us speak the same language with developers and helps make better design decisions. Compared to static design tools (Photoshop, Illustrator, Sketch) it's more complex as well, because the position depends on everything around it; scrolling, screen size and other factors. To complicate things even more, different types of position in the web have names that are quite confusing – Static, Absolute, Relative and Fixed – where static isn’t really static and absolute depends on the placement. Therefore here is a short, visual manual of what is what. The Z-index Before we jump to positioning, lets explain what the Z-index is as it affects all types of positioning in some way.

PSD Grid Templates What's this? It's a collection of PSDs with predetermined grids for common design scenarios. Each template contains a columnar grid defined with guides and overlays. All of the templates use a 12-unit grid, except for the email template, which uses an 8-unit grid. Imitating responsive layouts, units and gutters increase in size (approximately) as the canvas gets bigger. Gutters are on the large side to offer a little more space for touch interfaces. About normalize.css Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset. Normalize.css is currently used in some form by Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks, and many other frameworks, toolkits, and sites. Overview

Related: