CSS Journal

Submitted by wolff on Thu, 03/23/2006 - 11:20am.

Please post (at least) 2 journal entries to the course CSS Journal discussion forum per week starting the week of October 27 until the week of December 8 (only one posting due the week of December 5). If we all fulfill this assignment, we'll have at least 200 CSS design techniques at our disposal, making it an unique and incredible resource (one that can add to the knowledge of future CWRL students and web designers).
Each journal entry you make should contain at least the following information:

a summary of the technique
the URL where you found the CSS tecnique
the designer/creator of the idea
who might have sent you to the site where you found the technique
whether or not you plan on incorporating the technique into your site (not all journal entries need to go into your site)

login or register to post commentsprinter friendly version Wolff STS 311

text tips

Submitted by lindsay_lalonde on Fri, 05/12/2006 - 10:46am.

Loads of ways to change up your text (opacity, magazine style, drop caps, etc)
URL: http://www.mandarindesign.com/troops.html
Author:unknown
found: metacrawler
I wish I had used these on my page...awesome!

aural style sheets

Submitted by lindsay_lalonde on Fri, 05/12/2006 - 10:40am.

this site gives instruction on aural style sheets that control the way impaired people hear the site if it is read to them by a program such as JAWS
URL:http://www.w3.org/TR/REC-CSS2/aural.html
Author:unknown
I didn't set this up on my page

going to print

Submitted by lindsay_lalonde on Fri, 05/12/2006 - 10:37am.

this site gives explanation on how to set up a printer-friendly version of your page using css
URL:http://www.alistapart.com/articles/goingtoprint/
Author: Eric Meyer
I didn't use this feature on my site, I didn't figure anyone would want to print anything aside from my resume, which is already in printer-friendly format....but it's a great tool to know!

Easy CSS tricks

Submitted by lindsay_lalonde on Fri, 05/12/2006 - 10:28am.

Gives code for different techniques for css
URL: http://www.draac.com/css/csstricks.html
Author: unknown
found: metacrawler
I didn't use this page for my site.

20 css tips and tricks

Submitted by lindsay_lalonde on Fri, 05/12/2006 - 10:27am.

This site is an index that has links to 20 css tricks and tips!
URL: http://www.petefreitag.com/item/475.cfm
Author: Pete Freitag
Found: Metacrawler
This was a great reference and fun page to explore while I was creating my page.

assigning property vlaues, cascading, & inheritance

Submitted by lindsay_lalonde on Fri, 05/12/2006 - 10:23am.

this site is a great overview and explanation reference.
URL: http://www.w3.org/TR/REC-CSS2/cascade.html
Author: unknown
I did reference this when I was creating my web page.

2 column layout technique

Submitted by lindsay_lalonde on Fri, 05/12/2006 - 10:17am.

This page gives the code for a 2 column layout.
URL: http://glish.com/css/9.asp
Author: Jeffrey Zeldman in his ALA article A Web Designer's Journey
Found: Google
I didn't use this in my site.

Flick animations with css

Submitted by lindsay_lalonde on Fri, 05/12/2006 - 10:13am.

This is a tutorial on how to create flick animations using css. I didn't use this for my page but it is a neat thing to know!
URL: http://www.webreference.com/programming/css_animation/index.html
Author: Stu Nicholls
Found: Google

why use css?

Submitted by yvonne_so on Tue, 05/09/2006 - 8:30pm.

This site doesn't really have tutorials or tips but it definitely has some good content that talks about why CSS is so great (and accessible!) such as how you can remove elements to make printing easier.
URL: http://www.tsbvi.edu/technology/accessible-css.htm
Found: Yahoo
Author: Adaptive Technology
Use: Yes I will be using this.

css bar graphs

Submitted by yvonne_so on Tue, 05/09/2006 - 8:23pm.

This site shows how to make visually appealing bar graphs using CSS. It shows you the code and has visual demostrations. It can be useful if you're trying to show statistics or financial interpretations.
URL: http://apples-to-oranges.com/blog/article.aspx?id=55
Found: Yahoo
Author: Apples to Oranges
Use: I will not use.

