Posted by: siddesigner on: December 10, 2008
I believe the recent surge in popularity of CSS frameworks comes from a lack of basic understanding of the CSS box model and how it’s implemented across browsers. I wanted to share with you some quick tips on how to avoid easy pitfalls so you can create your own CSS framework in no time flat, [...]
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 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: September 29, 2008
Motivate
Design your site to meet specific user needs and goals. Use motivators to draw different user “personae” into specific parts of your site.
User task flow
Who are your users? What are their tasks and online environment? For a site to be usable, page flow must match workflow.
Architecture – it’s 80% of usability
Build an efficient navigational structure. [...]
