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

Jump to content

Publicidade

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Efeito Degradê sem Imagens! Compatível com MSIE6, Firefox 1.0.7, Safari 2.0.1, Opera 7.5 & 8.5

#1 User is offline   EVANDRO PH 

  • Group: Membros
  • Posts: 1
  • Joined: 26-July 07

Posted 26 July 2007 - 03:33 PM

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">
<!--
.style1 {
font-family: VERDANA;
font-weight: bold;
font-size: 24px;
}
.style2 {
font-family: VERDANA;
font-weight: bold;
font-size: 12px;
color: #FF9900;
}
body {
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.style3 {font-family: VERDANA; font-weight: bold; font-size: 24px; color: #000066; }
.style4 {font-family: VERDANA; font-weight: bold; font-size: 12px; }
-->
</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">&nbsp;</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
0

#2 User is offline   Amateur 

  • Group: Membros
  • Posts: 110
  • Joined: 22-July 07

Posted 31 October 2007 - 11:12 AM

Aewwww!!!

Muito bom, gostei, tanto dá no firefox 2.0 com no IE 7.0 muito bom cara!



INTÉ!
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Similar Topics Collapse

  Topic Forum Started By Stats Last Post Info
New Replies Ajuda com jogo
Como faser um joguinhu basico 		Desenvolvimento de Jogos Biazin 
  • 8 Replies
  • 2384 Views
New Replies Nova versão do Opera permite trocar arquivos e músicas pelo navegador Notícias Notícias 
  • 0 Replies
  • 145 Views
New Replies Jovem engana imprensa mundial com dado falso na web Notícias Notícias 
  • 0 Replies
  • 197 Views
New Replies NBC e News Corp criam site de vídeos para concorrer com YouTube Notícias Notícias 
  • 0 Replies
  • 407 Views
Locked Topic Nem todos os Fla
Flas via Sothink Decompiler 		Flash & ActionScript Tio_Wlad 
  • 1 Reply
  • 1642 Views
New Replies Problemas com MM_controlShockwave
IE5 ok, IE6 ok, Firefox nem sinal... 		Dreamweaver kilik 
  • 1 Reply
  • 631 Views
New Replies Div fixo no Internet Explorer
Só tá funcionando no Firefox 		Web Standards Bart 
  • 7 Replies
  • 2884 Views
New Replies Cebit: surge primeiro "clone" da plataforma....
IDG Now! - Computação Pessoal 		Notícias TiTi Celestino 
  • 0 Replies
  • 295 Views

Publicidade

1 User(s) are reading this topic
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)