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