Foros del Web - Ver Mensaje Individual

furoya · #2 (**permalink**) 09/02/2003, 15:10

Sí y no.

Existen un par de trucos para dibujar o colorear fondos sin imágenes, pero ésto no significa que sean prácticos de usar.

Aquí van dos con CSS:

Código:

 

<HTML> 
<HEAD> 
<TITLE> FONDOS DEGRADÉ 1.</TITLE> 
<STYLE>
<!--
.abs{position:absolute}
// -->
</STYLE>
</HEAD> 
<BODY >

<table style='margin:0px' height=200 width=290 
border=1 align=center cellpadding=10> 

<div class=abs style="z-index:-10; 
filter:alpha(style=1); 
height:200px; width:290px; background:orange"> 
</div> 
<td>Con filtro <tt>alpha</tt>. 
<h1>QWERTYUIOP</h1> 
Sólo para <b>IE4+</b></td> 

</table>

<p> </p>

<table style='margin:0px' height=270 width=290 
border=1 align=center cellpadding=10> 

<div class=abs style="z-index:-10; font:8px; 
overflow:hidden; width:290px; height:270px; 
letter-spacing:150px; background:#000000">
<pre><font style="background:#0000ff">  </font>
<font style="background:#0000ff">  </font>
<font style="background:#0000f7">  </font>
<font style="background:#0000f0">  </font>
<font style="background:#0000e7">  </font>
<font style="background:#0000e0">  </font>
<font style="background:#0000d7">  </font>
<font style="background:#0000d0">  </font>
<font style="background:#0000c7">  </font>
<font style="background:#0000c0">  </font>
<font style="background:#0000b7">  </font>
<font style="background:#0000b0">  </font>
<font style="background:#0000a7">  </font>
<font style="background:#0000a0">  </font>
<font style="background:#000097">  </font>
<font style="background:#000090">  </font>
<font style="background:#000087">  </font>
<font style="background:#000080">  </font>
<font style="background:#000077">  </font>
<font style="background:#000070">  </font>
<font style="background:#000067">  </font>
<font style="background:#000060">  </font>
<font style="background:#000057">  </font>
<font style="background:#000050">  </font>
<font style="background:#000047">  </font>
<font style="background:#000040">  </font>
<font style="background:#000037">  </font>
<font style="background:#000030">  </font>
<font style="background:#000027">  </font>
<font style="background:#000020">  </font>
<font style="background:#000017">  </font>
<font style="background:#000010">  </font>
<font style="background:#000007">  </font></pre> 
</div> 
<td style="color:white"><b>Con <tt>font 
style="background:..."</tt>. 
<h1>QWERTYUIOP</h1> 
Éste funciona en todos?.</b></td> 

</table>

<p> </p>

</BODY> 
</HTML>

Y ya que estamos en el foro de JavaScript :

Código:

<HTML> 
<HEAD> 
<TITLE> FONDO DEGRADÉ 2.</TITLE> 
</HEAD> 
<BODY>

<SCRIPT language=JavaScript>
 clr=new Array('00','11','22','33','44','55','66',
 '77','88','99','aa','bb','cc','dd','ee','ff');

/* AQUÍ COMIENZA LA TABLA DE COLORES */ 
 document.write
("<table border=0 cellpadding=0 cellspacing=0 class=p1>");
 document.write("<tr height=20>");
 var red=15;
 var green=0;
 var blue=0;
 for (green=0;green<16;green++) { 
 document.write('<td width=3  bgcolor="#'+clr[red]+clr[green]+clr[blue]+'"></td>'); 
 }
 green=15;
 blue=0;
 red=15;
 for (red=15;red>-1;red--) { 
 document.write('<td width=3  bgcolor="#'+clr[red]+clr[green]+clr[blue]+'"></td>'); 
 }
 green=15;
 blue=0;
 red=0;
 for (blue=0;blue<16;blue++) { 
 document.write('<td width=3  bgcolor="#'+clr[red]+clr[green]+clr[blue]+'"></td>'); 
 }
 
 green=15;
 blue=15;
 red=0;
 for (green=15;green>-1;green--) { 
 document.write('<td width=3  bgcolor="#'+clr[red]+clr[green]+clr[blue]+'"></td>'); 
 }
 green=0;
 blue=15;
 red=0;
 for (red=0;red<16;red++) { 
 document.write('<td width=3  bgcolor="#'+clr[red]+clr[green]+clr[blue]+'"></td>'); 
 }
 green=0;
 blue=15;
 red=15;
 for (blue=15;blue>-1;blue--) { 
 document.write('<td width=3  bgcolor="#'+clr[red]+clr[green]+clr[blue]+'"></td>'); 
 }
 document.write("</tr>");
 document.write("</table>"); 
/* AQUÍ TERMINA LA TABLA DE COLORES */

/* AQUÍ COMIENZA LA TABLA DE GRISES */ 
 document.write
("<table border=0 cellpadding=0 cellspacing=0 class=p2>");
 document.write("<tr height=20>");
 for (i=15;i>-1;i--) { 
 document.write
('<td width=8  bgcolor="#'+clr[i]+clr[i]+clr[i]+'"></td>'); 
 }
 document.write("</tr>");
 document.write("</table>"); 
/* AQUÍ TERMINA LA TABLA DE GRISES */

</SCRIPT><p> </p>

Este código lo encontré en : <a 
href="http://javascriptkit.com/script/script2/colorbar.htm"> 
colorbar</a>.

</BODY> 
</HTML>

█▓▒░ PD : ¿y por qué sin imágenes?. ░▒▓█