modify search bar using css

Submitted by yvonne_so on Tue, 05/09/2006 - 8:19pm.

This site doesn't show how to CREATE a search bar, but it shows how you can modify the look of the search bar by making changes in the CSS.
URL: http://www.csscreator.com/css-forum/sutra56329.html
Found: Yahoo
Author: Matt Ramos
Use: Will not use because I don't know how to create a real search bar =(

CSS popups

Submitted by I-chen_Huang on Mon, 05/08/2006 - 11:40am.

CSS image/text popups for the navigation bar
URL: Text and images
Found: Gooogle, one thing led to another
Author: Eric A. and Kathryn S. Meyer.
Use: Not sure if I will use it for homepage but will come in handy for future projects

Listamatic

Submitted by I-chen_Huang on Mon, 05/08/2006 - 11:29am.

Handy site with many examples of list layout options
URL: Navigation
Found: Google, one thing led to another
Author: Max Design
Use: This is really handy, I'll use this whenever I plan the navigation and layouts for a page.

Rounded corners without images

Submitted by I-chen_Huang on Mon, 05/08/2006 - 11:22am.

How to do rounded corners without using a bunch of images
URL: Imageless Rounded Corners
Found: It began in google then one thing led to another
Author: Alessandro Fulciniti
Use: The rounding technique offer a much more organic look to the page. I'm tempted to try it but it involves some javascript so I'm foreseeing some trouble with that

Cleaning up the coding

Submitted by I-chen_Huang on Mon, 05/08/2006 - 11:05am.

This is a simple but often overlooked step to cleaning up the coding through inheritance
URL: Inheritance
Found: google.com
Author: Dan Cederholm
Use: This is something I will keep in mind more when I code

CSS Image Border and Opacity Changes on Mouse Rollover

Submitted by Daniel_Hoodin on Sun, 05/07/2006 - 10:23pm.

This page shows how one can add a border or change opacity of an image during mouse rollover using CSS.
URL: http://www.javascriptkit.com/dhtmltutors/cssimage.shtml
Author: n/a
Found: via Google
This is a neat technique to use, but unfortunately, I will not be using this in my projects because I have already finished my projects, but I may use this in future website I design.

CSS Rollover Menus

Submitted by Daniel_Hoodin on Sun, 05/07/2006 - 10:18pm.

This page shows how one can create nice looking rollover menus using CSS.
URL: http://www.howtocreate.co.uk/tutorials/testMenu.html
Author: Mark Wilton-Jones
Found: via Google
I will not be using this in my projects because I have already finished my projects, but I may use this in future website I design.

CSS Animation

Submitted by Clay_Thornton on Sun, 05/07/2006 - 6:12pm.

This is some CSS animation where the mouse becomes the image.
URL: http://www.cssplay.co.uk/menu/streaker.html
Author: Stu Nicholls
Found: Via Yahoo
This is funny but I will not use it.

Character Codes

Submitted by Clay_Thornton on Sun, 05/07/2006 - 6:07pm.

This shows you the code for certain characters like the money sign.
URL: http://www.cssplay.co.uk/menu/code.html
Creator; Stu Nicholls
Found: Via yahoo
I may use this if i need one of the characters

Bar Graphs

Submitted by Clay_Thornton on Sun, 05/07/2006 - 6:05pm.

This shows you how to make CSS bar graphs of information
URL: http://www.meyerweb.com/eric/css/edge/bargraph/demo.html
Creator: Eric A Meyer
Found: Via Yahoo
I will not need to do this

Slant

Submitted by Clay_Thornton on Sun, 05/07/2006 - 6:03pm.

This site shows you how to make the web page slant.
URL: http://www.meyerweb.com/eric/css/edge/slantastic/demo.html
Creator: Eric A. Meyer
Found: Via Yahoo
I will not use this but it is neat

Hover on Non-Links

Submitted by Clay_Thornton on Sun, 05/07/2006 - 6:01pm.

