1 / 20

Today’s Agenda

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. Web Design:. Fall 2010 Mondays 7-9pm 200 Sutardja -Dai Hall. Basic to Advanced Techniques.

cai
Download Presentation

Today’s Agenda

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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

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

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

  4. 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

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

  6. Floating • But, if there isn’t enough room:

  7. 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;

  8. 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 float: left; float: left; clear: left;

  9. Z-index

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

  11. 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 hello

  12. 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

  13. Sliding Doors • Last week: • Dynamic width buttons

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

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

  16. 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

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

  18. CSS3 Gradients • -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) • https://developer.mozilla.org/en/CSS/-moz-linear-gradient • -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) • http://webkit.org/blog/175/introducing-css-gradients/ • Resources: • http://www.westciv.com/tools/gradients/

  19. CSS3 Drop Shadows • 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];

  20. 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

More Related