1. Circular photo
Give the image a square size (width and matching height), then
border-radius: 50%. Half of each side curves until you get a full circle.
Unequal width/height makes an ellipse instead.
2. Pill button
Use comfortable horizontal padding and a huge radius such as
border-radius: 999px. The corners meet so far in that the ends become a capsule.
3. Soft card lift
Floating card
Shadow instead of a heavy border
A light box-shadow like 0 4px 12px rgba(0, 0, 0, 0.15)
lifts the box off the page. Values are roughly: x-offset, y-offset, blur, color.
4. Full-bleed band
Edge-to-edge strip
Color or photo running across the section
A band with full available width and no side margins reads as a strong horizontal stripe. Useful for announcements, footers, or chapter breaks.
5. Centered page column
Give the box a set width, then margin-left: auto and
margin-right: auto (often written margin: 0 auto).
This still works on a flex container itself because it is block-level.
6. Truncate long text
Combine overflow: hidden, white-space: nowrap, and
text-overflow: ellipsis on a box with a fixed width. One line only — then “…”.
7. Soft square (squircle)
Use a medium border-radius (about 12px–24px).
Softer than a sharp rectangle, but not a full circle like 50%.
8. Tinted image / overlay for readable text
Put the photo on the outer box. Wrap the text in an .overlay with a translucent
background such as rgba(15, 23, 42, 0.72). Prefer this over relying only on shadow.
9. Halo text with text-shadow
Readable on busy photos
When contrast is weak, zero the offsets and keep the blur:
text-shadow: 0px 0px 5px black. Light text needs a dark halo; dark text needs a light one.
Use as a boost — overlays are stronger for accessibility.
10. Even icon / item row
display: flex on the parent and justify-content: space-between
(or center) spreads or centers the direct children along the main axis.
11. Decorative image with empty alt
If the image adds no meaning (pure decoration), use alt="" so screen readers skip it.
Meaningful photos still need a real description.
12. Same-size thumbnails
Set the same width and height on every thumbnail so the row or grid stays tidy,
even when the source photos have different aspect ratios.
13. Accent a word with span
Packs built for day trips and overnight camps.
Use a span for a word or phrase inside a sentence — it stays inline.
Use a div when you need a whole layout box or section.
14. Two-tone section rhythm
Alternate background classes (for example .box / .box-alt)
so stacked blocks feel paced without fancy layout tools.
15. Strong header as a visual anchor
Look at the dark bar at the top of this page — that is the live example.
A tall, high-contrast header or nav band anchors the page visually even if you are not using
position: sticky yet. Contrast and size do a lot of the work.