10 Useful Coding Tips, Techs & Ideas

Sam Deering
Tweet

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.
Perfect-Full-Page-Background-Image.jpg
Source


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.
A-Nice-Little-CSS-Positioning-Technique.jpg
Source


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.
CSS-Large-Background.jpg
Source


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.
Four-Methods-to-Create-Equal-Height-Columns.jpg
Source


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!
Rolling-a-coke-can-around-with-pure-CSS.jpg
Source


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.
3-Easy-and-Fast-CSS-Techniques-for-Faux-Image-Cropping.jpg
Source


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.
Bokeh-effects-with-CSS3-and-jQuery.jpg
Source


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.
Silhouette-Fade-Ins.jpg
Source


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.
UX-trick-display-form-data-as-tabular-data.jpg
Source


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.
Have-a-Field-Day-with-HTML5-Forms.jpg
Source

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments