I have developed a small script with processing that simulates a snow fall effect. It emerged in the course “Design Programs” at FHP by Martin Guder. You can see the script in action and download it on the link below.
If you want to create a fullsize background image on your website you can simply use the CSS3 property background-size: cover. But not every Browser supports CSS3 so you need a fallback. Check out this tutorial to learn more.
If you want to use an image in your responsive web design you can use fluid images. But there is another way. You can set a maximum height and crop the image. If you want to learn more about it, check out the tutorial that I wrote about the overflow image cropping.
So what the heck is a responsive button? For me it’s a button that fits in your responsive webdesign. In this case it’s proportional scalable. That means if you change your font size it scales automatically all properties like border-size, border-radius and padding proportionally. You can do this by using em’s instead of pixels. For more information check the responsive web design article by Ethan Marcotte. I recommend his book.
I saw a tutorial on webdesignerwall.com showing how to make a HTML5 Grayscale Image Hover and thought this is very cool. After some research I’ve found another tutorial on Nettuts+ with another function. This one was better for me to understand(video tutorial), so I combined the snippets together and reduced the jQuery code for my needs. Finally I’ve created some different hover effects.
The Future with CSS Shaders and Filter Effects
In the future there will be CSS Shaders to do something like that. For more information check out this article about CSS Filter Effects on Adobe.com.