Proč používat SVG vlny pro webdesign?
Moderní webdesign ustupuje od přísných, rovných a pravoúhlých bloků. Přidáním organických tvarů, jako jsou vlnovky nebo šikmé přechody, dodáte stránce dynamiku a rozbijete vizuální nudu. Použití formátu SVG (Scalable Vector Graphics) je pro tyto účely ideální – obrázek je tvořen matematickou křivkou, takže zabírá jen pár bajtů a je naprosto ostrý na jakémkoliv monitoru bez ohledu na přiblížení.
Jak vygenerovanou vlnu použít?
Náš generátor vám nabízí dvě možnosti vložení na web:
- HTML (SVG kód): Vložte kód přímo do svého HTML souboru. Tato metoda je skvělá, pokud chcete pomocí CSS animovat barvu vlny nebo s ní manipulovat přes JavaScript. Umístěte ji obvykle na úplný konec nebo začátek sekce (divu).
- CSS (Background-image): Kód vložíte do svého stylového předpisu. Jedná se o tzv. Data URI, kdy je samotné SVG zakódováno přímo v CSS a prohlížeč nemusí stahovat žádný externí soubor. Ideální pro čisté a rychlé pozadí.
Rady pro čistý design
Při tvorbě vln se držte pravidla "méně je více". Nastavte barvu vlny tak, aby přesně navazovala na barvu pozadí následující sekce na vašem webu. Můžete také vygenerovat dvě vlny s mírně odlišnou průhledností a vložit je přes sebe pomocí absolutního pozicování, čímž vytvoříte nádherný 3D efekt přelévající se vody.