csshowto.com

From PSD to CSS HTML in 4 easy tutorials – part 4

CSSHowTo.com — Sun, 19 Oct 2008 18:58:53 +0000

This is the 4th and final instalment in this series on converting a PSD to CSS, its taken a little longer to get finished than I would have liked! Here is the 4th part on how to turn a PSD design into a fully working webpage. At the end of the last tutorial we finished working [...]

Choose our next tut and getting CSS work done!

CSSHowTo.com — Wed, 30 Jul 2008 20:38:48 +0000

I got around to posting the 3rd in our popular series of PSD to CSS tutorials last week and I have been suprised at how much people seem to be liking them. So much so we are going to let you decided what our next tutorial should be. The 4th and final part is on its [...]

From PSD to CSS/HTML in Easy Steps – Part 3

CSSHowTo.com — Thu, 24 Jul 2008 15:26:05 +0000

Thanks for staying with us and here we now have part 3 of 4 in our series of how to turn a psd to css/html. In part 1 and part 2 of this article we created some of the major elements that we will need in order to hold our content. This article will deal [...]

From PSD to CSS/HTML in Easy Steps – Part 2

CSSHowTo.com — Tue, 17 Jun 2008 20:57:02 +0000

Welcome to part 2 of our tutorial. In part 1 we created the basic structure of the site on which we are going to build our photography site. This is the second in our 4 part series on how to take a PSD file and convert it into a fully CSS based html page. These [...]

From PSD to CSS/HTML in Easy Steps – Part 1

CSSHowTo.com — Fri, 23 May 2008 13:32:17 +0000

This is the first in our 4 part series on how to take a PSD file and convert it into a fully CSS based html page. These are the first in a series of tutorials in which we build a fully working Photography site, all in clean Xhtml and CSS. All the code, templates and [...]

CSS Image Maps With Pop-Up Tool Tips

CSSHowTo.com — Sun, 01 Jul 2007 22:09:08 +0000

Using an unordered list, a couple of images, and a little CSS, we can create an accessible "image map" with pop-up tool tips that provide our readers more information on the links the map contains. There are several techniques out there for doing this, but, unlike some, the one outlined here has the advantage of working in older versions of Internet Explorer.

Making A CSS Based Calender

CSSHowTo.com — Sun, 01 Jul 2007 05:43:11 +0000

With some simple CSS applied to an unordered list, we can quickly and easily make a nicely formatted calender that's easily lightweight and updated.

Accessible Graphical Menus

CSSHowTo.com — Fri, 29 Jun 2007 18:54:58 +0000

When designing a web site, it's generally a good idea to keep your sites navigational elements text-based. This has several advantages, like being search engine friendly and easily accessible to screen readers and hand-held devices. Let's face it, though, sometimes that's not always practical and what the site design really calls for is a nice menu comprised of graphics in which the actual menu text is stylized. So, here's a little trick that will give you the best of both worlds. We're going to build a graphically-based navigation menu out of an unordered list.

Hanging Punctuation With CSS

CSSHowTo.com — Sat, 20 Jan 2007 03:50:41 +0000

Hanging Punctuation refers to the technique of positioning certain typographical elements, such as bullets, quotation marks on pull quotes, etc. into the margin of a document, so that the main text that the glyph highlights remains flush with the rest of the body copy around it. Often seen in print, rarely used on the web, hanging punctuations can help keep the flow of your document and make the text easier to read.

Horizontal Menus That Grow on You

CSSHowTo.com — Thu, 18 Jan 2007 03:00:34 +0000

We're going to create a horizontal row of boxes containing link text. When we move the mouse over one of these boxes, it's going to get taller and the text larger and bold. I'll link to a finished example at the end of the tutorial.