KBD_Resources

KBD Index | PACT Analysis | Scope | Envision | Moodboard | P2 Process Work | P2 Prototype | Discussion | P3 Process | P3 User Testing | P4 Refined Prototype

= KBD: CODING RESOURCES = 3005 DESIGN & SYSTEMS BRITTANY, DASHA AND KITTY

[|Grid System Generator] This is an extremely helpful site about grids and coding. One of its feature is an automatic grid generator where you simply input values you want and it will calculate the grid dimensions. There are also very useful tutorials to read up on and files you can download for use including CSS frameworks and a [|.zip] file with templates which you can open up in [|textwrangler] (or notepad) or [|css edit] to modify.

[|Quackit.com] This is a good site that provides CSS Tutorials

[|BlueTrip] Site by Mike Crittenden, containing his [|CSS framework] for download

[|Tryit Editor v1.4] This is a good resource for finding and trying out codes. When looking at codes, it allows you to edit/play with the given code and previews your changes in the window beside. Here's a tutorial on [|nesting].

[|JQuery] Download plugins and learn about incorporating JQuery into the website.

Sliding Information []

Helpful code:

- http://www.w3schools.com/css/css_image_sprites.asp
 * add margins to wrap text
 * use image sprites for faster load?

__Fixed Background image:__ code  body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; } code

__Simplest Nav bar: http://www.w3schools.com/css/css_navbar.asp__ code  ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a:link,a:visited { display:block; width:120px; font-weight:bold; color:#FFFFFF; background-color:#98bf21; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover,a:active { background-color:#7A991A; }

 Home News Contact About</a></li> </ul>

code

Mouse over transparency: Also: http://www.w3schools.com/css/tryit.asp?filename=trycss_transparency - transparency box with text over image code <style type="text/css"> img { opacity:0.4; filter:alpha(opacity=40); }

Image Transparency <img src="klematis.jpg" width="150" height="113" alt="klematis" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

<img src="klematis2.jpg" width="150" height="113" alt="klematis" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> code

Menus:

Bottom up simple menu. http://aplus.rs/adxmenu/examples/hbt/

Drop down and in a horizontal row: (ugly) http://www.alistapart.com/articles/hybrid/

JQUERY Image Sliders:
jQuery Smooth Div Scroll

S3Slider jQuery Plugin Automatic Image Slider