Intermediate
css

Lists

  • Lists are vertical by default
  • Horizontal lists
    • ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
      }
      li {
          display: inline;
      }

Box-sizing

  • Adding padding and borders will stretch
    an element beyond the specified width
  • box-sizing: border-box;
    • The padding and border no longer increase
      the width
    • box-sizing:
    • -moz-box-sizing:

Position

  • Static positioning
    • Elements are positioned static by default
      (according to normal flow of the page)
  • Fixed positioning
    • Element with fixed position relative to the
      browser window
      • position: fixed;
      • top: 30px;
      • right: 5px;
  • Relative positioning
    • Element is positioned relative to its normal
      position
      • position: relative;
      • left: -20px;

Position

  • Absolute positioning
    • Element is positioned relative to the first parent
      element that has a position other than static
      • position: absolute;
      • left: 100px;
      • top: 150px;
  • Overlapping elements
    • z-index property specifies the stack order of
      an element
      • z-index: -1;

Float

  • clear property
    • Excludes the element from floating
      elements around it
      • clear: both;
      • clear: left;
        • Clear elements floated to the left
      • clear: right;
        • Clear elements floated to the right

Vertical Alignment

  • Vertical control limitations
    • Horizontal placement is generally easy to
      control
    • "Vertical placement is frequently unintuitive,
      convoluted, or outright impossible"
  • A way to work around it
    • .cdiv {
          margin: auto;
          position: absolute;
          top: 0; bottom: 0; left: 0; right: 0;
      }

Animations

  • It is possible to animate elements without using
    Flash or JavaScript
  • Keyframes
    • The @keyframes rule is where the animation
      is created
    • Specify a CSS style inside the @keyframes rule
      and the animation will gradually change from 
      the current style to the new style
      • @keyframes
      • @-webkit-keyframes
        • Chrome and Safari

Animations

Example

  • @-webkit-keyframes squarechange {
        from { background: green; }
        to { background: red; }
    }
    #square {
        height: 100px;
        width: 100px;
        animation: squarechange 5s;
        -webkit-animation: squarechange 5s;
    }
  • Techranger robot example

Resources

Made with Slides.com