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)
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!
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
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!
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.
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.
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.
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.
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
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.
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.
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 =(
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
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.
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
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
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.
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.
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.
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
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
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
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
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.
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!
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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
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.)
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.
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!
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.
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
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.
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.
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.
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.
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.