Website Ideas » Tutorials

Pagination with PHP, jQuery and MySQL.

admin — Thu, 29 Sep 2011 14:46:47 +0000

So many emails hit my inbox with readers asking me how to implement pagination with php. So i decided to put one together using Jquery, php and Mysql. It looks difficult, but its rather simple.

The Structure contains three PHP files and two js files includes jQuery plugin.

-database.php (Database Configuration)
-pagination.php
-paginationdata.php

Database Table

CREATE TABLE users
(
users_id INT PRIMARY KEY AUTO_INCREMENT,
user TEXT
);

config.php
You have to change hostname, username, password and databasename.

pagination.php
User interface page.

'.$i.'

paginationdata.php
Simple php script display data from the users table.

Demo To Follow Shortly! & Download

Useful PHP Snippets

admin — Fri, 01 Jul 2011 18:49:01 +0000

As a PHP developer i’m always in the search for little snippets to add to my library. This at times so often proves useful when coding big projects and quick little functions. Snippets as such are great to add to existing CMS systems, such as WordPress, drupal or Joomla.

Calculate distances in PHP

I used this on an accommodation website not to long ago. this snippet allows you to measure the distance from one point to another. Great combo with Google maps too!

function distance($lat1, $lon1, $lat2, $lon2, $unit) {

$theta = $lon1 - $lon2;
$dist = sin(deg2rad($lat1)) * sin(deg2rad($lat2)) + cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * cos(deg2rad($theta));
$dist = acos($dist);
$dist = rad2deg($dist);
$miles = $dist * 60 * 1.1515;
$unit = strtoupper($unit);

if ($unit == "K") {
return ($miles * 1.609344);
} else if ($unit == "N") {
return ($miles * 0.8684);
} else {
return $miles;
}
}

Force file download

This allows you to force file downloads such as mp3 and other files being played in browsers.

function downloadFile($file){
$file_name = $file;
$mime = 'application/force-download';
header('Pragma: public'); // required
header('Expires: 0'); // no cache
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Cache-Control: private',false);
header('Content-Type: '.$mime);
header('Content-Disposition: attachment; filename="'.basename($file_name).'"');
header('Content-Transfer-Encoding: binary');
header('Connection: close');
readfile($file_name); // push it out
exit();
}

Get latitude and longitude from an address

This is a great snippet and goes well with the first one i mentioned. This allows you grab the latitude and longitude from the Google map url and returning the values as an array!

Get how many times a page have been retweeted using PHP

This snippet will return the number of tweets that a page was tweeted. Using the tweetmeme API

Send Mail using mail function in PHP

$to = "viralpatel.net@gmail.com";
$subject = "VIRALPATEL.net";
$body = "Body of your message here you can use HTML too. e.g.
Bold ";
$headers = "From: Peter\r\n";
$headers .= "Reply-To: info@yoursite.com\r\n";
$headers .= "Return-Path: info@yoursite.com\r\n";
$headers .= "X-Mailer: PHP5\n";
$headers .= 'MIME-Version: 1.0' . "\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
mail($to,$subject,$body,$headers);
?>

Updated 7/8/2011

Validate email Address

This snippet will help you validate a email addy. It will check the MX records of the domain to make sure the email is more robust

Zip Files on the Fly

Snippet created by David Walsh. zip files on the fly!

/* creates a compressed zip file */
function create_zip($files = array(),$destination = '',$overwrite = false) {
//if the zip file already exists and overwrite is false, return false
if(file_exists($destination) && !$overwrite) { return false; }
//vars
$valid_files = array();
//if files were passed in...
if(is_array($files)) {
//cycle through each file
foreach($files as $file) {
//make sure the file exists
if(file_exists($file)) {
$valid_files[] = $file;
}
}
}
//if we have good files...
if(count($valid_files)) {
//create the archive
$zip = new ZipArchive();
if($zip->open($destination,$overwrite ? ZIPARCHIVE::OVERWRITE : ZIPARCHIVE::CREATE) !== true) {
return false;
}
//add the files
foreach($valid_files as $file) {
$zip->addFile($file,$file);
}
//debug
//echo 'The zip archive contains ',$zip->numFiles,' files with a status of ',$zip->status;

//close the zip -- done!
$zip->close();

//check to make sure the file exists
return file_exists($destination);
}
else
{
return false;
}
}
/***** Example Usage ***/
$files=array('file1.jpg', 'file2.jpg', 'file3.gif');
create_zip($files, 'myzipfile.zip', true);

