Tag: webmakerinayear

Continuing the webmaking fun, over the last few days I’ve: * Learned how to use @font-face and [icon fonts](http://fontello.com/) that are easily styled in CSS * Explored sites built with [Twitter Bootstap](http://builtwithbootstrap.com/). * Read about the coming [“Retina Web”](http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/). * Got inspired by [animated SVG…

This is a pretty amazing technique that I learned about [thanks again to Codrops.](http://tympanus.net/codrops/2013/02/06/interactive-infographic-with-svg-and-css-animations/) You can **take any SVG image file and use CSS to design and animate those graphical elements.** It’s a smart way to make an interactive infographic. I remixed the Codrops tutorial…

Thanks to another [Codrop tutorial](http://tympanus.net/codrops/2012/12/31/how-to-create-a-simple-multi-item-slider/), I learned how to make a slider using CSS animations and jQuery (still not sure what the difference is between that and Javascript). The size of the images isn’t quite right — parts of the birds are getting cut out…

Thanks to a [friendly tutorial by Codrops](http://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/), I put together this example of CSS transitions. The buttons link to somewhat random [McSweeney’s articles](http://www.mcsweeneys.net/). In the process, I also stumbled upon the site, [Vintage Printable](http://vintageprintable.com/), which has beautiful naturalist illustrations in the public domain.