By Tuyet Le & Madhura Pitale

Seating Chart with CSS3

Talk Outline 1.Create Rounded Corners 2.Drop Shadow 3.Create Gradient Buttons 4.Multiple background images 5.Multi-Column Layout 6.Transform 7.Transition

Create Rounded Corners x = horizontal radius [ | ] y = vertical radius [ | ] border-top-left radius: x y; border-top-right-radius: x y; border-bottom-left-radius: x y; border-bottom-right-radius: 0; border -*-*-radius: [x] [y]?

Create Rounded Corners border-radius: [x] {1,4} [ / [y] {1,4} ]? border-radius: 5px 10px 10px 10px / 10px 10px 5px 5px; border-radius: 5px 10px / 10px; border radius: 10px;

Create Rounded Corners W3C SpecificationMozilla Implementation border-radius-moz-border-radius border-top-left-radius-moz-border-radius-topleft border-top-right-radius-moz-border-radius-topright border-bottom-right-radius-moz-border-radius-bottomright border-bottom-left-radius-moz-border-radius-bottomleft

Create Rounded Corners Safari and Chrome: – V3.0: use -webkit- prefix

Talk Outline 1.Create Rounded Corners 2.Drop Shadow 3.Create Gradient Buttons 4.Multiple background images 5.Multi-Column Layout 6.Transform 7.Transition

Drop Shadow text-shadow: x y b color x = horizontal offset  x < 0: left of the text  x > 0: right of the text y = vertical offset  y < 0: above the text  y > 0: below the text b = blur radius

Drop Shadow box-shadow: x y b color Examples: -webkit-box-shadow: -3px 3px 3px #999999; -moz-box-shadow: -3px 3px 3px #999999; text-shadow: -4px 4px 3px #999999;

Seating Chart with CSS3

Talk Outline 1.Create Rounded Corners 2.Drop Shadow 3.Create Gradient Buttons 4.Multiple background images 5.Multi-Column Layout 6.Transform 7.Transition

Create Gradient Buttons rgba(r, g, b, opacity) background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(255,255,255,1)),to(rgba(185,185,185,1))); background:-moz-linear-gradient(top,rgba(255,255,255,1), rgba(185,185,185,1));

Talk Outline 1.Create Rounded Corners 2.Drop Shadow 3.Create Gradient Buttons 4.Multiple background images 5.Multi-Column Layout 6.Transform 7.Transition

Multiple background images background:, ; OR background-image:,,, ; background-repeat:,,, ; background-position:,,, ; /* plus any background attachment and/or box properties as needed */

#example { width: 500px; height: 250px; background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg); background-repeat: no-repeat; background-position: left top, right bottom, left top; }

Talk Outline 1.Create Rounded Corners 2.Drop Shadow 3.Create Gradient Buttons 4.Multiple background images 5.Multi-Column Layout 6.Transform 7.Transition

Multi-Column Layout #multi-column { /* For Mozilla: */ -moz-column-width: 13em; -moz-column-gap: 1em; /* For WebKit: */ -webkit-column-width: 13em; -webkit-column-gap: 1em; }

Multi-Column Layout #multi-column { -moz-column-count: 3; -moz-column-gap: 1em; -moz-column-rule: 1px solid black; -webkit-column-count: 3; -webkit-column-gap: 1em; -webkit-column-rule: 1px solid black; }

Talk Outline 1.Create Rounded Corners 2.Drop Shadow 3.Create Gradient Buttons 4.Multiple background images 5.Multi-Column Layout 6.Transform 7.Transition Demo:

Thank you! Questions?