How to make a responsive Google+ Button with CSS3

Image of a Google+ ButtonSo 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.

See more

Grayscale Hover Effect with HTML5 canvas and jquery

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.

View Demos & Codes

Screenshot of code example grayscale html5 canvas effect

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.

  1. 1
  2. 2