JMU | GRPH312

Menu Hover Transition to change the color

CSS3 Tutorial for Hover Transition to change the color
http://www.imajine.in/tutorials/css/texthover.aspx

CSS:

a:link {
color:#666666;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
-webkit-transition-property:color, text;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-timing-function: linear, ease-in;

-moz-transition-property:color, text;
-moz-transition-duration:0.5s;
-moz-transition-timing-function: linear, ease-in;

-o-transition-property:color, text;
-o-transition-duration:0.5s;
-o-transition-timing-function: linear, ease-in;
}
a:visited {
color: #6E6C64;
}
a:hover, a:active, a:focus {
color:#009999;
}

Change menu-image

ul.nav {
list-style: none;
border-top: 0px solid #666;
margin-bottom: 15px;
color:#CC66CC;
}

ul.nav li {
border-bottom: 0px solid #666;
background-image: url(images/menu-bg.jpg);
color:#CC66CC;
}

ul.nav a, ul.nav a:visited
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
color:#CC66CC;
}

ul.nav a:hover, ul.nav a:active, ul.nav a:focus
background-image: url(images/menu-bg-1.jpg);
color: #FFF;
}

--> menu-bg.jpg

--> menu-bg-1.jpg

Centering a Horizontal Menu Bar

Centered Menu Basic Example
http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support#

CSS Centered Menu
http://matthewjamestaylor.com/centered-menus/#

Navigation Bar (w3school)

http://www.w3schools.com/css/css_navbar.asp

Centering a horizontal spry menu

http://foundationphp.com/tutorials/sprymenu/centering.php

Customize spry menu

http://foundationphp.com/tutorials/sprymenu/customize1.php

CSS Menus

http://www.cssplay.co.uk/

Menu one

A simple change of border style on :hover.

Menu two
A border style to look like a button.

Menu three
A neon glow menu.

Menu four
A right border change on :hover.

Menu five
Text movement on :hover.

Menu six
Border art to indicate the link on :hover.

Menu seven
Additional link text on :hover.

Menu nine
A shadow added on :hover.

Menu ten
Indented text on :hover.

-------------------------------------------------------------------------------------------------------

CSS Menu Maker

http://cssmenumaker.com/

understanding CSS

Grid-Layout

GRID LAYOUT:
http://educ.jmu.edu/~shinjb/forclass/ch15/liquid-layout.html

FLOAT:
http://educ.jmu.edu/~shinjb/forclass/ch15/float.html

TextBook Ch. 15

2012 campaign for Saks Fifth Avenue: flowchart

http://new.pentagram.com/2012/11/new-work-shop-saks-campaign/

The Fall 2012 campaign for Saks Fifth Avenue features humorous flowcharts helping shoppers decide what to buy.

Shopping and gift-giving are all about choices. Should you give her shoes or earrings? Do they want something for the house or a present that’s more personal? And how about a little something for myself?

Pentagram’s new fall campaign for Saks Fifth Avenue attempts to diagram this complex decision-making process in a series of humorous flowcharts. Designed by Michael Bierut and Katie Barcelona with Sabrina Friebis Ruiz, the graphics appear on shopping bags, print promotions and advertising for the luxury retailer. In developing the campaign, Pentagram worked once again with Saks Executive Vice President and Chief Creative Officer Terron Schaefer and his creative team led by Christopher Wieliczko and Andrew Winton.

The flowcharts are used as patterns on shopping bags.

Each flowchart starts with a problem posed in a circle (“Uh oh, is that today?”) and branches off at different decision points as shoppers consider their options, winding through various stages of deliberation (“He’d like to have…. Jeans that aren’t ‘Dad jeans’”) or distress (“Think quick… I think I need an expert”). The paths all lead to Saks, represented by the store’s square logo, also designed by Pentagram.

The campaign complements the grid-based, black-and-white brand identity we designed for Saks in 2006, as well as the look and feel of previous campaigns we’ve developed for the retailer, which are often playful, usually highly graphic, sometimes directional, and may involve games and puzzles.