/*** hratky s css3 ***/
div{
    margin: 3px;
   }
.prvni{ float:left;
       width: 500px;
      background:
                 url('obr1.jpg'),
                 url('obr2.jpg'),
                 #ddccaa;
        background-repeat:
                 no-repeat,
                 repeat;
      }
.druhy{ float:left;
       width: 500px;
       background-image: url(obr1.jpg), url('obr2.jpg');
       background-position: center bottom, left top;
       background-repeat: no-repeat;
      }
.treti{ float:left;
       width: 500px;
       background-image: url(obr1.jpg), url(obr2.jpg), url(obr3.jpg), url(obr4.jpg);
       background-position:  left top, left bottom, right bottom, right top ;
       background-repeat: no-repeat;
      }
.ctvrty{float:left;
       width: 500px;
       background-image: url(obr1.jpg), linear-gradient(180deg, yellow 0%, green 100%); /*kombinace s přechodem*/
       background-repeat: no-repeat;
      }
.paty{ float:left;
       width: 500px;
        background-image: url(http://www.css3.info/wp-content/themes/new_css3/img/sheep.png), 
                          linear-gradient(0deg, green 35%, darkgreen 45%, darkblue 55%, cyan 90%, white 100%); /*kombinace s přechodem*/
        background-position: center bottom;
        background-repeat: no-repeat;
        border-radius: 10px;                                                     /*zakulacené rohy*/
      }                                               
.sesty{ float:left;
       width: 500px;
       background-color: #FF9900;
       border-top-left-radius: 4em;
       border-top-right-radius: 10em;
       border-bottom-right-radius: 4em;
       border-bottom-left-radius: 10em;
       /* border-radius: 4em 10em;  - totožný zápis*/
      }
.sedmy{ float:left;
       width: 500px;
       background-color: #FF9900;
      border-radius: 15% 15% 0 0 / 30% 15% 0 0;                                  /*elipsovitě zakulacené (zboku/zhora)*/
      }
.osmy{ float:left; 
       width: 500px;
      background-image: linear-gradient(150deg, lightblue 10%, blue 70%, darkblue 100%);
      border-radius:50%;
      }
.devaty{ float:left; clear:both;
       width: 200px;
       border: 20px solid green;
       border-image-source: linear-gradient(lightgreen, darkgreen); 
       border-image-slice: 20;   /* má odpovídat šířce borderu*/
      }
.desaty{ float:left; 
       width: 200px;
       border-color: green;
       border-style: solid;
       border-width: 21px 23px;
       border-image-source: url(ram.jpg); 
       border-image-slice: 21 23; /*určuje jaký kousek zdrojového obrázku se použije - tato část bude roztažena na šířku okraje*/
       border-image-repeat: repeat; 
      } /*zkrácený zápis: border-image: url(ram.jpg) 21 23 repeat; */
.jedenacty{ float:left; 
       width: 500px;
       background-image: url(obr1.jpg);
       background-repeat: no-repeat;
       background-size: contain;           /*obrázek na pozadí se vždy vejde do boxu*/
      }
.dvanacty{ float:left; 
       width: 500px;
       background-image: url(obr1.jpg);
       background-repeat: no-repeat;
       background-size: cover;
       border: 10px dotted rgba(0,0,255,0.5);
       background-clip: content-box;        /*pozadí není pod paddingem ani borderem*/
       padding: 5px;
      }
.trinacty{ float:left;
       border-style: solid; 
       border-width: 100px 0 100px  200px;
       border-color:  transparent transparent transparent red;
       
      }
      
.ctrnacty{ float:left;
        width: 500px;
       background-color: green;
       background-repeat: no-repeat;
       background-size: cover;
       border: 10px dotted rgba(0,0,255,0.5);
       background-clip: border-box;      /*pozadí zasahuje až pod border*/
       padding: 5px;
             }
             
.patnacty{             /*http://www.html5rocks.com/en/tutorials/shapes/getting-started/ nějak nefunguje :( */
       shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
       background-color: blue;
       
      }