Креирањето на комплексни CSS форми сега е возможно благодарение на новата функција shape(), која овозможува создавање на форми со многу кривини и случајни елементи, што претходно беше тешко да се постигне без SVG или слики.
Контекст
Основните CSS форми како правоаголници и кругови се лесни за креирање, но посложените форми како триаголници, шестоаголници и ѕвезди бараат повеќе напор. Сепак, со shape() функцијата, можеме да создадеме форми кои изгледаат како да се од SVG светот, но се целосно изработени со CSS.
Како функционира?
Сите форми што можат да се создадат со генераторите се базираат на иста техника: многу команди за кривини. Основниот трик е да се осигура дека две соседни кривини создаваат мазна крива, така што целата форма изгледа како една континуирана крива.
Креирање на формите
Најлесната форма за почеток е случајниот брановиден разделувач. Две променливи ја контролираат формата: грануларноста и големината. Грануларноста дефинира колку кривини ќе има, а големината го дефинира просторот каде што ќе се цртаат кривините.
Првиот чекор е создавање на N точки кои рамномерно се поставуваат на дното на елементот. Потоа, вертикалната позиција на точките се поместува случајно користејќи ја променливата за големина. Од таму, се земаат две соседни точки и се дефинира нивната средна точка, од каде што се цртаат сите кривини за да се добие формата.
Демонстрации
Со генераторите, можете да создадете различни форми и анимации. На пример, класичен распоред со бројни брановидни разделувачи, каде што секој елемент има различна конфигурација. Можете да додадете анимации со фиксирање на грануларноста и големината, а потоа да генерирате две различни форми за секоја од променливите.
Заклучок
Функцијата shape() отвора нови можности за креирање на комплексни форми без потреба од SVG или слики. Ова ни овозможува лесно да имаме убави транзиции и анимации. Не заборавајте да ја зачувате мојата веб-страница за CSS генератори, од каде што можете да го добиете кодот за формите што ги разгледавме и повеќе.