Základné tvary v CSS 3

V tomto článku si predvedieme, ako ľahko sa dajú vytvoriť rôzne tvary čisto v CSS 3 bez použitia obrázkov!

Jednoduché tvary

Obdĺžnik a štvorec

Obdĺžnik je asi najľahšie. Jednoducho vytvoríme div s určitou výškou a šírkou a následne ho zafarbíme.

#obdelnik
{
   width: 200px;
   height: 100px;
   background: #777777;
}

ukážka:

Štvorec je pochopiteľne obdĺžnik s rovnakou šírkou a výškou.

Ovál a kruh

Na ovál budeme potrebovať poznať border-radius, ktorý nám zaguľacuje rohy. Keď však dáme zaoblenia väčší ako 50%, vytvoríme ovál.

#oval
{
   width: 100px;
   height: 150px;
   background: #777777;
   border-radius: 50%;
}

ukážka:

Kruh opäť vytvoríme ako ovál s rovnakou výškou a šírkou.

Trojuholník

Trojuholník sa vytvára cez rámček. Vytvoríte vlastne štyri trojuholníky a tie si potom upravujete. Každá hodnota je ťažnice strany, tzn. zo stredu strany do protiľahlého vrcholu. Šírka a výška trojuholníka musí byť na nule, inak sa nám v stredu vytvorí štvorec či obdĺžnik.

Generátor trojuholníkov je napríklad na stránke http://apps.eky.hk/...e-generator/

#trojuhelnik {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 200px 100px 0 100px;
   border-color: #777777 transparent transparent transparent;
}

ukážka:

Lichobežník

Lichobežník je vytvorený podobne ako trojuholník s tým rozdielom, že zadáme šírku.

#lichobeznik {
   height: 0;
   width: 150px;
   border-style: solid;
   border-width: 0 100px 100px 100px;
   border-color: transparent transparent #777777 transparent;
}

ukážka:

Kosoštvorec

Kosoštvorec si vytvoríme ako štvorec a následne ho pootočíme od 45 ° a to transformáciou.

Transform: rotate (); potrebuje tiež vendor prefix!

#kosoctverec {
   height: 100px;
   width: 100px;
   margin-top: 25px;
   background: #777777;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

ukážka:

Rovnobežník

Na rovnobežník použijeme opäť transform, teraz však skew, za ktorý dáme do zátvorky uhol. Nezabudnite na vendor prefix !!

#rovnobeznik
{
    width: 200px;
    height: 100px;
    background: #777777;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -ms-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    transform: skew(-20deg);
}

ukážka:

Zložitejšie tvary

Teraz bude trochu väčšia zábava! Prejdeme z ľahkých tvarov na tie zložitejšie a postupne si ukážeme ako každý vytvoriť.

Dvanácticípá hviezda

Pýtate sa ako urobiť dvanácticípou hviezdu? ... Veď v CSS existujú len tvary sa štyrmi rohmi! Tak pozerajte!

Najskôr si vytvoríme štvorec ktorému dáme absolútnu pozíciu.

#hvezda
{
    width: 100px;
    height: 100px;
    background: #777777;
    position: absolute;
}

A teraz pridáme ďalší štvorec. Ako? ... No mohli by sme pridať ďalší div, ale my sme chytrí, preto využijeme toho, že môžeme napísať #hvezda: before. Vytvoríme si teda ďalšie absolútne pozicovaný štvorec, ktorý pootočíme o 30 °. Štvorec si zafarbíme zatiaľ na červeno, aby sme vedeli, čo nám to urobilo.

#hvezda:before
{
   content: "";
   position: absolute;
   width: 100px;
   height: 100px;
   background: red;
   -webkit-transform: rotate(30deg);
   -moz-transform: rotate(30deg);
   -ms-transform: rotate(30deg);
   -o-transform: rotate(30deg);
   transform: rotate(30deg);
}

Nádhera, už sme skoro hotoví. Teraz urobíme to isté s #hvezda: after a pootočíme o -30 °. Pre skúšku si ho zafarbíme na zeleno.

No super! Máme dvanácticípou hviezdu. Celkový kód vyzerá nejako takto:

#hvezda
{
    width: 100px;
    height: 100px;
    background: #777777;
    position: absolute;
}
#hvezda:before
{
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    background: #777777;
    -webkit-transform: rotate(30deg);
   -moz-transform: rotate(30deg);
   -ms-transform: rotate(30deg);
   -o-transform: rotate(30deg);
   transform: rotate(30deg);
}
#hvezda:after
{
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    background: #777777;
    -webkit-transform: rotate(-30deg);
   -moz-transform: rotate(-30deg);
   -ms-transform: rotate(-30deg);
   -o-transform: rotate(-30deg);
   transform: rotate(-30deg);
}

ukážka:

Nezabudnite na content: "";, Inak sa vám nič nevytvorí. Obdobným spôsobom môžeme (pomocou dvoch trojuholníkov) vytvoriť šesťcípou hviezdu, skúste si to!

Srdce

Chvíľku si sadneme a popremíšľate ako vytvoriť srdce. Zistíme, že sa dá vytvoriť pomocou jedného štvorca a dvoch kruhov. Ideme teda na to!

Najskôr si vytvoríme štvorec s absolútnou pozíciou, pootočený o 45 °.

#srdce
{
    margin-top: 25px;
    position: absolute;
    height: 60px;
    width: 60px;
    background: #777777;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

Potom si vytvoríme zase pomocou: after a: before 2 kruhy (rovnaká šírka a výška ako štvorec), ktoré si pre lepšiu viditeľnosť zafarbíme na červenú a modrú. Kruh bude mať tiež absolútnu pozíciu. No áno, ale my máme kosoštvorec a v ňom modrý kruh.

Na ostatné nám poslúži margin! Najdôležitejšie je však nezabudnúť na to, že máme štvorec pootočený smerom doľava o 45 °, teda si musíme hlavu trochu pootočiť aby bol v rovine s štvorcom a potom vymyslieť ako ho posunieme

Marginom potom kruhy posunieme o 30px (polovica veľkosti) hore a dole.

Celkový výsledok bude vyzerať takto:

#srdce
{
    margin-top: 25px;
    position: absolute;
    height: 60px;
    width: 60px;
    background: #777777;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
#srdce:before
{
    content: "";
    position: absolute;
    height: 60px;
    width: 60px;
    background: #777777;
    border-radius: 50%;
    margin: -30px 0 0 0;
}
#srdce:after
{
    content: "";
    position: absolute;
    height: 60px;
    width: 60px;
    background: #777777;
    border-radius: 50%;
    margin: 0px 0 0 30px;
}

ukážka:

Pacman

Ako posledného si urobíme Pacmana!... super čo? Ako na to? ... a čo treba cez trojuholníky, kde časť pusy bude zneviditeľnenie. Tiež zaoblíme rohy do kruhu.

Jednoduché že? Pre tých, ktorí by sa ešte nechytali, tu prikladám kód:

#pacman {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 60px 60px 60px 60px;
  border-color: #777777 transparent #777777 #777777;
  border-radius: 50%;
}

Kto bude mať chuť tak vytvorí pomocou: before tiež oko!

Skúšajte vymyslieť nové tvary! Môžete nám poslať nejaké vydarené dolu do komentárov