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.
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 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
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.
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.
In the PHOTOS section of the website, click on any subsection (Wallpapers, Portraits, Events). iPhone like slider appears as shown below:
I know some of my readers are sad because I haven’t yet published Part 6 of CRUD series. I apologize for the delay :(