-
Book Overview & Buying
-
Table Of Contents
Designing Next Generation Web Projects with CSS3
By :
As an additional feature we can add an option to let the arrow tremble a bit when it nears 100 percent. We can achieve this behavior by adding a small animation if an extra
data-trembling attribute is present:
<div data-gauge data-min="0" data-max="100" data-percent="50" data-orange-from="60" data-red-from="90" data-trembling>
Unfortunately, Compass doesn't provide CSS3 animation mixins out of the box, so we have to install a Compass plugin that can help us with that. In this case, the plugin is called compass-animation (https://github.com/ericam/compass-animation), created by Eric Meyer (http://eric.andmeyer.com/). This is how it's installed:
gem install animation –pre
Or as follows:
sudo gem install animation –-pre
And then we have to include the plugin both when calling compass watch:
compass watch . –r animation
And in the header of application.scss:
@import "animation";
Well done! Now we're ready to define a really simple animation that modifies the rotating...
Change the font size
Change margin width
Change background colour