HTML and CSS Reference
In-Depth Information
For a more detailed discussion of linear and radial gradient syntax, you can check out any of
the following articles:
"CSS3 Radial Gradient Syntax Breakdown" on Impressive Webs
"CSS3 Linear Gradient Syntax Breakdown" on Impressive Webs
"Using Unprefixed CSS3 Gradients in Modern Browsers" on SitePoint
"Unprefixed CSS3 Gradients in IE10" on the IEBlog
Note: A Word on Gradient Syntax
The syntax for both linear and radial gradients has changed quite a bit over the
years, and it's now quite complicated to get gradients working in all support-
ing browsers.
Theresourceslinkedattheendofthegradientssectioninthischapterdescribe
both old and new versions of the gradient syntax. You can also find generators
online that use older syntaxes. So if you're having trouble with the code for
gradients, then know that you're not alone.
If you want to avoid all these headaches, you can stick to using only the new
standard syntax, with no vendor prefixed lines, and provide image-based or
single color fallbacks for non-supporting browsers.
Keyframe Animations
In the past, complex animations on web pages have been achieved using video, Adobe Flash,
or JavaScript. In recent years, the CSS specification has added keyframe-based animations
using pure CSS. A keyframe animation is the final touch we're going to add to RecipeFinder,
and then the project will be complete.
Whatwe'regoingtoaddtoRecipeFinderisjustasimpleanimationtomaketheRecipeFinder
logo fly in from the left part of the screen and spin into place. Let's look at the code we're
going to use, first of all on the .logo element:
Search WWH ::




Custom Search