CSS Section 4

Opacity & Alpha Channel

Alpha Channel

In rgba, the alpha channel is a value between 0 and 1. A value of 0 means fully transparent, and 1 means fully opaque.

Example: rgba(1, 3, 4, alpha)

Opacity

opacity is a CSS property used to control the transparency of an element. It also accepts values between 0 (fully transparent) and 1 (fully opaque).

Position

The position property defines how an element is positioned in the document. It is powerful but can be confusing at first:

• static – Default position; the element follows the normal flow of the document.
• relative – Keeps the element in the flow, but allows offsetting it relative to itself using top, left, right, or bottom.
• absolute – Removes the element from the normal flow. It is positioned relative to the nearest positioned ancestor (or the viewport if none).
• fixed – The element is positioned relative to the viewport and stays fixed during scrolling.

CSS Transitions

CSS transitions allow smooth changes between property values over a specified duration.

transition: property duration timing-function delay;

CSS Transform (Read MDN)

The transform property allows you to move, rotate, scale, and skew elements.

Rotate

transform: rotate(angle);

Scale

transform: scale(x, y);

Translate

transform: translate(x, y);

Skew

transform: skew(x-angle, y-angle);

Transform Origin

Defines the point of origin for the transformation (default is the center).

transform-origin: center;

You can combine multiple transformations in a single transform property by separating them with spaces.

Background

• background-color
• background-image: url("...")
• background-size
• background-position
• background-attachment
• background – A shorthand for all the above properties. Note: background-size must come after background-position. You can also stack multiple backgrounds using a comma (,).