PHP introduction, code delimiters, comments and statements

٢٥ شعبان ١٤٢٧
18 Sep 2006, 07:04 PM

Introduction

PHP Hypertext Preprocessor (PHP) is the most popular server-side scripting language on the world wide web. This guide is designed to introduce programmers familiar with other programming languages to PHP.

This guide will take the form of a series of posts that will cover PHP from the basics to intermediate level. In this post I will cover code delimiters, comments and PHP statements.


Continue reading "PHP introduction, code delimiters, comments and statements"

Posted in PHP Tutorial
Comments (0) | Trackbacks (0)

RoundedCorner free website theme

٢٥ شعبان ١٤٢٧
18 Sep 2006, 03:44 PM
Click on thumbnail to see full sized version
Click to view larger image.
A standards based pure CSS design that is full of rounded rectangles and soft shadows. An ideal theme for a blog or personal site, roundedcorner is free for most uses. I would appreciate it if you did not remove the link to my site in the footer of each page. This theme has 3 variations included in the zip file.

Continue reading "RoundedCorner free website theme"

Posted in Themes
Comment (1) | Trackbacks (0)
Defined tags for this entry: , , ,

CSS button hovers without the lag

٢٤ شعبان ١٤٢٧
17 Sep 2006, 11:00 AM
Both the hover (bottom) and normal (top) states of the button are in one image.
One of the best features of css is the ability to perform button hovers without java script. By button hovers I mean creating links that have different background images based on whether the mouse pointer is over the link or not. With CSS this is as simple as setting different background images for the a tag and the a:hover pseudo class:
a{
background-image:url("img/normal.png");
}
a:hover{
background-image:url("img/mouseover.png");
}
 

The image specified in the a:hover class will be displayed when the user moves the mouse pointer over an image. Once the user moves the mouse pointer away from the image it will revert to normal.png as specified in the a class.

This technique is an easy way to implement button hovers but it has one flaw. When the user moves the mouse over the link for the first time there is a time lag during which the mouseover.png image is fetched by the browser. Therefore the user does not see this effect immediately.Whats the solution? Well I discovered it while going through the code of the free wordpress theme freshy.

The author of that theme Julien De Luca uses an interesting techinque. Both the normal state and the hover state of the button are placed in the same image. However the position of the background is changed depending on hover or not:

a {
background-image:url("normal.png");
background-position:top left;

}

a:hover{
background-position:bottom left;
}
 

Using this technique you can remove the time lag because the browser has to fetch only one image that contains both normal and hover states.

Posted in Code
Comments (0) | Trackbacks (0)
Defined tags for this entry:
(Page 1 of 1, totaling 3 entries)
This website theme by Abdussamad Abdurrazzaq