Appearance and effects

Choose a readable colour and understand the difference between colour, image and gradient backgrounds.

Choose a project photograph, compare Cover and Contain, and check crop and contrast.

Choose direction, colours and colour-stop positions while keeping the content readable.

Separate the border, corner shape and outside highlight of a card.

Use shadows, opacity, filters or backdrop effects for a clear purpose.

Compare presets, custom offsets and blur without confusing shadow with spacing.

Fade the whole element, preserve readable children and distinguish invisible from hidden.

Compare seven image filters and understand how combined effects behave.

Create a frosted glass effect while keeping the panel text sharp.

Apply decorative transformations while preserving the original layout space.

Choose which style changes should be gradual and set their duration and delay.

Start with a preset, inspect the real movement and replace or remove it without changing the content.

Distinguish a timed appearance from scroll progress, hover, pressure and continuous repetition.

Add properties to one animation, set their values and timing, then duplicate or remove individual effects.

Compare Loop and Ping-pong, then choose whether an appearance keeps or resets its reached state.

Choose text fragments, adjust their rhythm and compare simple fades, spring movement, Scramble and Glitch.

Set a transition duration on an interactive animation and apply it to its other effects.