CSS Journal Discussion Forum


Submitted by wolff on Thu, 10/27/2005 - 1:39pm

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

Fuzzy Drop Shadows

A technique that improves upon other drop shadow techniques. It eliminates the sharp edge of the beginning of the shadow

http://www.alistapart.com/articles/cssdrop2/

Author: Sergio Villarreal

This is pretty sweet. That was my only concern with using the first Drop Shadow CSS technique, and here it is fixed! I definitely think I will use this technique

Login or register to post comments

Yet Another Drop Down Menu

I really recommend reading this whole article. It teaches you how to create a really nice drop down menu.

http://www.alistapart.com/articles/hybrid/

Author: Eric Shepherd

The final menu is phenomenal. This and text-shadowing would go GREAT together. I can definitely see myself using this, when I get the time to implement it.

Login or register to post comments

Liquid Tutorial

More on designing a liquid layout.

http://www.maxdesign.com.au/presentation/liquid/index.cfm#insanity

author: Russ Weakley

This is a very nice article that explains the design of a liquid page. I have read the article, and plan to implement its techniques in my site.

Login or register to post comments

Liquid Layout

CSS Liquid Layout with two Columns

http://www.bigbaer.com/css_tutorials/two-column-header-footer.htm

author: bigbaer.com ??

This is real nice, because you don't have to bother with varying resolutions. Its a simple way to make a page layout for every user. I can see myself using this layout in the future.

Login or register to post comments

CSS Layouts

Some really nice CSS layouts

http://www.tjkdesign.com/articles/liquid.asp

author: Alex Robinson

I definitely think these are great for getting started. My layout is much simpler than these those, so I don't know if I will use these or not.

Login or register to post comments

Punch Out!

Shows you how to punch out the corner of aan element and insert something in the space.

http://www.meyerweb.com/eric/css/edge/boxpunch/demo.html

author: unknown

I think this is pretty neat. I don't think I will be using it on my site, however.

Login or register to post comments

Ragged Float

I saw that someone posted about having text follow a curve, but I didn't see one on this.

This shows you how to have text follow a more complex outline.

http://www.meyerweb.com/eric/css/edge/raggedfloat/demo.html

Author: could not find

I think this would be extremely useful, and I intend on using it on my site.

Login or register to post comments

More on Columns

Explanation on how to create columns instead of using a table.

http://robertnyman.com/roblab/css-column-layouts.htm

Author: Robert Nyman
Found: Google

I don't really see a use for this in my site's layout.

Login or register to post comments

Text-shadowing

This is currently only supported by Safari (Macs), but I am sure IE and Mozilla will pick it up soon.

I searched around and couldn't find the source of information that explained it all, but I came up with a technique to make rollover text look like it is glowing. Here is what you do.

In your stylesheet you want to your link hover declarations include this line:
text-shadow: 0 0 4px silver;
text-color: white;

Now this is customized for my text that is originally colored silver, so you will have to change the variables as they suit you.
The variables for the text-shadow property are as follows:
- the first value is the x-distance offset from the text
- the second value is the y-distance offset (input a positive and it is offset that amount in the negative y direction).
- the third value is the blur radius. You will have to adjust this to get your desired results.
- the last value is of course the color of the shadow.

I am currently using this on my site, and like I said, I think IE and Mozilla will be implementing this soon. I sure do hope so because it adds a lot to text without having to create text images.

Login or register to post comments

Another Rollover Button

It has some a pretty cool effect. I would probably mix some of the techniques with some other graphics

http://www.webcredible.co.uk/user-friendly-resources/css/rollover-button...

Author: Mark Angeletti
Found: Google

Login or register to post comments

Image Magnifier

Technique: CSS Image Enlarger - scroll over part of an image and it magnifies
URL: http://www.cssplay.co.uk/menu/enlarge.html
Creator: Stu Nicholls
Found via: Google
Decision: I will use this to upgrade the portfolio section of my professional website.

Login or register to post comments

Drop Shadow

Technique: CSS Drop Shadow - to give a 3d look to div
URL: http://www.cssplay.co.uk/menu/shadow.html
Creator: Stu Nicholls
Found via: Google
Decision: I won't be using this for a class project, but perhaps for a future website

Login or register to post comments

CSS Image Map

Technique: CSS Image Map - no javascript required!
URL: http://www.cssplay.co.uk/menu/imap.html
Creator: Stu Nicholls
Found via: Google
Decision: I won't be using this for a class project, but for my personal website yes.

Login or register to post comments

CSS Image Links

Technique: CSS Image Links
URL: http://mvp.wiserways.com/tutorials/rollovers/
Creator: MVP
Found via: Google
Decision: I will use this concept as my main navigation system and design

Login or register to post comments

CSS Rollover Image Gallery

Technique: CSS Rollover Image Gallery - no javascript required!
URL: http://www.webreference.com/programming/css_gallery/
Creator: Stu Nicholls
Found via: Google
Decision: I will use this in my portfolio section

Login or register to post comments

