Welcome to my personal webspace...

I'm a webmaster living in Manchester and I specialise in user interface and user experience design, although I do like front-end development too. One day you can see me designing user-focused web interface for e-commerce client, the other I could be developing it using XHTML, CSS, JavaScript libraries (like jQuery) and progressive enhancement approach. So take a look at my work, maybe you'll find something nice to look at. And don't forget to subscribe to my RSS feed top get the latest headlines!

May 14 2009

CSS horizontal menu with search form tutorial part 2 – coding

Tagged Under : CSS, menu, tutorial

Yesterday we have started designing our new menu bar in Photoshop. Today we will focus on coding our menu to HTML and CSS. With the ready PSD template provided before we can all begin by opening it in Photoshop and hide all text layers.

Using rectangular marquee tool select the inner part of the menu (without borders) and transform selection to achieve width around 2px and the full height of the menu (mine is set to be around 35px). Copy the merged selection (you don’t need to merge the layers, just use Ctrl+Shift+C to hard-copy the selection) and create a new file with clipboard image dimensions and paste the content into the new canvas.

May 11 2009

CSS horizontal menu with search form part 1

Tagged Under : CSS, forms, html, menu, search, Web Design

Today we will have a closer look at the horizontal menu creation using CSS and Photoshop. I suppose that you have basic knowledge of HTML and CSS and you know your way around Photoshop CS series. But this won’t be any other horizontal menu. Sometimes life requires us to put search form within the menu, whether on the left or right side. some may wonder how it works, but it’s nothing very difficult.

Let’s start with creating a sample menu in Photoshop. For that purpose I will use one of the sites I have been working on recently. Draw a rectangular shape of desired width and height and add some styling like gradient and stroke with values displayed on images.

May 07 2009

Browsers Compatibility with CSS standards

Tagged Under : Browsers, chrome, CSS, firefox, internet explorer, opera

During the time when Internet Explorer was the only browser widely available thanks to Microsoft’s Windows systems some smart people created Cascade Style Sheet which helps us define the looks of the website without any hassle. Since then CSS went through a lot of improvements leading to new abilities, optimizing its structure and giving designers new possibilities. Then the market spawned open-source browsers like Firefox or Safari and the revolutions begun.

banner