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: 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
Posted by TimSlavin at November 11, 2004
Please note this article has been completely rewritten, tightened up, and re-organized on April 12, 2006. It provides lots of information about coding emails to display well in Google Mail and Lotus Notes. A much earlier version of this article was published on SitePoint, a site for web developers and designers, and [...]
Posted by: siddesigner on: September 29, 2008
Today we learn about opacity in CSS! I made an example here and here you have the files.
Information about opacity in CSS:
The opacity property takes a value of the amount of transparency from 0.0 to 1.0. 0.0 is 100% transparent – anything below that element will show completely through. 1.0 is 100% opaque – [...]
Posted by: siddesigner on: July 26, 2008
Css benfits
Faster page loading
Lowered hosting costs
Redesigns are more efficient
Redesigns are less expensive
Visual consistency maintained throughout website(s)
Better for SEO
Accessibility
Competitive edge (job security)
Quick website-wide updates
Easier for teams to maintain (and individuals)
Increased usability
More [...]
Posted by: siddesigner on: June 3, 2008
Rounded corners add a nice little design to any page – using rounded corners can be image heavy; So, this post I am going to show you how to make rounded corners using only CSS! This is such a neat little trick and can be very handy.
There are a lot of different [...]
