In this article I will take a basic portfolio website and enhance it with CSS3 properties like text shadow, box shadow and border-radius which are supported in newer browsers such as Chrome, Safari, Firefox and even the latest version of Opera. The website also has special consideration for Internet Explorer.
jQuery
The slider is a small jQuery function and is pretty standard as it is. Of course, there are many fancy jQuery sliders on the internet that can be used to show more advanced transitions between images. For this demo I used the following code to activate the slide transition and the navigation bar that controls the slider.
$("#nav ul li").slider();
HTML
The images used in the slider are in a folder called images while the image tags in the html document are in a container with an id of imgContainer on the web page.
CSS3
As mentioned the site is enhanced for browsers that support text shadow, box shadow and border-radius. I tested the page on Chrome 5.0.3, Firefox 3.6.3, Opera 10.53, and Safari 4.0.3. Furthermore, I tested the page on IE 7 just to make sure the page looked okay even without the enhancements since IE 6-8 don’t support most CSS3 properties.
