Sabra — Visual System Study

Image
Treatments

CSS-only treatments applied to existing magazine photography. No re-shoots, no re-exports — the archive stays as-is and the layer sits on top. Hover any frame to see the untreated original.

01

Editorial Mono

Editorial Mono treatment applied to a Sabra magazine photograph

Kills colour clashes across mixed-source archive photos. Safest global default.

filter: grayscale(1) contrast(1.15);
02

Brand Duotone

Brand Duotone treatment applied to a Sabra magazine photograph

Photo desaturated, blended over a red→paper bed. Locks every image to the brand red.

mix-blend-mode: multiply; over a red gradient bed
03

Newsprint Wash

Newsprint Wash treatment applied to a Sabra magazine photograph

Slight sepia and lowered saturation — warms photos toward the paper background.

filter: sepia(.35) saturate(.75) contrast(1.1);
04

Halftone Screen

Halftone Screen treatment applied to a Sabra magazine photograph

Radial-gradient dot grid multiplied on top. Reads as printed press at any size.

::after radial-gradient dots, mix-blend-mode: multiply;
05

Print Grain

Print Grain treatment applied to a Sabra magazine photograph

SVG turbulence noise overlay. Hides compression artefacts in older uploads.

::after feTurbulence noise, opacity .5;
06

Offset Block

Offset Block treatment applied to a Sabra magazine photograph

Hard shadow, no blur — the brutalist move from the new design, zero effect on the photo.

box-shadow: 12px 12px 0 0 var(--ink);
07

Registration Marks

Registration Marks treatment applied to a Sabra magazine photograph

Corner crop marks inset in the frame. Adds editorial rigour without touching pixels.

absolute corner rules, inset 12px;
08

Rule Scan

Rule Scan treatment applied to a Sabra magazine photograph

1px repeating horizontal rules. Strong on hero images, heavy on small thumbnails.

repeating-linear-gradient(180deg, ink 0 1px, transparent 1px 5px);
09

Red Wash

Red Wash treatment applied to a Sabra magazine photograph

Multiplied brand gradient from the bottom — built for cards with overlaid headlines.

linear-gradient(0deg, primary, transparent 62%); multiply
10

Angular Crop

Angular Crop treatment applied to a Sabra magazine photograph

Clipped corner. Pure geometry — pairs well with 01 or 02 rather than standing alone.

clip-path: polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%);
13

Diagonal Slash

Diagonal Slash treatment applied to a Sabra magazine photograph

Red wedge multiplied across the lower corner. Leaves the top clear for a headline.

clip-path polygon wedge + mix-blend-mode: multiply;
15

Corner Notch

Corner Notch treatment applied to a Sabra magazine photograph

Chunk cut from the top-right. Sticker energy, still fully rectangular in layout terms.

clip-path: polygon(0 0, 74% 0, 100% 22%, 100% 100%, 0 100%);
16

Column Strips

Column Strips treatment applied to a Sabra magazine photograph

Photo sliced into eight press columns by paper-coloured gaps. Strong for section openers.

repeating-linear-gradient(90deg, transparent, paper gaps);
17

Ticket Border

Ticket Border treatment applied to a Sabra magazine photograph

Dotted inset rule. Signals archive or document material without a caption.

::before border: 3px dotted var(--paper); inset 10px;
18

Chevron Base

Chevron Base treatment applied to a Sabra magazine photograph

Pointed bottom edge — works as a masthead image sitting above body text.

clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
19

Stacked Frame

Stacked Frame treatment applied to a Sabra magazine photograph

Ink outline plus a red block behind. Pure furniture — the photo is untouched.

outline: 2px solid ink; box-shadow: 20px 20px 0 primary;
20

Spotlight Fade

Spotlight Fade treatment applied to a Sabra magazine photograph

Radial mask dissolves the edges into paper. Good for busy or badly cropped archive shots.

mask-image: radial-gradient(ellipse 70% 80% at 50% 45%, #000 55%, transparent);