Advanced Formatting (ADD103)

This page demonstrates at least 6 techniques: gradient backgrounds, text-shadows, rounded corners, box-shadows, border-image, multiple backgrounds, and a gradient button with transition + transform. The code is simple and student‑level.

See the Cards

1) Gradient Background

The whole page background uses a linear-gradient with a soft radial-gradient overlay.

background: radial-gradient(...), linear-gradient(...);

2) Text Shadow

The title uses text-shadow to glow slightly against the hero image.

text-shadow: 0 2px 8px rgba(0,0,0,.35);

3) Rounded Corners

Cards have border-radius:16px for soft corners.

4) Box Shadow

Each card sits above the page using a subtle box-shadow.

box-shadow: 0 10px 20px rgba(0,0,0,.08);

5) Border Image

This card uses a custom PNG strip with border-image for a decorative frame.

border-image: url(images/border-pattern.png) 30 round;

6) Gradient Button + Hover

The button above uses a gradient background, transition, and transform on hover.

Demo Button

7) Multiple Backgrounds

The hero uses an image plus a gradient overlay to improve contrast.

background: linear-gradient(...), url(...);

8) Circular Photo + Drop Shadow

An image styled with border-radius:50% and filter: drop-shadow.

Sample portrait