For those who are creating websites often this surely is a hot topic most of the times. It's hot because there are few resources on the web which really point out how to get the most out of a button. It's hard to achieve something visually appealing and also compatible in most browsers. Recently I was in a search for something like this and didn't find anything to match my needs for a project I'm working on. I needed a cool button element, which can support multiple fonts (I like to use fonts yes), with some effects and which didn't force me to create 1 image per button just to have all that in one element. Guess what, I didn't find anything to sum all that so I decided to create my own "button machine".

The principle is quite simple. We have a bigger image to server as the background of our buttons with states for hover effects and all that, a smaller image to server as our button action indicators and a php file which takes care of the font processing problem. Add that all toghether and you get a really nice button generator which you can use and re-use in your projects without having to open photoshop each time you need something a little bit fancier.

Without too much talking let's take a look at the demo of what I achieved by joining css with html and php.

Demo: http://www.drsoft.com/misc/articles/buttons
Download example: http://www.drsoft.com/misc/articles/buttons/buttons.zip
P.S. The php works on PHP5+, you must give write permissions to the temp/ dir so it can generate text images. Read more ...

When your page performs long tasks it's very important to let the visitor know something takes a little longer than expected and patience is required. Many of them will tend to reload or even close the page thinking it's buggy or blocked. To avoid that and ensure they get the message you can use a progress bar as an indicator.

This can be easily done using javascript and may look like a silly post to you but it's actually harder than you think to represent a running task with a progress bar. You have a lot of examples on the internet but when you try to chain a real script running a real task with the actual progress bar it gets complicated.

Normally, in PHP, whatever you echo will be sent to the browser only when the script finishes it's job and not progressive. Let's consider the following loop as an example:

for ( $i = 0; $i < 10; $i++ )
{
	echo $i . "<br>";
	sleep(1);
}

Running this code will keep your browser busy for 10 seconds without echoing anything. So how are we supposed to display a progress of a task if the content is made available only when the script finishes?

First, let's create the code for our progress bar. We'll use pure css to display it. No background images or flash funky things, just 2 divs and some css code. One div will serve as the wrapper and will have a border to represent the progress container. The other div, placed inside the first will serve as the progress metter and will have a different background color.

<div class="progress_wrapper">
	<div class="progress" style="width:0px;"></div>
</div>

CSS code:

.progress_wrapper {width:300px;border:1px solid #ccc;position:absolute;top:200px;left:50%;margin-left:-150px}
.progress {height:20px;background-color:#000}

It's very important to make our wrapper div positioned absolute. If you're having problems keeping it at a very specific place on your page you can place the code inside another element with a relative position. This way you will change the top, left coordinates to that element instead of the page body.

As you can see, I used 50% as the distance from the left coordinate to the start of the progress bar. Adding a 'margin-left' of minus half of the element's length will center it.

You're probably wondering why I'm using the absolute positioning. Well, what if I tell you that PHP can be tweaked to send content to the browser even if it's job didn't finished yet? With this possibility in mind, we can send multiple instances of the same code and, having an absolute position, place them on top of each other. Basically, the current progress bar will be under the next and so on until it reaches an end.

We will have to use 'ob_start' to turn on output buffering before the loop, 'ob_flush' and 'flush' to send the content to the browser after each iteration:

ob_start ();
for ( $i = 0; $i < 10; $i++ )
{
	echo $i . "<br>";
	ob_flush();
	flush();
	sleep(1);
}

Having this working as needed, it's time to prepare our content and place it inside the loop to actually display a working progress bar:

ob_start ();

$width = 0;		//	the starting width
$percentage = 0;	//	the starting percentage
$total_iterations = 10;	//	the number of iterations to perform
$width_per_iteration = 300 / $total_iterations; // how many pixels should the progress div be increased per each iteration

for ( $i = 0; $i <= $total_iterations; $i++ )
{
	echo '<div class="progress_wrapper"><div class="progress" style="width:' . $width_per_iteration . 'px;"></div></div>';
	$width += $width_per_iteration;
	ob_flush();
	flush();
	sleep(1);
}

Following the same criteria it's easy to add an indicator to show the percentage done, a background image to pretty up the bar a little bit and many other things.

Here's a demo of the script running and also a download link.

Read more ...

Just happy to announce that our design has been featured on most of the CSS galleries out there. This is exactly what we intended when we contacted webdesignbeach and asked for a good design to target the developers.

This kind of traffic usually has nothing to do with whatever your site's about but it's all in the design and inspiration for other people, however, given the fact that we're releasing something that designers and web agencies might benefit from, we're hoping to a, at least, 5% interest

Read more ...