Search Thread

***Admin*** · 11-28-2009 06:37 PM

Hello and Warm Greetings.

This is very easy and very helpfull tutorial specially for designers. This will make your page more faster and your work more easier to do for design a site.

Requirements for learning this Tutorials are :-
1. Notepad
2. Good Vision + Brain

Brief Idea Of CSS Express :-

As you saw in Neobux the most famous PTC from last 1 year. They are using CSS Express coding for showing flags of nation as per IP. If you ever try to see those flags by Right Click Open in New Tab ( For Firefox Uses ) you will find that they are whole country Flags not just one. But you are getting in view only country belongs to the user IP/Nation.

So Here i will Show you how is it possible to use Same Image for different Areas.

Step 1.

We will Take A Nation Flags Picture.
Here it is
[Image: 25jaycx.jpg]

and make a 1 X 1 Blank picture from your Photoshop. It should be Transparent.

Fine Now we will code the CSS.

Code for CSS are

Code:

.flag{background:url(flag.jpg) no-repeat 0 0;}

.india{width:50px; height:50px;background-position:-293px -65px;}

.pakistan{width:50px; height:50px;background-position:-193px -232px;}

.maldives{width:50px; height:50px;background-position:-6px -232px;}

We will save these code as "webind.css" or whatever u want your css file name.

Now i will describe you the code method of CSS.

if you see in code of CSS you will find all are "classes" as classes are mentioned by "." point, So let us take Class india.

In class flag we will define one time which picture we are going to use for flags.

In Class india we first mentioned width of picture to appear on page. its 50 x 50 then the picture position from the Main picture. The main picture size is 340 X 400, so the India flag comes on -293px from left and -65px from top. This way we define the location of Indian Flag.

Same way we will do for all other nations.

now how to appear on HTML or PHP page. Here is the code for index

Code:

<html>

<head>

<link rel="stylesheet" href="webind.css" />

</head>

<body>

<center>

<h2>CSS EXPRESS </h2>

<img alt="" src="blank.gif" class="flag india" title="India" /> And

<img alt="" src="blank.gif" class="flag pakistan" title="Pakistan" /> And

<img alt="" src="blank.gif" class="flag maldives" title="Maldives" />

</center>

</body>

</html>

Save the code as "index.html" and now open it to check. For beginners let me tell you basic things the locations should be proper or your result will not come.

The Live Demo -> DEMO CSS EXPRESS

Hope this will help you in future while designing.

Regards
Admin