Sopov.com freelancer, html and css tips and tricks

PSD to HTML. How to design my own website and add it to HTML? Lesson 2

In previous lesson We learned how to create simple design in Photoshop. Now i show you how to slice and PSD file and add it to our HTML page.

Step 1. Slicing PSD file:

How to create stretch buttons, menus, boxes with rounded corners from PSD file to HTML code?

In this lesson i'll show you how to create rounded corners boxes, that can stretch down and right.

The fist sample is very easy to create. Buttons and menus usually stretch by "X" (from the left to the right).

We have PSD mockup (or image like gif, png, jpg) with button and now we have to add it to HTML:

First of all we have to create 2 background images  (i use Photoshop for it). Fist image will be our stretch background, and the second will be end of the button:

How to place footer at bottom?

How to open GIF animation in Adobe Photoshop CS3 on MAC or PC?

Great news, Photoshop CS3 can make animated GIF’s, BUT We can no longer open them. Very strange, isn't it?

So, i created video tutorial for MAC and PC, how to open GIF animation with all frames

How to create small image gallery using CSS only?

I created simple image switcher gallery, without any JavaScript. And it works in most browsers: MAC: FF, Safari; PC: FF, GChrome, IE 7/8 (IE6 doesn't support).

Here is an example what we have to get:

How to set the opacity of an element.

Here is example (opacity 80%):

How to Set opacity using CSS

How to highlight table row background css. Works in all browsers.

I spent hours to find how to highlight background image in table row. In google a fond a tons of tips, but no one give me all browsers compatible. So, i created my own, works in MAC: FF, Safari PC: IE6/7/8, FF, Safari, Google Chrome. (IE 6 shows only row background, mouse over doesn't work)

Here is example what we have to get:

How to add images preload without JS

In this article I want to explain how to add images preload with CSS. Web site visitors hate to wait, so many Web designers preload images to speed up page display. Although JavaScript is the most common way to preload images, it isn't your only option. Consider using the CSS DISPLAY property instead. It may be more reliable and it requires less complex code.

If this is Your first meeting with CSS Sprites?

Do you really understand them? The name might be a little misleading, because sprites aren't little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the "on" and "off" states of a button are contained within the same image and are activated by shifting the background-position? This is example how I use it in my site: