Sopov.com freelancer, html and css tips and tricks

Standard fonts for all browsers and platforms PC and MAC

 

Often our clients give us (html to psd coders) web-design with non standard fonts. And every time i need to explain, why i don't use their fonts, but use common crossbrowsers/platforms fonts. And now i decide to create List  of common (standard) fonts for all versions of Windows and their Mac substitutes. This will help both designers and html coders.  I hope you will find it useful.

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.

 

Download PSD Download HTML/CSS View Demo  

 

Step 1. Slicing PSD file:

 

Select Slice Tool in Photoshop (or just press "K" button on keyboard) Select backgrounds that we will use in our site (in my PSD file this is: Body and Header background)

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:

 

Download HTML/CSS

View Demo

 

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

In this tutorial i'll show how to create simple PSD design in Photoshop cs3 and code into HTML. This is simple design for beginners.

 

Download PSD

Download HTML/CSS

View Demo

 

 

Introduction:

Difficulty type: Easy

In this lesson we will make simple blog template with:

Flexible centered layout; With site width: 950px (this means people with 15" monitors don't have to scroll sidewards); And right sidebar;

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:

 

Image One Image Two Image Three Image Four