Today’s Agenda Advanced CSS Techniques Floating Z-index Centering Sliding Doors Fluid Layouts CSS3 Advanced CSS Lab Mini Project #2

Web Design: Basic to Advanced Techniques Fall 2010 Mondays 7-9pm 200 Sutardja-Dai Hall Advanced CSS Techniques

Floating How can we achieve this kind of horizontal layout? (divs usually stack vertically)

Floating Floating an an element takes it out of the flow of the document and pushes it left or right CSS property float Values: right or left

Floating If you float three elements in the same direction, they will stack

Floating But, if there isn’t enough room:

Floating Important properties: Floated elements should have a specified width Floating removes the element from the flow of the layout Other elements have no idea its there (except for text) float: left;

Clearing Floats CSS property clear Set this property on the element BELOW Values: left, right: push the element down below any left/right floated elements both: push element down below any floated elements clear: left; float: left;

Z-index

Z-Index Property to specify which elements “go on top” z-index: [integer value]; z-index: 15;

Centering Centering text in a div text-align: center; Horizontally centering a div margin: auto; Vertically centering text in a div line-height: [same height as div]; hello

Background Position Specify where you want the background positioned background-position: [horizontal] [vertical]; Left/right, top/bottom, center Using percentages 50% 50% Using pixel values 10px 5px

Sliding Doors Last week: Dynamic width buttons

Sliding Doors Another technique to create dynamic width buttons Think of sliding doors that slide out to cover more space

Sliding Doors Left background image on the left element Right background image on the right element Background positioned on the top right

Fluid Layouts Layouts expand/contract fluidly with the size of the browser Percentage widths instead of using fixed pixel widths width: 100%; Fluid Layouts vs. Fixed Layouts More control over fixed layouts Fluid layouts more user-friendly because it fits the user’s screen better

CSS3 Cool effects now EASY with CSS3 Gradients Drop shadows Rounded corners Multi column layouts Media queries Transforms/Animations

CSS3 Gradients -moz-linear-gradient( [ ||,]?, [, ]* ) -webkit-gradient(, [, ]?, [, ]? [, ]*) Resources:

CSS3 Drop Shadows Box-shadows -moz-box-shadow: [horizontal] [vertical] [blur] [color]; -webkit-box-shadow: [horizontal] [vertical] [blur] [color]; Text-shadows text-shadow: [horizontal] [vertical] [blur] [color];

CSS3 Rounded Corners Border-radius property -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; Degrades gracefully Rounded corners just don’t show up in browsers that don’t support it