Градиент средствами JavaScript

суббота, 21 июля 2007 г.

Постоянная проблема с нарезанием однопиксельной полоски на бэкграунд сайта?
Дело в том, что есть один вариант создания градиента на страничке, например:
<div style="height: 100%; width: 100%; text-align: center;

filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,

startColorStr=#000000, endColorStr=#ffffff);">

<h1 style="color: white;">
Градиент на заднем плане будет работать только в IE.
</h1>

</div>
Но этот пример будет работать только в "Ослике". Но умные и безустали работающие программисты придумали сделать кросс-браузерный вариант. Правда средствами JavaScript, но лучше уж так =)) Так вот:
<body>

<script type="text/javascript"><!--//--><![CDATA[//><!--

function leftPad(x) {

return (x.length < 2) ? "0"+x : x;

}

function hex(x) {

return leftPad(x.toString(0x10).toUpperCase());

}

for (i=0; i<256; i++) {

var div = document.createElement("div");

div.style.backgroundColor = "#"+hex(i)+hex(i)+hex(i);

div.style.fontSize        = "0px";

div.style.lineHeight      = "0px";

div.style.height          = "2px";

document.body.appendChild(div);

}

//--><!]]></script>

</body>
Естественно найдено в сети по адресу http://www.getinfo.ru/

4 коммент.:

Анонимный комментирует...

Клёвая штука! Очень пригодится! Как раз искал что то подобное. Спасибо!

GIN комментирует...

Рад, если помогло )

Анонимный комментирует...

Спасибо большое!!! :D

Анонимный комментирует...
Этот комментарий был удален администратором блога.

Copyright © 2010 WEB IT blog