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

• http://jsbin.com/uVaHUxe/2/edit