CSS in 2019
--variable-name: 10px syntax to define a CSS variable. To apply it, use the
var(--variable-name) to an element.
- If you need to have a fallback value when using a variable, follow the
var(--variable-name, 15px) syntax
- Variables follow the same inheritance rules in CSS - a variable is available to use from the selector it was declared and all its descendants.
- Global variables are declared using the
:root pseudo selector
- CSS grid items are
content-box by default
- Fractional unit
fr is similar to percentages but in decimal form
repeat(NUMBER_OF_TIMES, 100px, 200px) to save you from retyping your columns or rows
grid-template-columns: span NUM_OF_MERGE to create a
rowspan merge. Also applicable to
grid-template-areas to name your columns. This name can then be used with
grid-template-column:[COLUMN_NAME] 100px or
grid-template-row:[COLUMN_NAME] 100px to quickly define your measurements.
2D and 3D Transformations Functions
translate(30px, 10px) to position elements in the x and y axes from its parent element area in a 2D plane
rotate(90deg) for rotating an element in a 2D plane
transform-origin: 50% 50% | center uses the element's midpoint for rotation in a 2D plane
rotateX(45deg) rotates an element from the x-axis in a 3D plane - the element is upside down like a reflection when the angle of rotation is
rotateY(45deg) rotates an element from the y-axis in a 3D plane - the effect of a
180deg rotation makes the element appear like you are looking at it from behind
rotateZ(90deg) is the same as
scale(.5,.5) is a short hand for
scaleY(.5). It resizes the specified element on a 2D plane. A value lower than
1 makes the element smaller. A negative value gives it a rotation effect.
- These default font sizes are all the same
font-size: 100% | 16px | 12pt | 1em | medium
- Superimpose background images by specifying multiple images when using background, e.g.
background: url(image1.jpg, image2,jpg)
object-fit to specify scaling rules on image or video tags in relation to its container element