Tag: webmakerinayear

Dragon Slaying and On Scroll Layouts

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…

Animating an SVG image with CSS

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…

Slider with CSS animations

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…

Circle Hover Effects with CSS Transitions

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.

Blast Off!

I’ve been playing with [Javascript thanks to Codecademy](http://www.codecademy.com/tracks/javascript) (at the moment, working on if/else statements and for loops). And now [CSS3 transitions](http://html5css3box.com/transitions/) have caught my eye. Surfing around, there are **a lot of beautiful designs I’d like to learn how to do.** Some examples: *…