Kulaté rohy objektu 

• styl.css
  border-radius: 15px;

Navigace

• styl.css
  nav li {list-style:none; //nezobrazí se odrážky
  display:inline; //odkazy budou vodorovně
  padding-right: 50px; }

Text uspořádaný do sloupců

• styl.css
  .sloupce {column-count:3;  //počet sloupců
  moz-column-count:3;
  webkit-column-count:3;
  column-gap:40px;  //šířka mezery
  moz-column-gap:40px;
  webkit-column-gap:40px; }
• index.html - <p class="sloupce">
  
  

Zkosení objektu

• style.css
  .zkoseni {transform:skew(-10deg); }
• index.html
  <acide class="zkoseni">

Rotace objektu

• style.css
  .otaceni {transform:rotate(-10deg); }
• index.html
  <aside class="otaceni">

Rotace i zkoseni

• style.css
  .kombinace {transform:skew(-10deg)rotate(-10deg); }
• index.html
  <aside class="kombinace"> 
  

Stín objektu

• styl.css
  aside {box-shadow:10px 5px 20px;
  rgb(128,128,128);...} 

Ovál a kružnice

• styl.css
  #oval {width:200px;
  height: 150px;
  background: rgb(50,0,0);
  border-radius: 50%; }
• index.html
  <div></div>

Další tvary

• Obdélník (čtverec) je asi nejsnadnější. Jednoduše vytvoříme div s určitou výškou a šířkou a následně jej obarvíme.
  #obdelnik { width: 200px; height: 100px; background: #777777; } 
• Ovál a kruh
  Na ovál budeme potřebovat znát border-radius, který nám zakulacuje rohy. Když však dáme zaoblení větší než 50%, vytvoříme ovál.
  #oval {width: 100px; height: 150px; background: #777777; border-radius: 50%; }
• Trojúhelník
  Generátor trojúhelníků je například na stránce https://apps.eky.hk/...e-generator/.
  Trojúhelník se vytváří přes rámeček. Vytvoříte vlastně čtyři trojúhelníky a ty si pak upravujete. Každá hodnota je těžnice strany, tzn. ze středu strany do protějšího vrcholu. Šířka a výška trojúhelníku musí být na nule, jinak se nám ve středu vytvoří čtverec či obdélník.
  #trojuhelnik { width: 0; height: 0; border-style: solid; border-width: 200px 100px 0 100px; border-color: #777777 transparent transparent transparent; }
• Lichoběžník
  

  Lichoběžník je vytvořen podobně jako trojúhelník s tím rozdílem, že zadáme šířku.
  #lichobeznik { height: 0; width: 150px; border-style: solid; border-width: 0 100px 100px 100px; border-color: transparent transparent #777777 transparent; }

• Kosočtverec
  Kosočtverec si vytvoříme jako čtverec a následně ho pootočíme od 45° a to transformací.
  Transform: rotate(); potřebuje také 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); }

• Rovnoběžník
  Na rovnoběžník použijeme opět transform, nyní však skew, za který dáme do závorky úhel. Nezapomeňte 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); }

• Složitější tvary - zde

Průhlednost
Opacity zajistí poloprůhlednost objektu samotného a jeho dceřinných objektů

• styl.css
  .opacity {background: rgb(20%, 100%, 20%); 
  ms-filter: "progid DXImage Transform.Microsoft.Alpha(Opacity=50); filter: alpha(opacity=50);" opacity: .5"; }
• index.html
  <p class="opacity">text</p>

RGBa je barva aplikovatelná a cokoliv bez vlivu na zbytek elementu

• styl.css
  .rgba {background: rgb(20%, 100%, 20%); background: rgb(20%, 100%, 20%, .5);  }
• index.html
  <p class="rgba">...</p>

Laytouvací modul flexbox

• styl.css
  .container { dispaly: flex; }
  .one, .two, .three {padding: 1em; margin-left: 2px; background: #ccc; flex-grow: 1; }
• index.html
  <div class="container">
          <p class="one">One</p>
          <p class="two">Two</p>
          <p class="three">Three</p>
  </div>

Zdroj: https://player.slideplayer.cz/10/2769745/#