Resize Images on the fly

This is a very useful snippet, especially when design wordpress templates and so on. Even shopping comparison websites!

/**********************
*@filename - path to the image
*@tmpname - temporary path to thumbnail
*@xmax - max width
*@ymax - max height
*/
function resize_image($filename, $tmpname, $xmax, $ymax)
{
$ext = explode(".", $filename);
$ext = $ext[count($ext)-1];

if($ext == "jpg" || $ext == "jpeg")
$im = imagecreatefromjpeg($tmpname);
elseif($ext == "png")
$im = imagecreatefrompng($tmpname);
elseif($ext == "gif")
$im = imagecreatefromgif($tmpname);

$x = imagesx($im);
$y = imagesy($im);

if($x <= $xmax && $y <= $ymax)
return $im;

if($x >= $y) {
$newx = $xmax;
$newy = $newx * $y / $x;
}
else {
$newy = $ymax;
$newx = $x / $y * $newy;
}

$im2 = imagecreatetruecolor($newx, $newy);
imagecopyresized($im2, $im, 0, 0, 0, 0, floor($newx), floor($newy), $x, $y);
return $im2;
}

Please bookmark this post, im going to weekly update it with snippets so watch this space!

Bad Website Ideas – What Makes a Bad Website

admin — Thu, 01 Apr 2010 06:18:28 +0000

If you consider yourself to be a creative individual, or you simply want to express your passion for a certain subject, then creating a website could be for you. Many new websites enter the internet every day, and that is hardly likely to change anytime soon.

Unfortunately, many of these places have a poor concept of just how their domain should be designed, and this hurts their popularity and visitor count. If you don’t want to meet the same fate, there are certain things you can do in order to make your website attractive and easy to navigate. What can you lose by trying?

1. Don’t have music playing, either in mp3 or midi form, on the website. People are not fond of having music suddenly blast from their speakers, and they are likely to hit the back button before they even get a chance to check out anything. You might think you’re sharing your favorite song with people, but odds are they won’t appreciate it. If you must have a music player, make sure it is either manually activated or it can be turned off by the visitor. This is very important to keep in mind.

2. Never use a tiny font to enhance your text. If you visited a website and the font was too tiny for comfort, would you stick around? The answer would likely be no. Therefore, make sure any text is of a size that most people would be able to read. You will also want to refrain from using fancy fonts that have the potential to create a problem; this is just as bad as tiny fonts, because it can be just as difficult to make out. If you aren’t sure, ask a friend or someone you know to take a look at the website before it goes “live.” They can give you feedback.

3. Don’t flood the pages with animated pictures. This is a sure fire way to give off an air of unprofessional, a fatal mistake if you plan to put up an online business. Some browsers might also be unable to load the pictures properly, and it may end up taking a long time. Will the visitor have that kind of patience? Would you?

4. Let people know what the website is about right away. If they become confused and are unable to figure out what they are looking at, they will leave.

Captcha For Joomla 1.5.x and integration with Sobi2

admin — Thu, 19 Mar 2009 10:29:49 +0000

OK so we finally managed to crack this bad boy for Joomla 1.5.9 . This script allows users to add a Captcha form to there Sobi2 contact page, helping the prevention of spam. Snake was kind enough to modify and donate this script to us. This Captcha script can be used for any component in Joomla 1.5.x. If you need help setting it up please use our forum and we will assist with the setup and integration into your components. But this should be easy to setup.

This specific demo will show you how to set it up using joomla 1.5 and Sobi2. I’ve attached the files to be downloaded from here.

