Archive for the ‘Tutorials’ Category
Suppose we have a website and we want to get the user IP address and want to display it for him or we want to store it and get a log for hits of website. Also sometimes users may share same IP address for internet sharing & usage so his PC’s IP will be something like 192.168.0.2 (Proxy Case) and actual IP address which he is using for internet, shared by his internet service provider will be different. We can find these both IP by this simple example of PHP code.
PHP Code:
<?
$domain=$_SERVER['REMOTE_ADDR'];
$domain1 = isset($_SERVER['HTTP_X_FORWARDED_FOR'])
? $_SERVER['HTTP_X_FORWARDED_FOR'] : $_SERVER['REMOTE_ADDR'];
echo "Viewer's Server's IP Address: <strong>$domain</strong> - ";
echo "Viewer's PC IP Address: <strong>$domain1</strong>";
?>
Transparent PNG Image In Webpage Made Easy
This example will show you how to use a transparent PNG image in webpage. When it comes to slicing and using images in webpage, we have to use some images in gif form sometimes particularly for curves and rounded corners while creating boxes by images for webpage. We use images in background. Give any gif a shadow or glow, export it transparent and use it in webpage and you will see that transparency quality is not so good.
We know that PNG gives us transparent background in sharp quality but when we use this PNG in webpage, it will have a default background in all browsers.
Now we will tweak this a little bit and add a style sheet to that particular transparent PNG image or you can use style sheet to IMG tag which will be applied to all transparent PNG images of website and add a PNG behavior HTC file in the same folder and we are done. Now all the transparent PNG images at website or page will have exact sharp fine quality transparency. I have tested it for IE, Mozilla Firefox, Safari and Opera browsers and it works fine. Download the example below.
Download transparent PNG background example in webpages
P.S. For this script IE version requirements are 6. And I did not try this for background PNG image. For more powerful, compatible and cross browser solution download another flavour of the script.
Download More Powerful Solution For Transparent PNG Issue
Design page curves in Adobe Photoshop by yourself. You can do it by many ways. I will describe here two easy ways to do it.
Method 1.
Draw a box shape using pen tool. Clicking p will select pen tool in photoshop.
Now you can add editing points to it because its not a regular shape but its editable.
Add points by Add anchor point tool beneath to pen tool in its sub menu, at the corner where you want to curve to appear (e.g. slightly near from top right corner and slightly near right side under top right corner).
Select top right corner by Direct selection tool and drag it inwards.
Add gradients at that corner. Two gradients I suggest. One darker one at top and lighter one, beneath dark gradient by Gradient tool. You are done.
Download psd example file and see how I have made it.
Download Psd File (Curve1)
Method 2.
Draw a box shape using pen tool or by rectangle tool.
At right corner as in my case place a white little rectangle so that it covers a part of right corner exactly. I have used polygonal lasso tool to select further triangle from that small box. Now I had white background. I placed white box at corner of blue box. I created inward selection of triangle from that box and gave it dark blue color. That curved triangle piece which you can see in image below was that selected triangle. After giving it some shadows and applying some layer modes and gradients you can get exactly the same result as shown below.
Download psd of this example to see how I have done it.
Download Psd File (Curve2)
Share more techniques of creating fancy page curves with me.
