Web Design CSS Bookmarking List Summer 2008

A simple tool for finding CSS color codes.

An everything-you-need/want-to-know source for css

This tutorial is a handy on-line resource to turn to when you don't have a photoshop manual at your fingertips. Uniquely, it shows how to use a swatch of color from a single item in photoshop.

This is an awesome site that breaks down the science of each css tool. It gives a simplified explanation and easy to understand examples of how your code will change the visuals of your page. I will use this for reference in the future.

This is a quick guide useful to refer to when you forget what words to use for what command. I often find myself forgetting what certain alignments do and which words mean what when clicked. This is a cheat sheet for those who are forgetful, or when stressful times lead to forgetting the basics.

I found this site from a google search: "css image icon horizontal list." I was looking for a way to use images in a list." While the search was fruitless in this respect, it explains, in detail, how to hadnle a variety of lists. Examining the code may be helpful in deciphering why your lists may/may not be working as you desire.

This is a huge compilation of textured backgrounds. The collection is free for anyone to use.

This page shows how to add an image to your css background. I think a lot f us will be doing that for our designs

"Faux Columns" by Dan Cederholm of SimpleBits discusses "[a] simple way to make CSS columns appear equal in length, regardless of the content that they contain." This technique requires a good amount of skill in positioning elements on a page and understanding the nuances of the background image. Found at: Zeldman and A List Apart I'd like to try it, but don't anticipate using it any time in the near future..

The site simplebits.com provides a tip on how to make background links, objects, artwork, etc. easily clickable. If I had the time, I would use this effect on my portfolio page, designing each article and zen site feature to afford some sort of action.

As we learned in class the other day, a page must be able to handle smaller and larger text sizes appropriately. Some of our pages, mine included, looked like they were too small when the text was increased. This article, shows you how to change text size on your own. You may or may not need it, but it certainly helps to use it if you're not sure if your page will look right with larger text.

awesome tutorials for everything imaginable with css and html and various languages

This site shows you how to add certain effects to your css such as dropshadows, rounded edges and sliding tabs, horizontal centering etc. I will use some of these effects for my page.

This is certainly one of the most important tools for designing a webpage. In "CSS How To...", for the W3 Schools website, this article shows you how to insert a CSS. Without a Cascading Style Sheet, your page will look like it came right from 1997. I will be looking at this page the next time I start work on a new web page.

sweet serif and sans serif fonts available for free for a more rugged design

If you would like to play around with an HTML document without damaging your own, check out the W3C Schools CSS Guide where you can edit text on one half of the screen and watch the results unfold on the other. I am using this in the lab now so I can get some practice without exchanging files and refreshing the page constantly.

An extension for Firefox that allow you to overlay a grid on top of any web site. This should make for a quick way to visually check the symmetry and spacing of your web page's layout.

This is an awesome list of tricks that supplies the code and what your text and page will look like after. I plan to use many of the tricks on this page especially number 7 for the layout of my zen garden site.

Funny story: This is ceramic tile site created by Susan Jablon. She sells mosiac tile for showers, subways, kitchens, etc. On the site is an application where you can create your own mosiac. I stumbled upon one of her mosiacs through a google seach: "grey sky;" I was looking for a banner image at the time. After findinf a 5x5 mosiac that somewhat matched my site color scheme, I took a screen shot and used photoshop to crop, copy, and arrange the image to suit my suit. It's ugly, but I got to play with photoshop. The tiles may be useful for those of you looking to create your own, custom-colored, navigation tool, banner, etc.

This article will help you convert your website designed in photoshop to a real css layout. For many people like myself who can't draw for their lives, I like to use photoshop and similar programs to plot out how I want things to look first. It is usually hard to translate my ideas onto paper, and even harder to translate the paper to a webpage. For those of you with troubles like these, rest them aside.