Tutorial 39: Background Image That Extends Horizontally Only (Video Tutorial)

Linkover Menu Options

If you would like a roll over effect for your link images (i.e. when your end user puts his mouse cursor over the button but doesn't click yet, the image changes) all you have to do is make a matching '_linkover' layer in your .psd file.

Differences Between JPG vs PNG

By default, all images psd2css Online creates for you are designated as PNG images. PNGs will keep any images you want transparent, but are very big images that take awhile to download.

For images with no transparency, label the image '_jpg', and it will load much quicker and at the same quality as a PNG.

Relative Position for CSS Layers

Inputting Passwords in Forms

To generate password fields in your forms, just draw a box and label it '_inputpassword'. Password fields are the same as text fields except that letters typed are not visible (asterisks or bullets instead of the letters).

A Cool Content Slider For Your Presentations

How to Wrap Your Text Around Layers/Images

To define a small layer/image to sit inside your text area, and have the text wrap around the image, label your layer '_floatleft' or '_floatright'. Make sure to put your floating layer inside the text space (defined in Photoshop as '_text'), and name it either '_floatleft' or '_floatright' depending on where you want the image to sit.

Fixed Layer Positioning

By using the '_fixed' Layer Naming Convention, you can get a particular CSS layer to stay fixed relative to your whole browser window. For example, to keep an image or logo at the top left of the page, no matter where your user is scrolling, the fixed layer will stay visible at that exact spot. Just label the layer '_fixed'.

Here's an example:
http://psd2cssonline.com/tutorials/fixed/index.html

Empty Containers for Layers with No Content

If you want a layer to have no image in it just label the layer '_empty' in your PSD file. There are several reasons to create a box as an empty container:

1. To create a bounding region for '_relative' layers. Make your '_empty' layer larger and behind your '_relative' layers and the '_relative' layers will render inside the larger '_empty' layer
2. To create an area for a '_form'
3. To create a regions for '_page's

Creating Online Forums

There are a number of Layer Naming Conventions for making forms.