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)
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
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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
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.
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
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
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
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
buttons
This website wsill show you how to enlarge images when you scroll over them.
http://moronicbajebus.com/playground/cssplay/enlarger-button-menu/
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
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
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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
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.
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.
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.
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.
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
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.