Category Archives: Web Design

Crop and Resize Images with ImageMagick

Crop and Resize Images with ImageMagick

If your website allows users to upload photos, image cropping/resizing functionality certainly comes in handy. But users might not have access to image manipulation tools like Photoshop, so by providing a cropping/resizing feature you can allow users to upload photos from any device (e.g. tablets or phones) without them having to worry about the the final size. Furthermore, you can create different versions of the same image and also allow users to crop specific portions of uploaded picture.

In this article I’ll show you how to create an image cropping tool with the help of the ImageMagick PHP extension. This tutorial assumes that you already have the extension installed, so if not then be sure to read the manual.

Continue reading Crop and Resize Images with ImageMagick

The Ubuntu Font Now Available For Any Website Through Google Font Directory

Written by Andrew, @

Ubuntu font
Google announced that the Ubuntu Font Family is now available in the Google Font Directory which makes it very easy to install for any website:

Through the magic of the Google Font API any web designer can now pick Ubuntu from the Google Font Directory and bring the beauty and legibility of the Ubuntu fonts to their websites too.

To use it on your website, head over to Google Font Directory, select the Ubuntu font variant you want to use and copy the code to the “head” section of your blog (above “</head>”). The code looks like this:
<link href='' rel='stylesheet' type='text/css'/>

You can use the font for all the font on the website or only for some parts of it like the posts tile (like we are using it here, on WebUpd8). To only use it for the post titles, search for “h1” in your CSS code and add this:

font-family: 'Ubuntu', arial, serif;

WordPress Security Hacks and Tricks

By Paul Maloney |

Following on from my recently article about WordPress security plugins there are a number of ways you can shore up your security by using a few choice snippets and hacks.

Please do ensure you backup before making any changes to your files, the .htaccess if broken can cause your blog to stop working completely!…

Implementing @font-face

@font-face tutorial brought to you byMilton Bayer

@font-face is a CSS rule which allows you to show a font on a Web page even if that font is not installed on the users’ computer. This means that designers and developers can begin moving away from Web-safe fonts that users have pre-installed on their computer such as Arial, Times New Roman, Verdana and Trebuchet…

Transparent CSS Sprites

By Trevor Morris @

One of the most useful front-end development techniques of recent years is the humble “CSS Sprites”. The technique was popularised by Dave Shea on A List Apart in 2004 with his article CSS Sprites: Image Slicing’s Kiss of Death. CSS Sprites are a relatively simple technique once you understand the fundamentals and it can be applied in all manner of ways. A common use is for a graphic intensive navigation, but it can also be useful for buttons or even styling headings with the corporate font…