Efeito Degradê sem Imagens!

Efeito degradê sem imagens compatível com MSIE6, Firefox 1.0.7, Safari 2.0.1, Opera 7.5 & 8.5 em Windows 2K, XP e OS X.

Primeiro, vamos criar o arquivo JS, nomeie-o como degrade.js e coloque o seguinte conteúdo:

CODE

/*************************
CÓDIGO PARA CRIAÇÃO DE DEGRADÊ SEM IMAGEM
*************************/

window.addEventListener?window.addEventListener("load",createGradient,false):window.attachEvent("onload",createGradient);

function createGradient() {
    if(!document.getElementById)return;

    objArray = getGradientObjects();
    if(!objArray.length) return;

    for(i=0;i<objArray.length;i++) {
        params = objArray[i].className.split(" ");
        if(document.all && !window.opera) {
            objArray[i].style.width = objArray[i].offsetWidth + "px";
            params[3] == "horizontal"?gType = 1:gType = 0;
            objArray[i].style.filter = "progid:DXImageTransform.Microsoft.Gradient(GradientType="+gType+",StartColorStr=\"#" + params[1] + "\",EndColorStr=\"#" + params[2] + "\")";
    } else {
            colorArray = createColorPath(params[1],params[2]);
            x=0;y=0;
            if(params[3] == "horizontal") {
                w=Math.round(objArray[i].offsetWidth/colorArray.length);
                if(!w)w=1;
                h = objArray[i].offsetHeight;
            } else {
                h = Math.round(objArray[i].offsetHeight/colorArray.length);
                if(!h) h =1;
                w = objArray[i].offsetWidth;
            }
            makeGrandParent(objArray[i]);
            tmpDOM = document.createDocumentFragment();
            for(p=0;p<colorArray.length;p++) {
                g = document.createElement("div");
                g.setAttribute("style","position:absolute;z-index:0;top:" + y + "px;left:" + x + "px;height:" + h + "px;width:" + w + "px;background-color:rgb(" + colorArray[p][0] + "," + colorArray[p][1] + "," + colorArray[p][2] + ");");
                params[3] == "horizontal"?x+=w:y+=h;
                tmpDOM.appendChild(g);
                if(y>=objArray[i].offsetHeight || x >= objArray[i].offsetWidth) break;
            }
            objArray[i].appendChild(tmpDOM);
            tmpDOM = null;
        }
    }
}

function getGradientObjects() {
    a = document.getElementsByTagName("*");
    objs = new Array();
    for(i=0;i<a.length;i++) {
        c = a[i].className;
        if(c != "") if(c.indexOf("gradient") == 0) objs[objs.length] = a[i];
    }
    return objs;
}

function createColorPath(color1,color2) {
    colorPath = new Array();
    colorPercent = 1.0;
    do {
        colorPath[colorPath.length]=setColorHue(longHexToDec(color1),colorPercent,longHexToDec(color2));
        colorPercent-=.01;
    } while(colorPercent>0);
    return colorPath;
}

function setColorHue(originColor,opacityPercent,maskRGB) {
    returnColor=new Array();
    for(w=0;w<originColor.length;w++) returnColor[w] = Math.round(originColor[w]*opacityPercent) + Math.round(maskRGB[w]*(1.0-opacityPercent));
    return returnColor;
}

function longHexToDec(longHex) {
    return new Array(toDec(longHex.substring(0,2)),toDec(longHex.substring(2,4)),toDec(longHex.substring(4,6)));
}

function toDec(hex) {
    return parseInt(hex,16);
}

function makeGrandParent(obj) {
    disp = document.defaultView.getComputedStyle(obj,'').display;
    disp == "block"?nSpan = document.createElement("div"):    nSpan = document.createElement("span");
    mHTML = obj.innerHTML;
    obj.innerHTML = "";
    nSpan.innerHTML = mHTML;
    nSpan.setAttribute("style","position:relative;z-index:10;");
    obj.appendChild(nSpan);
}

Agora, usamos criar a página normal com a chamada da classe, no meu caso, nomeei como index2.html:

Aqui já tem uma página com algumas modificações básicas, mas você poderá modificá-la como quiser.

QUOTE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>DEGRADE TESTE</title>
<style type="text/css">

</style>
<script type="text/javascript" src="degrade.js"></script>
</head>

<body class="gradient 999999 ffffff vertical">

<table width="100%" height="346" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>TABELA 1</td>
</tr>
</table>
<table width="100%" height="346" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>TABELA 2</td>
</tr>
</table>
<p align="center" class="style3"> </p>
</body>
</html>

Particularmente, eu prefiro usar imagem, pois este código tem dois pequenos problemas:

1 - As margens dá página devem estar definidas como "0" (Zero)
2 - Somente a parte onde possui conteúdo o degradê aparece... Ou seja, se você pôr uma só linha do arquivo html, a parte em "branco" da página, não recebe o efeito degradê. Mas nada que não possa ser controlado...

Grande vantagem: como é usado como uma classe (class), pode ser usado em QUALQUER tag html, como DIV, P, BODY, TABLE, etc...

Créditos: Slayer Office (slayeroffice.com)
Maiores exemplos e detalhes em: http://slayeroffice.com/code/gradient/

Abraço a todos

Topic	Forum	Started By	Stats	Last Post Info
Como se faz esse transição ? vi q	Javascript / AJAX / DHTML	leuzinhuuu	1 Reply 231 Views	05 February 2011 - 01:06 PM By: xanburzum
Positivo lança PCs 'tudo em um' com Windows 7	Notícias	Notícias	0 Replies 90 Views	22 September 2009 - 02:57 PM By: Notícias
Brasileiros serão maioria na "Copa da Computação"	Notícias	Notícias	0 Replies 292 Views	21 May 2008 - 03:58 PM By: Notícias
Procon cria site exclusivo para queixas de compras pela internet	Notícias	Notícias	0 Replies 118 Views	21 October 2010 - 08:53 AM By: Notícias
Problema com video Tempo predefinido	Flash & ActionScript	AcquaBlue	1 Reply 665 Views	26 July 2006 - 09:14 AM By: Micheeel
E mail falso da Receita Federal pode infectar computadores	Notícias	Notícias	0 Replies 260 Views	30 March 2009 - 05:17 PM By: Notícias
ESTOU COM DUVIDA EM UMA FERRAMENTA Path scrubber Tool	Fireworks	ricardoelias	1 Reply 541 Views	28 August 2004 - 01:54 AM By: fabioricotta
Ajuda com Classic Tween em AS 2	Flash & ActionScript	fsabreu	0 Replies 73 Views	27 September 2011 - 08:53 PM By: fsabreu

..:: MX Studio Fóruns ::..: Efeito Degradê sem Imagens! - ..:: MX Studio Fóruns ::..

Publicidade