Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software. I’ve put together a demo to show you how to use HTML5 & jQuery to dynamically clone color images into grayscale (see demo). Credits: thanks to Darcy Clarke (my Themify‘s partner) for the jQuery and Javascript code.

View Demo HTML5 Grayscale

Last week I talked about 960 Grid System is Getting Old. Surprisingly a lot of comments have been made. It seems like people are using 960gs because of the "golden ratio" — all numbers are even. I’m a designer, not a grid scientist. Why restrict your layout so that it can fit into this 960gs? A grid is supposed to help you in design, not to limit your creativity. The 978 grid, that I mentioned before, is not just about increasing the page width, but to loosen the gutter space so users can read it more comfortably. Today, I would like to write a follow up post to further ellaborate on some of the points I brought up initially.

CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.

Lately I’ve been playing around with CSS3 and discovered some new CSS tricks. Did you know you can make a round circle with border-radius and create inner shadow effect with box-shadow inset? Check out this beautiful search form demo that I’ve created with CSS gradient, border-radius, and box-shadow. It displays perfect in CSS3 browsers and degrades gracefully in non-CSS3 browsers.

View Demo Search Form

Last week I talked about Cross-Browser CSS Gradient. Today I’m going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc.

The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome. Also, check out my updated dropdown menu (demo) using CSS gradient.

«< 4 5 6 7 8 >»