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
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 [...]
