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 comments

text tips

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!

Login or register to post comments

aural style sheets

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

Login or register to post comments

going to print

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!

Login or register to post comments

Easy CSS tricks

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.

Login or register to post comments

20 css tips and tricks

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.

Login or register to post comments

assigning property vlaues, cascading, & inheritance

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.

Login or register to post comments

2 column layout technique

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.

Login or register to post comments

Flick animations with css

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

Login or register to post comments

why use css?

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.

Login or register to post comments

css bar graphs

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.

Login or register to post comments

modify search bar using css

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 =(

Login or register to post comments

CSS popups

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

Login or register to post comments

Listamatic

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.

Login or register to post comments

Rounded corners without images

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

Login or register to post comments

Cleaning up the coding

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

Login or register to post comments

CSS Image Border and Opacity Changes on Mouse Rollover

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.

Login or register to post comments

CSS Rollover Menus

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.

Login or register to post comments

CSS Animation

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.

Login or register to post comments

Character Codes

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

Login or register to post comments

Bar Graphs

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

Login or register to post comments

Slant

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

Login or register to post comments

Hover on Non-Links

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

Login or register to post comments

Make Metal

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.

Login or register to post comments

CSS Journal

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!

Login or register to post comments

Photoshop tutorials

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.

Login or register to post comments

Templates and Designs

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.

Login or register to post comments

Photoshop masking effect

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.

Login or register to post comments

Negative Margins

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.

Login or register to post comments

Firefox extension: Aardvark

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

Login or register to post comments

Link Markers: CSS Generated Content

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.

Login or register to post comments

Free Stock Photography

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.

Login or register to post comments

Vitamin - A resource for web developers...

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.

Login or register to post comments

Centering Layouts with CSS

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.

Login or register to post comments

journal entry

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.

Login or register to post comments

check your css and colors

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.

Login or register to post comments

Top 20 css tricks

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

Login or register to post comments

Web Mobility

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.

Login or register to post comments

Free tutorial on browser compatibility

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.

Login or register to post comments

getting your page to show up correctly in other browsers

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.

Login or register to post comments

CSS Box Model Hack for Internet Explorer version 5.x

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

Login or register to post comments

Good tutorials and tips

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.)

Login or register to post comments

Text Shadows

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.

Login or register to post comments

faux columns

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!

Login or register to post comments

Color picker tool

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.

Login or register to post comments

image map

this shows how to make image maps

url :http://evan.nixsys.bz/note/
source: google

I might use this....I'm not sure

Login or register to post comments

Preloading Images Using CSS

As the title says, you can use the code on this site to preload images without having to use Javascript.

Author: Unknown

URL: http://specere.net/?webtips

Found via: Digg.com

I could definitely see the usefulness of this technique in future projects.

Login or register to post comments

Photoshop lighting effect

This page has steps for creating a nice lighting effect to text and images.

URL: Lighting Effect

Author: unknown

Found: google

I have used a similar tutorial, but I will see if it works with one of my projects.

Login or register to post comments

Photoshop tutorial for image effect

This page has instructions for creating an effect that mimics the scan lines that are on a TV.

Creator: unknown

URL: Scan Lines

Author: unknown

Found: google

I will try and use this, but it depends on whether it goes with my project.

Login or register to post comments

Detailed tutorial for converting content to CSS

This page has a detailed account of how to convert existing content to CSS.

URL: Convet to CSS

Author: Shirley Kaiser

Found: google

I've already used some of the suggestions.

Login or register to post comments

Coloring scrollbar

This page has instructions for changing the look of the scroll bar.

URL: Color Scrollbar

Author: Shirley Kaiser

Found: google

I would like to try out this feature.

Login or register to post comments