This site shows you how to make hovers on things other then links.
URL: http://nontroppo.org/test/hover.html
Creator: nontroppo
Found: via Yahoo
I will not be using this

Make Metal

Submitted by alfonso_salinas on Fri, 05/05/2006 - 2:10pm.

This tutorial shows how to create metallic shapes using lighting effects and blending options.

URL: Metal

Author: unkown

Found: google

I will try and use this.

CSS Journal

Submitted by stuart_geiger on Fri, 05/05/2006 - 11:53am.

This has many useful illustrations on how to use the z-index property
URL:http://developer.mozilla.org/en/docs/Understanding_CSS_z-index
Author: The Mozilla Development Team, Paolo Lombardi
Found: Google
I have used this and it is great!

Photoshop tutorials

Submitted by anna_dinh on Fri, 05/05/2006 - 2:20am.

This is one of my favorite photoshop sites. It has tons of tutorials for tons of things you might want to experiment with.

URL: www.pslover.com
Found: via Yahoo!

I use this site a lot just to play around or come up with different ideas to use.

Templates and Designs

Submitted by anna_dinh on Fri, 05/05/2006 - 2:17am.

This page has a ton of different web page templates and designs to give you some ideas just in case you ever have designers block.

URL: http://www.openwebdesign.org/browse.php
Found: via Google

I'm probably going to use this site a lot in the future.

Photoshop masking effect

Submitted by alfonso_salinas on Wed, 05/03/2006 - 8:08pm.

This is a photoshop tutorial for extracting an image so that you can combine it with another.

URL: Masking Effect

Author: unkown

Found: google

I have used this before and will try and use the techniques later.

Negative Margins

Submitted by dona_kurtz on Wed, 05/03/2006 - 2:30pm.

A little article on using negative margins for positioning.

URL: http://www.simplebits.com/notebook/2005/05/23/negative.html

Author: Dan Cederholm

Found: Google

Use: This article, and some of the comments, helped me work out some positioning issues that I'm having on my Zen Garden page.

Firefox extension: Aardvark

Submitted by shaneK on Tue, 05/02/2006 - 4:32pm.

Description: This extension allows you to hover over and view source of all the elements on a page. With keystrokes you can change/edit the page (more for printing a page: not really for CSS) : still it's nice to see all the stuff without it being as scrambled with X-ray

URL : Aardvark extension

Author: Rob Brown? Karmatics developer: apparently they do some cool stuff with AJAX..

Found via: Some UT prof's blog... and google

Link Markers: CSS Generated Content

Submitted by Erin_Selleck on Mon, 05/01/2006 - 8:30pm.

a[href*=".pdf"]:after{
content: url("/images/pdf.gif");
}

URL: http://www.surfmind.com/musings/2003/10/11/

Author: unknown

Found via: Google

I'm trying to manipulate this on my personal webpage to make an icon for when I hover over a link in my navigation menu.

Free Stock Photography

Submitted by ckominczak on Mon, 05/01/2006 - 5:52pm.

This site has over 200,000 free stock photos for use on websites.

URL: http://www.sxc.hu/

Author: unknown

Found via: Digg.com

I could definitely see myself using some of these photographs in all kinds of projects.

Vitamin - A resource for web developers...

Submitted by ckominczak on Mon, 05/01/2006 - 5:46pm.

This site has a really nice collection of tools for web developers and designers.

URL: http://www.designmeltdown.com/

Author: unknown

Found via: Digg.com

Based on the wealth of tutorials, I could see myself using one of these in the future.

Centering Layouts with CSS

Submitted by Jessica_Tremblay on Mon, 05/01/2006 - 9:31am.

Tips and Tricks on how to center layouts using CSS and not a Center Tag
http://www.simplebits.com/notebook/2004/09/08/centering.html
Author: No clue
Yes, I will use this... having a hard time switching from the center tags.

journal entry

Submitted by stuart_geiger on Fri, 04/28/2006 - 12:31pm.

