Jeśli niedawny trend w zakresie płaskiego projektowania niczego nie zademonstrował, to jak niewiarygodnie ograniczeni są projektanci stron internetowych, jeśli chodzi o kompozycję. Teraz, gdy nie jesteśmy już rozproszeni przez skosy, gradienty i połysk, oczywiste jest, że projektanci stron internetowych mają jedną strukturę, w której mogą budować swoje projekty: prostokąty.
Oczywiście istnieje wiele sposobów komponowania grup prostokątów, ponieważ na ekranie znajdują się piksele, ale gdy weźmiesz pod uwagę wymagania typu i konieczność projektowania dla różnych rozdzielczości, opcje układu zaczynają być wyraźnie ograniczone.
Wszyscy wiemy, że wszystkie rogi nie są kątami prostymi; wszyscy wiemy, że linie nie zawsze są proste. W rzeczywistości jedne z najbardziej ekscytujących projektów ubiegłego wieku wyrwały się z sieci i wytrysnęły w łukach i kątach, tworząc napięcie, dramat i podekscytowanie. Jest to prosta propozycja w druku: otwórz dokument w programie InDesign, wybierz narzędzie Elipsa i narysuj okrąg na scenie, wybierz narzędzie Tekst i kliknij kółko, a następnie wklej tekst; teraz spróbuj tego samego w CSS, proszę bardzo, zrobię kawę, czekając ...
Oczywiście istnieje wiele sposobów na narysowanie koła na stronie internetowej, ale jeśli umieścisz tekst wokół niego, odkryjesz, że to nie jest okrąg; jego prostokąt ograniczający jest nadal prostokątny. Jedyną opcją tworzenia tekstu, który unosi się na krzywej, jest wstawianie spacji na początku każdej linii i podziałów linii na końcu, sztucznego wcięcia w tekst; coś, co powoduje spustoszenie w dostępności.
Aby rozwiązać ten problem, W3C opracowuje kształty CSS. Wydano 20 czerwca pierwszy publiczny projekt roboczy, CSS Shapes Module Level 1, opisuje użycie nieprostokątnych kształtów w stosunku do modelu pudełkowego i zachowania zmiennoprzecinkowego. Obecnie trwają prace nad proponowanymi dodatkami do CSS: prostokąt kształtów, wstawka-prostokąt, koło, elipsa i wielokąt.
Przy początkowej implementacji będziemy mogli tylko unosić się wokół kształtów. Aby to zrobić, użyjemy własności shape-outside, np .:
Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.