Firstly you need to download the Font file and Capctha file ( Download Here: Captcha (1231) ) ( This script is built of the one from Simon Jarvis ). Copy these two files into your root folder. Then open your details template “sobi2.details.tmpl” and copy and paste the code below. ( please note if you wish to use this function else where, you can ignore the sobi2.details.tmpl and add the form to your component of choice.

For Sobi2 Only ( Testing done in legacy mode )

$link = sefRelToAbs("index.php?option=com_sobi2&sobi2Task=sobi2Details&catid={$catid}&sobi2Id={$mySobi_id}&Itemid=2");
$task = mosGetParam( $_REQUEST, 'task', '' );
$mySobi_id = $mySobi->id ;

switch ($task) {
case 'email' :
emaillisting($mySobi_id);
}

function emaillisting($mySobi_id) {
global $database, $mainframe;
global $mosConfig_live_site, $mosConfig_mailfrom, $mosConfig_fromname;

$directory_email = mosGetParam( $_POST, ‘directory_email’, ” );
$directory_name = mosGetParam( $_POST, ‘directory_name’, ” );
$v_firstname = mosGetParam( $_POST, ‘name’, ” );
$v_email = mosGetParam( $_POST, ‘email’, ” );
$v_telephone = mosGetParam( $_POST, ‘telephone’, ” );
$v_comments = mosGetParam( $_POST, ‘comments’, ” );
$v_province = mosGetParam( $_POST, ‘province’, ” );
$number = intval( mosGetParam( $_POST, ‘number’, 0 ) );
$othernumber = intval( mosGetParam( $_POST, ‘othernumber’, 0 ) );
$sum = intval( mosGetParam( $_POST, ‘sum’, 0 ) );
$DIRECTORY_CONTACT_LETTER=(“
Name: %s

Email: %s

Telephone: %s

Province: %s

Message: %s”);
$query_text = sprintf($DIRECTORY_CONTACT_LETTER, $v_firstname, $v_email, $v_telephone, $v_province, $v_comments, $mosConfig_fromname );

//$session =& JFactory::getSession(‘captcha_word’);
$session =& JFactory::getSession();
$code = $session->get(‘captcha_word’);
if(($code == $_POST['captcha_word']) && (!empty($code)) ) {

$success = mosMail( $email, $mosConfig_fromname , $directory_email, “yourdomain.com Website Enquiry”, $query_text, 0, null,null,null,$v_email,$v_firstname );
$success = mosMail( $email, $mosConfig_fromname , $mosConfig_mailfrom, “Copy of yourdomain.com Website Enquiry for ” . $directory_name, $query_text, 0, null,null,null,$v_email,$v_firstname );

mosRedirect(“index.php?option=com_sobi2&sobi2Task=sobi2Details&sobi2Id=$mySobi_id”, “Message sent successfully..”);

} else {
mosRedirect(“index.php?option=com_sobi2&sobi2Task=sobi2Details&sobi2Id=$mySobi_id”, “Message sending failed. Please insert the correct details in security box..”);
}

}

Then you need to add the form of your choice, here is one that we made. ( change the fields to suit your needs )

id ); ?>”
method=”post” name=”emailForm” target=”_top” id=”emailForm”>Name:

Email:

Telephone number:

Province:

Message:

Security Code:

customFieldsData['field_email']; ?>” />
customFieldsData['field_contact_person']; ?>” />
” />
” />

If you wish to use the code above you need to alter it a bit to suit the component needs. The basics you will need is a simple function and a form:

function form () {
global $database, $mainframe;

//$session =& JFactory::getSession(‘captcha_word’);
$session =& JFactory::getSession();
$code = $session->get(‘captcha_word’);
if(($code == $_POST['captcha_word']) && (!empty($code)) ) {

echo “Great Success, very nice”;

} else {
echo “wrong code”;
}

}

Please don’t forget to add your form. The jfactory frame works had to be added to the function in order to make it work. For Joomla 1.5 sessions work differently to Joomla 1.0.

Feel free to use our forum for support, Snake and the moderaters will assist there.

Posting twitter posts with Curl using PHP, Sobi2 and Joomla

admin — Sat, 07 Mar 2009 05:09:31 +0000

Being experimenting with the API of Twitter. I started out playing with curl to send updates from a joomla directory, once a user added a listing. The concept was to have followers follow the updates live via twitter. Tools used: Joomla , Sobi2 and some basic PHP.

Firstly make sure your server supports curl and that the extension is active. A simple install to linux would look something like this.

sudo apt-get install curl libcurl3 libcurl3-dev php5-curl

Now you have PHP cURL installed, the next thing you need to do is to restart apache2, run the following command in your terminal:

sudo /etc/init.d/apache2 restart

