Tutorials

Due to a number of requests, I’m writing a detail tutorial on how to create an animated scroll to top as seen on Web Designer Wall. It is very simple to do with jQuery (just a few lines of code). It checks if the scrollbar top position is greater than certain value, then fade in the scroll to top button. Upon the link is clicked, it scrolls the page to the top. View the demo to see it in action.

Demo Scroll to Top

Download Demo Zip

One of the nice enhancement in HTML5 web form is being able to add placeholder text to input fields. Placeholder attribute allows you to display text in a form input when it is empty and when it is not focused (it clears the field on focus). This is a nifty feature, but it is not supported by all browsers yet. This tutorial will show you how to use Modernizr to detect if placeholder is supported, or else use jQuery to display the fallback placeholder text dynamically.

Demo HTML5 Placeholder

Download Demo Zip

As much as we don’t like to deal with the IE bugs, we still have to face it because your boss and visitors are still using Explorer. It gets frustrating when different versions of Explorer displays web pages differently due to the inconsistent rendering engine. We typically use IE conditional comments to fix the IE issues. But there are more ways than the conditional comments…

View Demo IE Specific

One of the common problems we face when coding with float based layouts is that the wrapper container doesn’t expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But did you know you can also use the overflow property to fix this problem? It’s not a new CSS trick either. It’s been documented before long long ago. Today I would like to revisit the topic along with a few tips.

View Demo Clear Floats

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.

«< 3 4 5 6 7 >»