Zlatý řez, známý také jako číslo 1,618, fascinuje umělce, architekty i designéry po tisíciletí. V přírodě a umění vytváří harmonii a je základem pro vizuálně vyvážené kompozice. Od pyramid až po mušle, tento proporční princip lze aplikovat i na web design.
V CSS nám pomáhá vytvářet přirozeně atraktivní a vyvážené layouty. Zlatý řez není jen číslo, ale filozofie, kterou využívali například antičtí architekti a renesanční umělci. A proč bychom ho tedy nevyužili i v moderním webovém designu?
V tutoriálu od Madsa Stoumanna se naučíte, jak pomocí CSS vytvořit diagram podle zlatého řezu a Fibonacciho posloupnosti. Pomocí gridu a několika triků s pseudoelementy budete schopni vytvořit efekt spirály. V kódu se využívá grid o rozměrech odvozených z Fibonacciho sekvence a barvy i pozice jednotlivých elementů jsou nastaveny pomocí vlastních proměnných.
I když CSS neumí přímo kreslit spirály, můžeme je napodobit pomocí kruhů a jejich přesného umístění na síťovém plátně.