Browser Hacking
URL: http://www.thesitewizard.com/css/excludecss.shtml
Author: Christopher Heng
Found: Google
Use: If I end up worrying about IE

Menus - A massive, thumbnailed list
URL: http://www.alvit.de/css-showcase/
Author: Hosted by Vitaly Friedman
Found: Google
Use: No, already got mine down.

check your css and colors

Submitted by yvonne_so on Thu, 04/27/2006 - 12:49pm.

This site is given on the accessibility toolbar, but it's a very useful tool in checking your css to make sure it is accessible. It also has a color analyzer to maximize accessibility to the color blind.
URL: http://juicystudio.com/services/csstest.php
Author: Juicy Studio
Found: AI
Use: Yes, I will be using this.

Top 20 css tricks

Submitted by yvonne_so on Thu, 04/27/2006 - 12:46pm.

These are the top 20 css tricks according to one software engineer. They're pretty generic, but useful, too.
URL: http://www.petefreitag.com/item/475.cfm
Author: Pete Freitag
Found: Google
Use: Perhaps

Web Mobility

Submitted by shaneK on Thu, 04/27/2006 - 6:22am.

Description: How to make your site accessible to Mobile users in two minutes.

URL : web mobility

Author: Mike Davidson

Found via: google
I probably won't be using this technique because I doubt many of my viewers will be mobile, but for commercial sites most definately.

Free tutorial on browser compatibility

Submitted by jessica_scheick on Wed, 04/26/2006 - 10:12pm.

Somehow, I missed this link to a free tutorial about browser compatibility earlier.

Link: www.netmechanic.com/products/Browser-Tutorial.shtml

Author: Tom Dahm

Found: Google search for browser compatibility

Yes, I will be using this tutorial as my page looks awesome in firefox, but has a lot of issues in internet explorer.

getting your page to show up correctly in other browsers

Submitted by jessica_scheick on Wed, 04/26/2006 - 10:08pm.

This site offers a program to check your HTML code & help you become browser compatible

www.netmechanic.com/products/index.shtml

Author: No author listed

Found: Google search for browser compatibility

I'd like to use this for my site. They offer a free trial for 5 pages, then you have to pay for the service. Being a broke student, I'm going to look for free information first.

CSS Box Model Hack for Internet Explorer version 5.x

Submitted by Daniel_Hoodin on Tue, 04/25/2006 - 11:29pm.

This page shows how a box model hack can be used to trick internet explorer version 5 and above to override the width to look the same on all browers.
URL: http://tantek.com/CSS/Examples/boxmodelhack.html
Author: n/a
Found: via Google
I may try to use this in my pages if my page width in internet explorer isn't working correctly

Good tutorials and tips

Submitted by anna_dinh on Tue, 04/25/2006 - 10:05pm.

This page just has a lot of tutorials and tips on different techniques in CSS.

URL: http://www.artypapers.com/csshelppile/
Author: multiple
Found: Yahoo! Search

I've been playing around with differen techniques from this site for(i.e. positioning, borders, etc.)

Text Shadows

Submitted by Daniel_Hoodin on Tue, 04/25/2006 - 9:31pm.

This page gives the css comand necessary to create text shadows.
URL: http://www.cascading-style-sheets-css.com/archives/57-Text-Shadows.html
Author: Gerald Frank Smith
Found: via Google
I don't think I will use this in my webpage but it is a nice trick to know.

faux columns

Submitted by anna_dinh on Tue, 04/25/2006 - 7:27pm.

This page shows you how to make faux columns.

URL: http://www.alistapart.com/articles/fauxcolumns
Found: Yahoo! search
Author: Dan Cederholm

I definately will use this little trick on my page!

Color picker tool

Submitted by dona_kurtz on Mon, 04/24/2006 - 1:26pm.

This is a color-picker tool that lets you see how your colors will appear to the color-blind.

URL: http://wellstyled.com/tools/colorscheme2/index-en.html

Author: Petr Stanicek (aka pixy)

Found: in the comments of the mezzoblue article on Colour Schemes

Use: Yes, I am using this to help me pick colors.