jorsh / css-cheatsheet Goto Github PK

#SELECTORS ##Relational Selectors

• Descendant (E F)
• Child (E > F)
• Adjacent Sibling (E + F)
• General Sibling (E ~ F)

##Attribute Selectors

• E[attr]
• E[attr=val] equals
• E[attr~=val] like
• E[attr|=val] or
• E[attr^=val] preffix
• E[attr$=val] suffix
• E[attr*=val] contains

• :enabled
• :disabled
• :checked
• :indeterminate
• :default
• :valid
• :invalid
• :in-range
• :out-of-range
• :required
• :optional
• :read-only
• :read-write

• tag:not(argument)

• tag:target

• :root
• :empty
• :first-child
• :last-child
• :first-of-type
• :last-of-type
• :only-child
• :only-of-type

• :nth-child(n) [n= odd/ even / an+b]
• :nth-last-child(n)
• :nth-of-type(n)
• :nth-last-of-type(n)

• ::first-line
• ::first-letter

• ::before
• ::after
  • content
• ::selection

• RGBA
• HSL and HSLA
• Opacity
• Gradients

• @font-face //fontsquirrel.com
• Text Shadows
• Multi-Column
  • column-count
  • column-gap
  • column-width
  • column-rule

• Border Radius
• Border Images
• Box Shadows
  • inset

• background-size
• background-repeat: round | space
• Multiple Backgrounds
• background-origin
• background-clip

• transform:
  • scale
  • skew
  • rotate
  • translate //westciv.com/tools/transforms
• transform-origin:

• transition-property:
  • none | all |
• transition-duration:
  • time
• trnsition-timing-function:
  • keywords
    • linear
    • ease
    • ease-in
    • ease-out
    • ease-in-out
• transition-delay:
  • time
• //shorthand
  • transition: height 1s ease-in .5s;

• width
• height
• device-widht
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
• scan
• grid

• http://www.alistapart.com/articles/responsive-web-design/

• http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobileversion-of-your-website/