CSS shapes och CSS exclusions

2015.02.19


Många webb-formgivare kommer från en analog bakgrund och krocken med de rigida ettorna och nollorna har ibland varit smärtsam. Men nu börjar webben bli lite mindre square. Med CSS-shapes är print-layouten bara en CSS-standard bort.

Vissa av de här CSS specifikationerna är fortfarande i ett testskede eller har begränsat webbläsarstöd men med en bra fallback i bakfickan är det dags för oss att börja designa för framtiden.

CSS shapes

Den nya shapes-specifikationen introducerades 2012 med tanken att ge webbdesigners ett verktyg för att låta text följa konturer i eller utanför ett icke-fyrkantigt objekt.

I tidningslayout har det använts i en evighet och låtit paragrafer runda eller fylla objekt i bilden med text på olika sätt. Till webben kommer lösningen i tre delar.

Shape-funktionen kan användas med några vanliga former; cirkel, ellips, rektangel och polygon (de två senare kan även användas med rundade hörn) eller med en bild med en alfa-kanal (genomskinliga områden). Hur du använder formerna kan du läsa mer om på blogs.adobe.com

CSS shapes module level 1

Den första delen av CSS Shapes, module 1 – Shape-outside låter texten flyta runt på en sida av en form, eller en bild. Shape-outside har idag stöd i Chrome, de två senaste versionerna av Safari, Opera och den senaste Android-webbläsaren, men saker ändras fort. Håll koll på utvecklingen med hjälp av caniuse.com

CSS shapes Module Level 2

Den andra delen av CSS Shapes – Shape-inside fungerar på i princip samma sätt men i stället för att texten flyter runt en form så låter Shape-inside dig fylla en form med text. Shapes inside ligger idag under utveckling och har ännu inte stöd i någon webbläsare.

CSS Exclusions

CSS Exclusions liknar CSS Shapes med den skillnaden att med Exclusions kan du låta innehållet flyta runt formen från alla håll. Över, under, till vänster och till höger. Även Exclusions ligger under utveckling.

Läs mer om Shapes och Exclusions:

CSS Shapes av Sara Soueidan 
Shapes från Adobe 

CSS Regions

CSS Regions innebär att du kan, precis som med vanliga layoutverktyg för print, låta ditt text-innehåll flöda mellan olika behållare på sidan med olika form och utan att de behöver ligga i anslutning till varandra. Regions funkar idag i Safari för web och mobil och Explorer 10 och 11.

Läs mer om Regions hos Adobe 
Läs om Regions+Shapes av Sara Soueidan 

Flexbox

Flex box (Flexible box) används för responsiva webbsidor. Flexbox gör innehållsytor flexibla och låter dig byta position på ytorna när du bryter om innehållet för skärmar i olika storlekar.

När CSS shapes och CSS Exclusions är hållbara standarder så kommer vi att i kombination med CSS Regions och Flexbox kunna återskapa den fantastiska friheten i magasin-layout. Eller för den sakens skull, tänka nytt med en mycket större frihet. Tänk RayGun for web.