Exempel på att kombinera raddelningseffekt med kod

Halvtonsmönster, dessa intensiva prickade bilder, är stöttepelaren i tryck och webbdesign. Även om den traditionellt används som ett sätt för trogen återgivning av tryckta bilder, har det också blivit en egen stil.

Idag används halvtonsmönster som bakgrunder eller för att ge några surrealistiska specialeffekter till bilder. Och i takt med att CSS och JavaScript har utvecklats har designers också kommit på hur de ska integrera effekten i koden. Resultaten kan bli fantastiska.

Låt oss se några exempel på hur halvtoner implementeras genom kod. Som du kommer att se finns det ett antal olika bilder och tekniker för att få ut den här vintagemodellen på nätet.

Fotoringsignaler av din katt (eller inte katten)

Detta är förmodligen den mest välkända halvtonsimplementeringen. Det innebär att lägga till effekter på ett befintligt foto (en katt, i det här fallet). Men det här utdraget är också helt anpassningsbart. Du kan ersätta punkter med till exempel en emoji eller text. Dessutom kan du ändra storleken på varje punkt. Och ja, du kan byta katter med ansikten, men varför?

Visa penna
Ycw halvton

Tryck för mellantoner

Detta är en mycket kreativ användning för halvtoner. Ett subtilt mönster visas på den här knappen, med en något starkare rullningseffekt. Men att klicka kommer att utlösa ett mönster med hög kontrast som säkert kommer att fånga din uppmärksamhet.

Visa penna
Taylor Halvtonsknapp

Blurt

Ficklampseffekter har blivit ganska populära på senare tid. Här kombineras det med ett halvtonsmönster som “ljusar upp” den dolda texten. Det är en rolig interaktion, och kaptenen ger ifrån sig lite av en retro/brutal stämning.

Visa penna
Tyler Durretts dolda text avslöjad

Få en mer raffinerad ton

Det finns ingen regel om att mellantoner måste vara högljudda, och denna passage är ett bevis. Halvtonseffekterna kombineras perfekt till ett rutmönster. Resultatet är något unikt och sofistikerat. Bonuspoäng för att bygga med ren CSS.

Visa penna
Devin Price kors halvtonsmönster blommar

Fjärrrullningseffekt

Det här är ett utdrag som ser ut som något ur en sci-fi-skräckfilm. Ett blåsvart halvtonsfotografi tittar på oss från andra sidan skärmen. Håll muspekaren över den och en del av bilden bleknar in i skuggorna.

Visa penna
Halftone Aberration av Théo Gil

Parallax Sans BS

En annan surrealistisk titt på effekten, den här har en svindlande mängd färgade prickar. Om du flyttar markören skapas dessutom en 3D-parallaxeffekt som avslöjar en subtil kontur som svävar över huvudbilden. Den extra storleken gör effekten ännu mer intressant.

Visa penna
Parallax Halftone av Eric Jackson Wood

Duett allt

Tack vare CSS-blandningslägen kan radbrytningar läggas till nästan vad som helst. I det här exemplet placeras en vacker blandning ovanpå flera foton. Att hålla muspekaren över en avslöjar dess sanna färg. Det är en mycket praktisk användning som är övertygande, men inte överdriven.

Visa penna
CSS Blend Modes av Jos van Weesel

Mer än den genomsnittliga textskuggan

Låt oss avsluta med ett annat riktigt användningsfall. Här har vi ett grundläggande kort typsnitt som använder offsetfärger. De två första exemplen använder en enfärgad nyans, vilket fungerar bra. Men den andra uppsättningen har ett halvtonsmönster, vilket ger den en mer konstnärlig känsla.

Visa penna
Mark’s Strokes, Shadows + Halvtonseffekter

En modell för innovation

Det bästa med att kombinera kod med klassiska visuella effekter är att det öppnar upp en helt ny värld. Visst, vi skulle kunna lägga till ett halvtonsmönster till ett designelement, men varför sluta där?

Designers letar efter nya smarta användningsområden för dessa effekter. I ovanstående kodavsnitt används halvton på både traditionella och kreativa sätt. Gamla gränser finns bara om vi vill att de ska finnas.

Vill du se fler exempel på halvtonsmönster? Kolla in vår CodePen-kollektion för andra kreativa användningsområden.