In this post, we present an overview of useful CSS/jQuery coding tips, techniques, tricks and ideas for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future. Have fun!
1. Perfect Full Page Background Image
This technique allows an image to fill the page, with no white space. The image scales as needed and retains its proportions, without triggering scroll bars.
2. A Nice Little CSS Positioning Technique
Here, we have a basic unordered list (ul), with left-floated images where the text doesn’t wrap under the images. Of course, this technique could be deployed in loads of other instances.
3. How to: CSS Large Background
A tutorial with various CSS examples for how to create a large background using either a single image or double images.
4. Four Methods to Create Equal-Height Columns
This article discusses ways to create equal-height columns that work in all major browsers (including IE6). All of the methods show how to create a three-column layout.
5. Rolling a coke can around with pure CSS
Román Cortés is having a lot of fun doing CSS tricks these days. He just built a rolling coke can that uses background-attachment, background-position and a few other tricks to achieve the effect. No fancy CSS3 needed here!
6. 3 Easy and Fast CSS Techniques for Faux Image Cropping
This tutorial summarizes three fast and easy CSS techniques for displaying only a portion of an image. These techniques can be helpful if you want to keep images to a certain size (for example, thumbnails in a news section). Being able to use CSS to control which portion of an image to display is great.
7. Bokeh effects with CSS3 and jQuery
This tutorial teaches you how to re-create the Bokeh effect with CSS 3. With some help from jQuery, we can add some randomness in color, size and position for the effect.
8. Silhouette Fade-Ins
To achieve the effect in the, first we need a DIV with the silhouettes as a background image. Then we put four images in that DIV, all the exact same size, with each band member highlighted. These images are hidden by default. Then you absolutely position four regions on top of the DIV; these are the roll-over link areas. With jQuery, we apply hover events to them, fading in the appropriate image.
9. UX trick: display form data as tabular data
This is a little trick to enhance the user experience of forms. It displays editable form data as readable tabular data.
10. Have a Field Day with HTML5 Forms
Here is a look at how to style a beautiful HTML5 form using some advanced CSS and the latest CSS3 techniques. You will definitely want to re-style your forms after having read this article.