In the command terminal run the following command to test the connection to twitter. You can use the -v dump method to post any errors on the screen if connection fails. example curl -u -v ( and then the command )

curl -u username:password -d status="twittering from curl" http://twitter.com/statuses/update.xml

I then used the PHP curl features to do the same thing from PHP:


<?php

// Set username and password

$username = 'username';

$password = 'password';

// The message you want to send

$message = 'is twittering from php using curl';

// The twitter API address

$url = 'http://twitter.com/statuses/update.xml';

// Alternative JSON version

// $url = 'http://twitter.com/statuses/update.json';

// Set up and execute the curl process

$curl_handle = curl_init();

curl_setopt($curl_handle, CURLOPT_URL, "$url");

curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);

curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);

curl_setopt($curl_handle, CURLOPT_POST, 1);

curl_setopt($curl_handle, CURLOPT_POSTFIELDS, "status=$message");

curl_setopt($curl_handle, CURLOPT_USERPWD, "$username:$password");

$buffer = curl_exec($curl_handle);

curl_close($curl_handle);

// check for success or failure

if (empty($buffer)) {

    echo 'message';

} else {

    echo 'success';

}

?>

This is just a basic layout, the twitter API allows you to do so much more. Now comes the fun part. If you are using joomla and sobi2 as a directory component, here is a way to place the above code to your sobi2 directory and receive live updates once a user adds a listing.

Open the sobi2.class file , then scroll down to line 533 and insert the above code just above the sql query. You can then use the variables within the sobi2 framework to display to twitter. Here is another sample of this:

function ShortenText($text) {
$chars = 140;
$text = $text." ";
$text = substr($text,0,$chars);
$text = substr($text,0,strrpos($text,' '));
$text = $text."...";
return $text;
}

$username = 'username';
$password = 'password';

$twitpost = $this->title." has joined your directory!";

$twitmessage = ShortenText($twitpost);

$url = 'http://twitter.com/statuses/update.xml';

$curl_handle = curl_init();
curl_setopt($curl_handle, CURLOPT_URL, "$url");
curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);
curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl_handle, CURLOPT_POST, 1);
curl_setopt($curl_handle, CURLOPT_POSTFIELDS, "status=$twitmessage");
curl_setopt($curl_handle, CURLOPT_USERPWD, "$username:$password");
$buffer = curl_exec($curl_handle);
curl_close($curl_handle);
// check for success or failure
if (empty($buffer)) {
$twitresponse = 'Deal not posted to Twitter';
} else {
$twitresponse = 'Deal posted to Twitter';
}

Just adapt it as you need to. you can go as far as adding the url to the post. ( incorporate tiny url to keep the url short ). Will post a seperate tutorial on this shortly.

Amazing Photoshop Light Effects

admin — Tue, 02 Sep 2008 07:25:50 +0000

With a quick stumble i came across these Amazing Photoshop Light Effects. Being such a big fan of photoshop, i decided to blog review it quick. These tutorials can be viewed at designerside. They feature top lighting methods that can be reproduced in your everyday web designing techniques.

Please visit Designerside to view all these amazing photoshop light effect tutorial’s.

How to Run Dreamweaver CS3 on Linux using Wine

admin — Fri, 13 Jun 2008 14:58:42 +0000

This is for those Linux lovers and website developers!, This tutorial that i stumbled on will show you how you can run Dreamweaver CS3 on Linux using Wine. I would imagen that this will apply for all the CS3 packages.

I’m using Ubuntu 8.04 Edgy Eft for this, so change these commands to match up whatever your distro uses to accomplish the same thing. Please also make sure that your Dreamweaver has been installed in your Windows partition. you need this before you can run Dreamweaver in your Linux.

All right, lets get cracking on this!

First, install wine if you haven’t already. Like I stated before, I’m using Ubuntu to do this, so apt-get is my choice of software installers. Your distro may be different. Consult your system docs for the correct syntax for your software package management tool.

Note: Make sure you have the latest version of Wine for your distro. The current release can be downloaded here: http://www.winehq.org/site/download

sudo apt-get install wine

Your wine user directory and other options aren’t set up by default, so issue the winecfg command to set up the environment:

winecfg

which created the necessary .wine directories under my home directory.

Next, copy the entire “C:\Program Files\Adobe” program directory from your Windows partition to the wine program directory “/home/(username)/.wine/drive_c/Program Files/” like so:

(my window’s partition is sda2. yours may be different)

cp -R /dev/sda2/Program\ Files/Adobe/* /home/(username)/.wine/drive_c/Program Files/Abobe

This is a large directory, so it might take a few minutes to copy over. It also might be easier for Linux newbies to copy/paste this in the GUI.

After that, copy the whole “Adobe” folder from “c:\Documents and settings\All users\Application Data” to “/home/(username)/.wine/drive_c/window/profiles/all users/”

Then, copy the whole “c:\Windows\system32\Macromed” directory to “/home/(username)/.wine/drive_c/window/system32/Macromed/”. Notice that the “ia” is left off the end of the word “Macromedia”. This is not a typo.

Next, copy the whole “Adobe” folder from “c:\Program Files\Common Files” to “/home/(username)/.wine/drive_c/Program Files/Common Files/”

Finally, you’ll need to copy over the “c:\WINDOWS\WinSxS” directory to your Wine “windows” directory. Wine doesn’t have a WinSxS directory, so copy the whole thing over intact. Dreamweaver needs the latest C++ runtime and other assorted files from there to work properly.

After you have copied all of the program files and system files Dreamweaver needs to your Linux partition, you need to export the Dreamweaver registry keys. Boot back into Windows and use regedit to dump this information to a file:

Start --> Run --> "regedit" (Enter)

Export the entire “HKEY_LOCAL_MACHINE/Software/Macromedia/” registry key to “C:\dreamweaver.reg” and boot back into Linux.

Now we’ll need to convert the registry keys to ASCII format with the recode utility. Let’s install that program if it isn’t already:

sudo apt-get install recode

Copy over the registry keys to your home directory and convert them to ascii like so:

recode ucs-2..ascii dreamweaver.reg

And now import the keys into wine:

wine regedit dreamweaver.reg

Finished! Now cd over to your Dreamweaver directory and run DWCS3! Hopefully it will work… lol

cd .wine/drive_c/Program\ Files/Adobe/Adobe\ Dreamweaver\ CS3/
wine Dreamweaver.exe

All done!, to find out more on other packages please feel free to visit wine’s website. I am sure this could be found on the Wine app Db.

Credits to: openaddict.com/node/25 , For more details on this.

How to implement a Captcha system to your website

admin — Mon, 02 Jun 2008 12:04:40 +0000

Today we look at very simple feature to which is a very important one. A Captcha Security device, to help prevent that unwanted spam.

This script generates images (known as “Captcha’s”) which contain security codes used for protecting a form from spam bots. By encoding a ‘password’ inside an image and asking the user to re-enter what they see you can verify the user is a human and not automated software submitting your form.

<?php
session_start();

/** File: CaptchaSecurityImages.php*

Author: Simon Jarvis* Copyright:

2006 Simon Jarvis* Date: 03/08/06



* Updated: 07/02/07



* Requirements: PHP 4/5 with GD and

FreeType libraries



* Link:

white-hat-web-design.co.uk/articles/php-captcha.php*

This program is free software;

you can redistribute it and/or

* modify it under the terms of the

GNU General Public License*

as published by the Free Software Foundation;

either version 2

* of the License, or (at your option)

any later version.

*

* This program is distributed in the

hope that it will be useful,

* but WITHOUT ANY WARRANTY; without even the

implied warranty of

* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

 See the

* GNU General Public License for more details:

*

http://www.gnu.org/licenses/gpl.html**/


