Posted by: siddesigner on: October 25, 2008
There are literally hundreds of web browsers in use around the world. All of them implement the W3C document standards a little differently. Web designers must wrestle with these differences to make a web site work. This article discusses the effect those different implementations has on design.
What is Cross Browser Compatibility?
If a web [...]
Posted by: siddesigner on: October 25, 2008
If you have Photoshop knowledge, you can make your own icon image. Start with a 64×64 image and after you’ve finished your creation, resize it down to 16×16 and save it as .ico file. If you do not have the icon file format in Photoshop, you can download it here.
Download Photoshop .ico file format. Right-click [...]
Posted by: siddesigner on: October 25, 2008
I know many people have wondered how to center their content both horizontally and vertically but never managed to find a solution on how to do this using CSS. I have seen people use tables to accomplish this, in this tutorial I will show you how it can be done.
We start off by using an [...]
Posted by: siddesigner on: October 4, 2008
Welcome everyone, to another long yet humourous tutorial from me! This one is going to take you through every nook and cranny of taking a lovely, glossy layout from Photoshop and putting it into a webpage with no tables, valid XHTML and CSS.
Here’s the one we’re going to be working with today, and later on [...]
Posted by: siddesigner on: October 4, 2008
1. In your html page embed link to your css file:
<html>
<head>
<title>Test Document</title>
<link href=”styles.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
</body>
</html>
2. Create your bulleted list. Here is ours:
<p>Most popular apple varieties in New England today:</p>
<ul>
<li>McIntosh</li>
<li>Cortland</li>
<li>Red Delicious</li>
<li>Empire</li>
<li>Rome</li>
</ul>
3. In css file we will redefine <li> tag. Let’s change these default bullets to our custom bullets.
li {
list-style-position: outside;
list-style-image: url(your_bullet.gif);
}
4. Format [...]
Posted by: siddesigner on: October 4, 2008
Looking to add a little style to your image links? Let’s use CSS to add a background color that appears when the mouse hovers over the image. This style can be used on a variety of images but we’ll be looking at adding this style to affiliate buttons.
Step 1
First, we have the html [...]
Posted by: siddesigner on: October 4, 2008
This tutorial will explain how to create a resizable tabs navigation using CSS and background images.
Compatible with all major browsers.
Download image used in this tutorial from here.
To start with we need to create a simple layout with a list. Please make sure that each link contains <span> tag.
<div id=”Wrapper”>
<div id=”Navigation”>
<ul id=”mainNav”>
<li><a href=”#”><span>home</span></a></li>
<li><a href=”#” class=”active”><span>services</span></a>
<li><a href=”#”><span>about [...]
Posted by: siddesigner on: October 4, 2008
This tutorial explains how to create a text with shadow using CSS.
It has been tested and works with the following browsers:
Firefox 2.0.0.4
Internet Explorer 6.0
Mozilla 1.7.13
Opera 9.21
Netscape 8.0.4
You can see it in action here: Demo.
First let’s create a structure of our text container together with a text.
<div id=”wrapper”>
<span class=”firstlayer”>Text with shadow using CSS</span>
<span class=”secondlayer”>Text with shadow [...]
Posted by: siddesigner on: October 3, 2008
es, I can help.
More advanced readers, move along. This is JavaScript beginner territory, but this is one of those steps that is really rich in DOM scripting nutrients, so I’m very pleased to discuss it.
What Prasun is describing, just by itself, is the behavior of a set of radio buttons. You click one, and it [...]
Posted by: siddesigner on: October 1, 2008
by Melissa Arbotante, BHIPro
Monday, August 13, 2007
Even as a little kid I have already been bombarded with lessons about colors. I know that most of you don’t really take these lessons too seriously but as a fine arts graduate studying about colors takes a big chunk in my curriculum. And as a graphics designer, application is [...]