Float Tutorial

Technique: Float Tutorial
URL: http://css.maxdesign.com.au/floatutorial/
Creator: Max Design
Found via: Google
Decision: I will use this helpful guide in order to create my layout

Login or register to post comments

Image Opacity

Technique: Image Opacity
URL: http://www.javascriptkit.com/dhtmltutors/cssimage.shtml
Creator: Javascript Kit
Found via: Google
Decision: I will use this if I desire this look and feel the need for it

Login or register to post comments

buttons

This website wsill show you how to enlarge images when you scroll over them.

http://moronicbajebus.com/playground/cssplay/enlarger-button-menu/

Login or register to post comments

medium format camera

Do you like the look of medium format cameras. Well here is a website that shows yu how to get that look through photoshop.

http://www.photoshoplab.com/tutorial_Medium-Format-Camera-Effect.html

Login or register to post comments

drop down menu with border

This guy has created some real nice drop down menus in the header. However, he doesn't provide a cut and paste code for it. I'm going to figure it out by viewing the source b/c its too cool!

http://www.markschenk.com/cssexp/linebreaks/linebreak.html

Login or register to post comments

podcasts

If you guys have the latest version of itunes, you can go to the podcasts section and subscribe to Photoshop TV. Its a video podcast full of tips nad tricks using photoshop.

Login or register to post comments

quicktime

some code and a thorough discussion on adding video to your website. This is something I will implement a lot in my website design.

http://www.webdeveloper.com/multimedia/multimedia_putting_video_2.html

Login or register to post comments

Text following the curve

One student already posted how to have text follow a slant with ratios. This technique adds to that by showing how to have text follow a curve.
URL: http://www.meyerweb.com/eric/css/edge/curvelicious/demo.html
Author: Eric Meyer
Yes, I will use it for my personal site.

Login or register to post comments

Image Filtering with CSS

Using CSS, add effects to images such as opacity, wave, x-ray, gradient, and other filters. The bad thing about this is that is is geared for IE 4.0 users.
URL: http://www.hotwired.com/webmonkey/97/33/index1a.html?tw=authoring
Author: Taylor of Webmonkey.com
I do not plan on putting this on my site.

Login or register to post comments

A complete tutorial on css

A complete tutorial on css from the basics to validating them to accessibility. They provide links to find the correct information on how to do things right.

http://www.thenoodleincident.com/tutorials/css/index.html

Owen Briggs

Found through http://www.thenoodleincident.com/tutorials/box_lesson/index.html

I'll probably give this a read to learn more about css and the proper way to do things. Yes, I'll incorporate the things I learn from it into my future designs.

Login or register to post comments

Box Layout Tutorials

Here's another great tutorial on boxes. They provide you the source code in the box so you can see which part of the codes does what.

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

Owen Briggs

Found through http://glish.com/css/#techniques

Yes probably will incorporate one of these box techniques, but with images as part of the layout instead of only boxes.

Login or register to post comments

Advanced CSS Layouts: Step by Step

Has an in depth explanation of making an advanced css layout. It also has preview screens along the way so you can visually see what's happening. Great learning tutorial.

http://www.webreference.com/authoring/style/sheets/layout/advanced/

Rogelio Vizcaino Lizaola

found through http://glish.com/css/#techniques

Probably not, but will read it for better understanding and to learn more about css.

Login or register to post comments

CSS-Table Layout: Overview

For those that still like to use tables as layout. This page shows you how to style tables nicely with css.

http://www.projectseven.com/tutorials/css/css_td/index.htm

Steven

Not sure how I found it.

Probably so. In the future, if I have a table for data, I'll use css to style it.

Login or register to post comments

Yet Another Layout Styling Helper :-)

There are quick-links on the left for different types of layout techniques. They also provide you the source code with explanation of the pros and cons of each layout style. This might have been posted already, but I found it useful.

http://glish.com/css/

Eric Costello

google

Yep, I believe I did a style similar to the 2 column design.

Login or register to post comments

Image Replacement

Replace text with an image. You can use this so you can use certain fonts and not worry about if the user has that font installed or not, and just to spice up your page.

http://www.mezzoblue.com/tests/revised-image-replacement/
Author: mezzoblue
I used this sort of technique already on my page, but in case anyone didn't know how to do it, I wanted to post it here.

Login or register to post comments

CSS sprites

More clever use of CSS in A List Apart's CSS Sprites. Basically, instead of using lots of images and linking a few, or using the awful image maps, here's a way you can use one image and link specific parts in CSS.
http://www.alistapart.com/articles/sprites/
by Dave Shea
I hope I can find a way to incorporate this into a site in the future.

Login or register to post comments

attribute selectors

Here's a way to use purely CSS to let users know what language the link they're following is in. It uses a lot of clever CSS.
http://www.tdrake.net/attribute-selectors-to-provide-language-information/
by Ted Drake
I don't really know any other languages, and since it's only supported in good browsers and not IE, I don't know if I'll use it.

Login or register to post comments

All CSS Properties

