Skip to content

CSS Resources

Shapes

  • Here is a website that has a lot of CSS shapes. I would recomend looking here first.
  • Here is a helpful article for a wide veriety of CSS shapes and patterns.
  • This is a good tutorial on clipping using clip-path

Tools

  • Here is a Clip path editor that has proved helpful in creating complexcustom shapes

Definitions

Positioning

  • Relitive When you are using values to set the Relitive position they are measured from the parent element in the flow of the document. This means when you set a position as .div {Position: relitive; Top: 100px; Left: 100px; the top of the element is 100 pixels down from the top of its parent and the left side of the element in 100 pixels left of it's original position.
  • Fixed When using the fixed position the units are measured from the corasponding sides of the parent containereg 100 pixels down from the top of the parent and 100 pixels left of the parents left...

For a practical example, see the Robot Face notes.