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. Firefox také podporuje "testovací" hodnotu -moz-linear-gradient, Opera vlastnost -o-linear-gradient, Google Chrome a Safari vlastnost -webkit-gradient resp. -webkit-linear-gradient (viz ukázky níže).
  
  

  Aktuální varianta zobrazení lineárního gradientu pro všechny prohlížeče

  .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 40%, white);
  }
  
  <div class="gradient"> </div>
  
  
  Efekt gradientu (CSS3 hodnota gradient)
  
  

  Aktuální varianta zobrazení radiálního gradientu pro všechny prohlížeče

  .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);
  }
  
  <div class="gradient"> </div>
  
  
  Efekt gradientu (CSS3 hodnota gradient)
  
  

  Historické varianty:

  <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)