class CaptchaSecurityImages {
var $font = 'monofont.ttf';
function generateCode($characters) {

/* list all possible characters, similar

looking characters and vowels have been removed */

$possible = '23456789bcdfghjkmnpqrstvwxyz';

$code = '';

$i = 0;

while ($i < $characters) {

$code .= substr($possible, mt_rand(0,

strlen($possible)-1), 1);

$i++;

}

return $code;

}
function CaptchaSecurityImages

($width='120',$height='40',$characters='6') {

$code = $this->generateCode($characters);

/* font size will be 75% of the image height */

$font_size = $height * 0.75;

$image = imagecreate($width, $height) or die

('Cannot initialize new GD image stream');

/* set the colours */

$background_color = imagecolorallocate

($image, 255, 255, 255);

$text_color = imagecolorallocate

($image, 20, 40, 100);

$noise_color = imagecolorallocate

($image, 100, 120, 180);

/* generate random dots in background */

for( $i=0; $i<($width*$height)/3; $i++ ) {

imagefilledellipse($image, mt_rand(0,$width),

mt_rand(0,$height), 1, 1, $noise_color);

}

/* generate random lines in background */

for( $i=0; $i<($width*$height)/150; $i++ ) {

imageline($image, mt_rand(0,$width),

 mt_rand(0,$height),

mt_rand(0,$width), mt_rand(0,$height)

, $noise_color);

}

/* create textbox and add text */

$textbox = imagettfbbox($font_size, 0,

$this->font, $code) or die

('Error in imagettfbbox function');

$x = ($width - $textbox[4])/2;

$y = ($height - $textbox[5])/2;

imagettftext($image, $font_size, 0,

 $x, $y, $text_color,

$this->font , $code) or die

('Error in imagettftext function');

/* output captcha image to browser */

header('Content-Type: image/jpeg');

imagejpeg($image);

imagedestroy($image);

$_SESSION['security_code'] = $code;

}
} 

$width = isset($_GET['width']) &&

$_GET['height'] < 600 ? $_GET['width'] : '120';

$height = isset($_GET['height']) &&

$_GET['height'] < 200 ? $_GET['height'] : '40';

$characters = isset($_GET['characters']) &&

$_GET['characters'] > 2 ? $_GET['characters'] : '6';
$captcha = new CaptchaSecurityImages

($width,$height,$characters);
?>

Copy and paste the above code and save it on your webserver as CaptchaSecurityImages.php.You will also need to place a copy of the “Monofont” font in the same directory as the CaptchaSecurityImages.php file. (Alternatively you can replace the line var $font = ‘monofont.ttf’; with the name of whatever font you want to use)download You can download the captcha zip which contains all the files needed to implement the script including the required font.

Place the following code on your form. This will generate an image with a random string of characters along with the text field where the user will retype the code.





Security Code:

"security_code" type="text" />

You can also specify certain options for the image by passing them as variables to CaptchaSecurityImages.php.

The options available are the width and height of the image and the number of characters




width=100&height=40&characters=5" alt="captcha" />

name="security_code" type="text" />


