W3CSS:
- CSS Variables (Candidate Recommendation)
- CSS4 Colors (Working Draft)
- Flexbox (Candidate Recommendation) (Editor's Draft)(W3Schools)
SMACSS
- 1) Base
- css resets
- 2) Layout
.layout-- Defines Width
- Can contain anything
- 3) Modules
.btn{}(single word for vanilla module).btn-small{}.btn-active{}
- 4) State
5) Themes
Individual Styles:
- Box -- display, float, position, left, top, height, width
- Border
- Background
- Text
- Other
Color:
- Main, light, lightest, dark, darkest,
Use Class over ID.
CSS3
Handy Attributes:
box-sizing: border- Padding is included in the total size of an element.
button{outline:none}- Removes the blue outline on an active button
font-weight:- 100
- 200
- 300
- 400 (normal)
- 500
- 600
- 700 (bold)
- 800
- 900
Animation:
2D Transforms:
| css | definition |
|---|---|
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values. Combines all the 2D transform methods into one |
| translate(x,y) | Defines a 2D translation, moving the element along the X- and the Y-axis |
| translateX(n) | Defines a 2D translation, moving the element along the X-axis |
| translateY(n) | Defines a 2D translation, moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |
| scaleX(n) | Defines a 2D scale transformation, changing the element's width |
| scaleY(n) | Defines a 2D scale transformation, changing the element's height |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |
3D Transforms:
| Function | Description |
|---|---|
| matrix3d (n(*16)) | Defines a 3D transformation, using a 4x4 matrix of 16 values |
| translate3d(x,y,z) | Defines a 3D translation |
| translateX(x) | Defines a 3D translation, using only the value for the X-axis |
| translateY(y) | Defines a 3D translation, using only the value for the Y-axis |
| translateZ(z) | Defines a 3D translation, using only the value for the Z-axis |
| scale3d(x,y,z) | Defines a 3D scale transformation |
| scaleX(x) | Defines a 3D scale transformation by giving a value for the X-axis |
| scaleY(y) | Defines a 3D scale transformation by giving a value for the Y-axis |
| scaleZ(z) | Defines a 3D scale transformation by giving a value for the Z-axis |
| rotate3d(x,y,z,angle) | Defines a 3D rotation |
| rotateX(angle) | 3D rotation along the X-axis |
| rotateY(angle) | 3D rotation along the Y-axis |
| rotateZ(angle) | 3D rotation along the Z-axis |
| perspective(n) | Defines a perspective view for a 3D transformed element |
Transform Properties:
| transform | |
|---|---|
| transform-origin | |
| transform-style | |
| perspective | |
| perspective origin | |
| backface visibility | Defines whether or not an element should be visible when not facing the screen |