ИЗБРАННЫЕ ПРИМЕРЫ JAVASCRIPT+CSS 2013 года

Библиотека javascript SE@RCHER ИЗБРАННЫЕ ПРИМЕРЫ 2013 г. ЯНВАРЬ >>>

HTML ↴

<!DOCTYPE html>
<html>
<head>
<title>Тег canvas  Градиент зеленого цвета через canvas</title>
<style>

body {
  text-align: center
}

</style>

<script>

window.onload = function() {
  var ctx = document.getElementById('c').getContext('2d');

var g1 = ctx.createLinearGradient(0, 0, 300, 200);
  g1.addColorStop(0.0, 'rgba(0, 255, 0, 0.0)');
  g1.addColorStop(1.0, 'rgba(0, 255, 0, 1.0)');

var g2 = ctx.createLinearGradient(0, 0, 300, 200);
  g2.addColorStop(0.0, 'rgba(0, 255, 0, 1.0)');
  // VML Bug
  g2.addColorStop(1.0, 'rgba(0, 0, 0, 0.0)');
  ctx.fillStyle = g1;
  ctx.fillRect(0, 0, 300, 100);
  ctx.fillStyle = g2;
  ctx.fillRect(0, 100, 300, 100);
};

</script>
</head>
<body>

<p>This tests gradients</p>

<script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

размер Kb

ПРИМЕР ↴

✔ пример в полном окне

на главную страницу раздела - клавиша ESC