Asim Subhani’s Official Website

I and my designer friend Naveed launched Asim Subhani’s official website. My part in the project was slicing PSDs, Html, CSS, jQuery, and a bit of PHP. I make use of CSS3 so you can’t open it in IE6 and IE7.

Here’s the quick review of techniques used in the development of this project.

Entrance Page

Asim Subhani Enterance Page

This page contains a background image stretched across the browser window. This technique is common these days. On CSS-Tricks, Chris explained two techniques used to make full page background. I used the 2nd technique.

Custom Fonts

Custom fonts are added using @font-face CSS property. But the problem is different browsers support different font formats. For example Firefox and IE9 support woff format. Chrome supports ttf and svg. Better check this article to know more about font type support in browsers.

I used Font Squirrel to generate font kit containing different type of fonts that browsers support and a CSS file. Copy the code in CSS file and paste it in your project’s CSS file containing typography styles. Also don’t forget to copy font files in the kit and paste it in your css folder of your project.

Page Content Slider

Asim Web Main Navigation

On home.php, when you click on links in main navigation at the bottom of the page, content slides left or right. This animated effect is achieved using jQuery plugin called jCarousel. jCarousel is used with static controls. Click here to check the example.

Custom Scrollbar

On the second page “ASIM SUBHANI”, you may have noticed that the scrollbar is not the browser’s default. It’s customized having blue button to scroll the content as shown below.

Asim Subhani Web jScrollPane

jScrollPane is used to customize the default scrollbar of browser. Check How to use section on this page.

Image Slider

In the PHOTOS section of the website, click on any subsection (Wallpapers, Portraits, Events). iPhone like slider appears as shown below:

Asim Subhani ImageFlow

This is actually done using ImageFlow. ImageFlow is an excellent jQuery plugin with lots of options to customize it. Check this page for usage and this page for documentation.

I know some of my readers are sad because I haven’t yet published Part 6 of CRUD series. I apologize for the delay :(


comments powered by Disqus