All the CSS Properties listed alphabetically.

http://www.blooberry.com/indexdot/css/propindex/all.htm
Author: Brian Wilson
I personally like to use the W3School site, but this could be useful.

Login or register to post comments

Styling Definition Lists

Instead of using unordered lists and then removing the bullets, this uses definition lists to try and acheive the same thing in an easier to understand way.

http://www.webreference.com/programming/css_style/index.html
Author: Stu Nicholls
If I would've found this earlier I might've used it in my site because I used the unordered list method, but this seems to work very well.

Login or register to post comments

Visited Links with check boxes

It provides a way to make a sidebar with links and if it has been visited by the user it puts a little check next to the link.

http://www.collylogic.com/index.php?/weblog/comments/ticked_off_links_re...
Author: Colly
This is a great idea and it looks very clean and professional. I'd like to use this idea sometime in the future.

Login or register to post comments

CSS Sliding Photo Gallery

Make sliding photo galleries with CSS.

http://www.cssplay.co.uk/menu/gallery3l.html
Author: Stu Nicholls
I have no use for this at the moment, but it still seems pretty cool. I could use this in the future.

Login or register to post comments

Image Scale using em

Tutorial on how to use em to scale images in CSS.

http://www.bigbaer.com/css_tutorials/css.scale.image.html.tutorial.htm
Author:Big Bear
This seems pretty useful, however I won't be using it right now. Maybe in the future.

Login or register to post comments

Various CSS Tables

Tutorials on how to make a number of different types of tables with CSS. Looks much better than doing tables the old fashioned way!

http://rino.bowdoin.edu/wordpress/archives/2004/08/css-tables
Author: Robert Denton
I won't be using it right now, but it could prove useful later in the future.

Login or register to post comments

Replacing Submit Buttons with Images

Replaces submit buttons with images using CSS.

http://www.ampsoft.net/webdesign-l/image-button.html
Author: Alberto Martinez Perez
I don't have a use for this right now, but it could add some useful aesthetics to later pages.

Login or register to post comments

Element Hover

Changes the text when you hover of the text or acronym.
http://www.phoenity.com/newtedge/element_hover/
Author: n/a
I don't intend to use this at the moment, but it could come in handy in the future.

Login or register to post comments

CSS Image Maps

http://www.frankmanno.com/ideas/css-imagemap/

This technique allows you to put links across the image. For example if you have a picture of a monitor a mouse and a keybord. Monitor, mouse and keyboard can be set to be link. This image maps technique allows you to do this entirely in CSS.
I'm interested to apply this in my future design.

author: Frank Manno
Found: google.

Login or register to post comments

CSS Diagrams

A way to make flow charts and digrams purely with CSS.
http://www.surfare.net/~toolman/temp/diagram.html
Author: tool-man at home dot se
This seems like a cool way to make diagrams and whatnot, however I don't think I'll be using it.

Login or register to post comments

Drop shadow effect

http://www.alistapart.com/articles/cssdropshadows/
This tecnique allows to have a shadow effect on any image you posted on the web. This is not an advanced effect, but I think it's nice

author: Sergio Villarreal
Found: google

Login or register to post comments

more on list or menu

http://www.denijsdesign.com/menumachine/pages_mm/mm_adv_stashed.html

This web have some list design. I think the "stashed menu" list is interesting. The web doesn't include any css file for it, but we can see the example of the design.

author: n/a
found through google

Login or register to post comments

Custom form buttons with CSS

http://www.hypergurl.com/custombuttons.html
This technique allows you to change the look of form button.
It maybe useful when you try to incorporate form buttons to a page design.
author: n/a
Found through google.

Login or register to post comments

Star Rating

Uses lists, images, and css to create a star rating system.

http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-u...
Author:Rogie King
I have no use for this right now, but it seems very cool and useful if I wanted to rate music or movies or something of the sort.

Login or register to post comments

Annotating Images

First off, this does not work in IE. It is a cool way to annotate images only using HTML and CSS.

http://evan.nixsys.bz/note/

Author: I think his name is Evan
If I make a site with images of friends or travels or anything like that, this will come in very handy. I won't be using it on my current site, but possibly in the future.

Login or register to post comments

More Rounded Corners

Create rounded corners by using only one image and off-setting that image for each corner.

http://www.airtightov.com/lab/airtight_corners.html
Author:unknown
This will be very useful later when I do other sites with rounded corners. It seems much easier than many alternative ways.

Login or register to post comments

Scrollable Table

Uses CSS to make a scrollable table with a fixed header.
http://www.imaputz.com/cssStuff/bigFourVersion.html
Author: unknown
If I ever need to make a table of a lot of information, this would prove useful

Login or register to post comments

Z-index

This gives the order of absolutely positioned boxes in the z-axis. The higher the number is, the higher that box will be in the stack.
URL: http://www.htmldog.com/reference/cssproperties/z-index/
Found: htmldog.com
I do not know if I would use this because I still am not for sure what it all does.

Login or register to post comments