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!

Related Posts:

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.

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

No Reader comments

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.