CSS Zen Garden

http://www.csszengarden.com/


A demonstration of what can be accomplished visually through CSS-based design.

Download the sample html file and css file from the site for trying it out yourself.

CSS Page Maker

CSS Source Ordered 1-3 Columned Page Maker v2.90 from ClevaTreva Designs

Features:

* Source Ordered Layout (Content First).
* Substantial x-browser support in one design.
* 100% page height design (except MAC IE 5.x, which is fluid height instead). Fluid height version soon.
* No images used to make layout (unless you add your own 3D effects).
* Fully customisable by user from online form (makes the css for you).
* Heavily commented css and source code to explain design.
* User can select from various Doctypes to use.
* On line Tooltips to explain the form.
* Uses source code ideas from Paul O'Brien, Big John, and loads of others, plus lots of ideas of my own!
* Allows multiple header and footer rows.
* Centered/Left Aligned fix-width design (fluid width design may come later), user sets the widths of all columns.
* Top and Bottom margins (shows background color) now possible within the 100% height.
* It's FREE.

CSS: Fast Rollovers Without Preload

When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). We've got one image for each state (normal, hover, active, visited etc). Putting all states into one image makes dynamic changes faster and requires no preload.

http://wellstyled.com/css-nopreload-rollovers.html

www.welie.com -- patterns in Interaction Design

A huge collection of patterns in Interaction Design.
http://www.welie.com/patterns/index.html

Typetester ? Compare fonts for the screen

What is Typetester?

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer's life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

Technical details

Typetester's code structure is XHTML, styled with the finest CSS and driven by the JavaScript for manipulating DOM structures. Typetester will not work without JavaScript enabled.

300 Images From 1800 Sites

300 Images From 1800 Sites: "300imagesfrom1800sites"

The author says: "I started gathering little, iconesque web images for myself so that I could compare, contrast, and study the techniques used by other graphic artists on the web. My initial pool of images looked so interesting that I decided to continue methodically hunting and capturing the icons for a public display piece."

All Images are © by their owners. Please do not steal!

PhotoshopSupport.com

Free Photoshop Tutorials & Photoshop Tips

Here are the first installments of free Photoshop tutorials by Jennifer with more coming soon.

Working With Type In Photoshop CS2
Learn how to work with the type tools in Photoshop CS2.
Working With Layers In Photoshop CS2
Learn how to work with layers in Photoshop CS2.
I See iPod People — The Photoshop Silhouette
Learn how to make an iPod ad Silhouette in Photoshop.
Photoshop Web Template — Web Site Design Tutorial
Learn how to make a Photoshop web template with this web site design tutorial.
Blog Templates — Blog Design Tips And Resources
Tips on how to improve blog templates with your own designs. Includes resources.
Photoshop Keyboard Shortcuts
Learn how to edit and create sets of keyboard shortcuts in Photoshop CS and CS2.
How To Fix Overexposed Images In Photoshop
Two quick techniques to help you fix overexposed images in Photoshop.
How To Fix An Underexposed Photo In Photoshop
Two simple techniques that can make dark photos look great.
How To Wrap Text Around An Object In Photoshop
A quick and easy technique to wrap text around an object.
Tips And Tricks For Beginners
Photoshop tips and tricks that will save you lots of time down the road.
Create A Sepia Tone Effect In Photoshop
A simple way to create a Sepia Tone effect in Photoshop.
Turn A Photo Into A Sketch For Making Coloring Books
Want to make a coloring book? The first step is to turn a photo into a sketch.
The Night Vision Thing — A Photoshop Recipe
Learn to create the greenish glow associated with photos from night vision devices.
Resize Images Without Losing Sharpness
This simple trick will eliminate the dreaded blur often found after resizing.
Pixel Fonts To The Rescue
All about Pixel fonts — how to use them and where to get them.
Mysteries Of The Favicon.ico — How To Create A Favicon In Photoshop
Learn how to create tiny custom icons that appear in the address bar of a web browser.

CSS Techniques Roundup - 20 CSS Tips and Tricks

CSS Techniques Roundup - 20 CSS Tips and Tricks

Pete Freitag is a software engineer, and web developer located in central new york.

Here are 20 CSS techniques, tips and tricks from Pete Freitag that you may find handy:


Rounded Corners
Rounded Corners without images
Creating a Netflix style star ratings
Tableless forms
Styling Lists with CSS
2 Column Layout Technique
3 Column Layout with CSS
3 Column Fixed width centered layout
Printing with CSS
Adding a CSS stylesheet to an RSS feed
Footer Stick
CSS Element Hover Effect
Styling Horizontal Rules
Clearing Floats
CSS Popups
Box Punch
CSS Badge
Orange RSS Buttons with pure CSS
10 CSS Tricks you may not know
10 More CSS Tricks you may not know

Photoshop Tutorials - Tutorial Select

http://www.tutorialselect.com/ is a good source for handy tutorials that help in everyday photoshop work.

FireFox Search Plugins are availalble for searching tutorials on Photoshop and PHP topics.

CSS and Round Corners: Build Boxes with Curves

CSS and Round Corners: Build Boxes with Curves

One of the main reasons why designers use images on a Web page is to create curves and round corners. It's currently impossible to create any kind of curved shapes using pure HTML, so images need to be applied.

The problem? Putting these images into an HTML document with a table layout can create a large amount of superfluous code. In this tutorial, author Trenton Moss uses CSS to create this box with round corners, without an 'img' tag in sight!

The Code:
Our finished HTML now looks like this:

div class="bl"
div class="br"
div class="tl"
div class="tr"
Lorem ipsum dolor sit amet consectetur adipisicing elit
/div
/div
/div
/div

div class="clear"
 
/div

Here's the CSS that makes it all happen:

.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}