session_start();
if(($_SESSION['security_code'] ==

$_POST[ security_code'])

&& (!empty($_SESSION['security_code'])) ) {
// Insert you code for processing the form here,

e.g emailing the submission,

entering it into a database. 
unset($_SESSION['security_code']);
} else {
// Insert your code for showing an error message here
}
?>

Just a Big thank you to the http://www.white-hat-web-design.co.uk team, for this wonderful development. Please note that this code can be implemented into any php file, and is very easy to use

Make fancy buttons using CSS sliding doors technique

admin — Mon, 26 May 2008 13:01:54 +0000

This article will show you how to create fancy buttons using CSS sliding doors technique. It is much better to use this technique than to use image buttons because you can apply the style to any link and at the same time you don’t have to create an image for each button. The ultimate Css for your website. website ideas with great inspiration

What is sliding doors technique?

The technique is very simple. If we want to have a dynamic-width button, we have to find a way to stretch it horizontally. We will accomplish this if we create two background images that will define the button: one for the left side and one for the right side – like in the example below.

LEFT RIGHT

Smaller, right image will slide on the top of the larger, left image (that why it is called sliding doors). The more right image slides to the left, the narrower button will be and vice versa. The image below shows the technique.

Styling the button

First, let’s take a look at the HTML elements that will simulate button. We have element within the element. Span element contains left, wider image and text. The width of the text will determine the size of the button.

<a class="button" href="#"><span>Submitspan>a>

Now let’s take a look at the CSS code. We have a .button class that will be applied to element and .button span class that will be applied to element within element. We also have .button:hover span that will change the font style within element. And that’s all. Simple, eh? The comments in the code below describes each element.

a.button {    /* Sliding right image */background:

transparent url('button_right.png') no-repeat scroll top right; 

display: block;

float: left;

height: 32px; /*

CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */

margin-right: 6px;

padding-right: 20px; /*

CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */

/* FONT PROPERTIES */

text-decoration: none;

color: #000000;

font-family: Arial, Helvetica, sans-serif;

font-size:12px;

font-weight:bold;

}a.button span {

/* Background left image */ 

background: transparent url('button_left.png') no-repeat;

display: block;

line-height: 22px; /*

CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */

padding: 7px 0 5px 18px;

}

a.button:hover span{

text-decoration:underline;

The result will look like the examples below.

Please visit www.jankoatwarpspeed.com for more information with regards to this technique.

Adobe Photoshop Tutorials – Part 2 of 5

admin — Mon, 26 May 2008 06:37:36 +0000

Create shape and duplicate

First you create a triangular shape. You can select a triangle from the Custom Shape palette and flip it upside down (Edit > Transform > Flip Vertically). Duplicate this shape layer using command/control + J. Now hit command/control + T (Edit > Free Transform) to rotate this shape. First move the middle point down to towards the center.

Duplicate and transform again

Now put your cursor outside the shape so you see the curved rotate cursor and rotate the shape as shown in the example below and press enter. Duplicate the layer again by pressing command/control + J and transform again by pressing command/control shift + T. Repeat this till you have a complete ray. Just press command/control + J followed by command/control shift + T.

Add color

Now you can give each Shape Layer a different color.

My end result

I decided not to use the different colors and ended up with a totally other result. I hope you don’t mind I wasn’t in a flashy mood

Create shapes and duplicate ( By Veerle’s Blog ) To learn more on this please visit Veerle’s

CSS tricks and tips

admin — Wed, 09 Apr 2008 13:44:15 +0000

I have compiled a list of articles that better explain valid CSS and xHTML code. It’s becoming more commonly to use valid CSS. And we all know how much time we are spending in all those hacks and fixes for various browsers. I will keep adding to this list, so stay tuned.

1. Rounded corners without images

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

2. Style your order list

This is line one

Here is line two

And last line

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}

ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

3. Tableless forms

label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}

br {
clear: left;
}

4. Double blockquote

blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, “Times New Roman”, Times, serif;
}

5. Gradient text effect

CSS Gradient Text

h1 {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

For more in depth look please visit stylized web

Adobe Photoshop Tutorials – Part 1 of 5

admin — Sat, 05 Apr 2008 10:02:33 +0000

In this 5 part series we will be covering different styles and technique’s that can be used in Adobe Photoshop. From light motion trails to glowing sparks. Here you will learn to create beams, glows, motion trails, rainbows, and other lighting effects, giving your images ambiance and depth.

Creating light motion trails & glowing sparks ( By Veerle’s Blog ) To learn more on this please visit Veerle’s

A technique often used in advertising these days, is these glowing lines. They look like light motion trails. If you ever wondered how to create these kind of lines, here is how I do it…

Light motion trails

Drawing a line

Draw a nice thin curved filled line in Photoshop using the Pen tool.

Add a glow

Double click the shape layer on the right to activate the Effects. Check the Outer Glow option and play with the color, transparency,… That’s basically it. I think the hardest part is finding the exact setting and drawing the exact line you want.

Glowing sparks

Create the right brush

Create a brush using the following settings. Choose the default Soft Round 21 px brush. Go to the Brushes palette and edit the following settings:

Change the spacing in the Brush Tip Shape to 222%
Check Shape Dynamics and change the Size Jitter to 100%
Check Scattering, check Both Axes and put the Scatter to 775%

Draw a random line using the brush

Choose a light color that will match perfect for the glowing sparkling dots. Draw a random line using the brush. That’s it

Trail of stars

As an extra we create a trail of stars. Launch Illustrator, create a new document and draw a group of random stars using the Star shape tool. You can use a circle as a guide (draw a circle and hit command/control + 5). Select all stars and drag them in the Symbols palette. Now select the Symbol Sprayer tool, choose the stars as symbol to spray with and draw the trail. You may need to experiment a bit with the Symbol Sprayer tool settings. Do this by double clicking the Symbol Sprayer tool in the Toolbox. If you got your trail, select all stars and go to Object > Expand. Select all stars, go to Photoshop and paste your stars as a Shape Layer. Fill them in the color you want, add some transparency or a gradient mask etc. Play around.

Creating light motion trails & glowing sparks ( By Veerle’s Blog ) To learn more on this please visit Veerle’s