Testování podpory efektu gradientu (-moz-linear-gradient, -o-linear-gradient, -webkit-linear-gradient)

• Efekt gradientu (hodnota gradient nebo linear-gradient CSS3 vlastnosti background). Funguje všude kromě Safari, IE9 a starších. Firefox také podporuje "testovací" hodnotu -moz-linear-gradient, Opera vlastnost -o-linear-gradient, Google Chrome a Safari vlastnost -webkit-gradient resp. -webkit-linear-gradient a Explorer 9 a nižší verze filter gradient. V Exploreru 10 pod Windows 7 a 8 gradient nefunguje ve starší syntaxi (první dva příklady), ale v "rozšířené" syntaxi s nastavením úhlu gradientu již ano (poslední 4 příklady). Tato verze ale již pro změnu nepodporuje filter gradient jako předchozí verze Exploreru.
  Po sloučení všech funkčních variant lze tedy nastavit lineární gradient pro úplně všechny verze prohlížečů podle předposledního příkladu. Aby to ale nebylo tak jednoduché, v Exploreru 9 je chybné zobrazení gradientu se zaoblenými rohy objektů (vlastnost border-radius), tudíž v této kombinaci nepoužitelné (Explorer 8 a nižší verze zaoblené rohy nepodporují vůbec), viz příklad poslední.
  
  <div style="background: gradient(linear, left top, left bottom, from(lightblue), to(white));"></div>
  
  
  Efekt gradientu (CSS3 hodnota gradient).
  
  
  <div style="background: linear-gradient(top, lightblue, white);"></div>
  
  
  Efekt gradientu (CSS3 hodnota gradient).
  
  
  

  Gradient pro Firefox

  <div style="background: -moz-linear-gradient(top, lightblue, white)"></div>
  
  
  Efekt gradientu (CSS3 hodnota gradient).
  
  
  

  Gradient pro Operu

  <div style="background: -o-linear-gradient(top, lightblue, white)"></div>
  
  
  Efekt gradientu (CSS3 hodnota gradient).
  
  
  

  Gradient pro Safari a Chrome

  <div style="background: -webkit-gradient(linear, left top, left bottom, from(lightblue), to(white))"></div>
  nebo
  <div style="background: -webkit-linear-gradient(top, lightblue, white)"></div>
  
  
  Efekt gradientu (CSS3 hodnota gradient).
  
  
  

  Gradient pro Explorer 9 a nižší verze (v Exploreru 10 již nefunguje)

  <div style="filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='lightblue', endColorstr='#ffffff');"></div>
  
  
  Efekt gradientu (CSS3 hodnota gradient).
  
  
  

  Gradient pro všechny prohlížeče kromě Exploreru 10

  .gradient
  { width: 200px;
    height: 200px;
    border: 1px solid blue;
    padding: 10px;
    background-color: lightblue; /* pro starší prohlížeče, které gradient nepodporují */
    background: gradient(linear, left top, left bottom, from(lightblue), to(white)); /* zatím nefunguje nikde */
    background: linear-gradient(top, lightblue, white); /* zatím nefunguje nikde */
    background: -moz-linear-gradient(top, lightblue, white); /* pro Firefox */
    background: -o-linear-gradient(top, lightblue, white); /* pro Operu */
    background: -webkit-gradient(linear, left top, left bottom, from(lightblue), to(white)); /* pro Chrome a Safari */
    background: -webkit-linear-gradient(top, lightblue, white); /* nová verze pro Chrome a Safari */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='lightblue', endColorstr='white'); /* pro Explorer 9 a nižší verze */
  }
  
  <div class="gradient"> </div>
  
  
  Efekt gradientu (CSS3 hodnota gradient)
  
  
  

  Nová varianta zobrazení lineárního gradientu (funguje všude kromě Safari, IE9 a starších).

  .gradient
  { width: 200px;
    height: 200px;
    border: 1px solid blue;
    padding: 10px;
    background-color: lightblue; /* pro starší prohlížeče, které gradient nepodporují */
    background: linear-gradient(180deg, lightblue, white);
  }
  
  <div class="gradient"> </div>
  
  
  Efekt gradientu (CSS3 hodnota gradient)
  
  
  

  Šikmý lineární gradient (v Exploreru 9 a nižších verzích nelze nastavit, v Exploreru 10 a ostatních funguje)

  .gradient
  { width: 200px;
    height: 200px;
    border: 1px solid blue;
    padding: 10px;
    background-color: lightblue; /* pro starší prohlížeče, které gradient nepodporují */
    background: linear-gradient(135deg, lightblue, white 50%, lightblue); /* kupodivu funguje v Exploreru 10 */
    background: -moz-linear-gradient(135deg, lightblue, white 50%, lightblue); /* pro Firefox */
    background: -o-linear-gradient(135deg, lightblue, white 50%, lightblue); /* pro Operu */
    background: -webkit-linear-gradient(135deg, lightblue, white 50%, lightblue); /* pro Chrome a Safari */
  }
  
  <div class="gradient"> </div>
  
  
  Efekt gradientu (CSS3 hodnota gradient)
  
  
  

  Radiální gradient (v Exploreru 9 a nižších verzích nelze nastavit, v Exploreru 10 a ostatních funguje)

  .gradient
  { width: 200px;
    height: 200px;
    border: 1px solid blue;
    padding: 10px;
    background-color: lightblue; /* pro starší prohlížeče, které gradient nepodporují */
    background: radial-gradient(lightblue, white, lightblue); /* kupodivu funguje v Exploreru 10 */
    background: -moz-radial-gradient(lightblue, white, lightblue); /* pro Firefox */
    background: -o-radial-gradient(lightblue, white, lightblue); /* pro Operu */
    background: -webkit-radial-gradient(lightblue, white, lightblue); /* pro Chrome a Safari */
  }
  
  <div class="gradient"> </div>
  
  
  Efekt gradientu (CSS3 hodnota gradient)
  
  
  

  Aktuální varianta zobrazení lineárního gradientu pro všechny aktuální prohlížeče včetně Exploreru 7, 8, 9 a 10.

  .gradient
  { width: 200px;
    height: 200px;
    border: 1px solid blue;
    padding: 10px;
    background-color: lightblue; /* pro starší prohlížeče, které gradient nepodporují */
    background: -moz-linear-gradient(270deg, lightblue, white); /* pro Firefox */
    background: -o-linear-gradient(270deg, lightblue, white); /* pro Operu */
    background: -webkit-linear-gradient(270deg, lightblue, white); /* pro Chrome a Safari */
    background: linear-gradient(180deg, lightblue, white); /* kupodivu funguje v Exploreru 10, ale s jiným nastavením úhlu */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='lightblue', endColorstr='white'); /* pro Explorer 9 a nižší verze */
  }
  
  <div class="gradient"> </div>
  
  
  Efekt gradientu (CSS3 hodnota gradient)
  
  
  

  Zobrazení lineárního gradientu u objektů se zaoblenými rohy (chybné v Exploreru 9)

  .gradient
  { width: 200px;
    height: 200px;
    border: 1px solid blue;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    padding: 10px;
    background-color: lightblue; /* pro starší prohlížeče, které gradient nepodporují */
    background: -moz-linear-gradient(270deg, lightblue, white); /* pro Firefox */
    background: -o-linear-gradient(270deg, lightblue, white); /* pro Operu */
    background: -webkit-linear-gradient(270deg, lightblue, white); /* pro Chrome a Safari */
    background: linear-gradient(180deg, lightblue, white); /* pro Explorer 10, ale s jiným nastavením úhlu */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='lightblue', endColorstr='white'); /* pro Explorer 9 a nižší verze, s kulatými zobrazeno chybně */
  }
  
  <div class="gradient"> </div>
  
  
  Efekt gradientu (CSS3 hodnota gradient)