Texturas de fondo con Sitio Web

ceaped · #1 (**permalink**) 06/02/2008, 17:54

Buenas noches.

He visto sitio Web como este:

http://www.electricescape.com/index-html.html

Que tienen de fondo una imagen y registra por llamarlo asi bien el sitio o sus contenidos css o diagramacion de la pagina web.
No se si me hago explicar bien, el punto es como logro hacer este tipo de sitio web que me parece bien logrado?, no se si sea con css o si sea con algo mas.
Si alguien me puede dar una guía, tutorial o ejemplo para lograrlo se lo agradeceria mucho.

Gracias.

ceaped · #2 (**permalink**) 07/02/2008, 09:58

Si alguien me puede guiar en este tema se lo agradecería mucho.

Daniel Ulczyk · #3 (**permalink**) 07/02/2008, 10:39

Mirá, por favor, el código fuente de la página y verás que sobre un diseño basado en tablas se han utilizado imágenes como fondo de elementos <td>
No existe en este caso una técnica que tenga el mérito de ser original o algo fuera de lo común.
Saludos!

ceaped · #4 (**permalink**) 08/02/2008, 06:03

Buenos días Daniel Ulczyk, si ya mire su código fuente. Creo que formule mi duda mal.
Porejemplo este sitio (suponiendo) y otros muchos que he visto implementan texturas de fondo que realzan el sitio Web; esto como se hace?, con css, o con algún lenguaje como javascript (si es con javascript dimelo para preguntar en el foro indicado).
Estoy buscando hacer un sitio de este modo pues enriquece enormemente el xHTML pues como todos sabememos (en mi opinión) quedan sitios Web muy planos y esto ayudaría a que la Web fuera un poco más vistosa. No quiero con este comentario final iniciar una discusión si estoy equivocado o acierto lo que digo simplemente deseo saber si es posible con algún tutorial como se hace loque digo.

Gracias por su ayuda

Daniel Ulczyk · #5 (**permalink**) 08/02/2008, 06:15

En tu primer post no se entendía lo que ahora explicás.
El tema entonces no tiene que ver con CSS, sino más bien, con diseño gráfico.

Generación, edición y tratamiento de imágenes; efecto de sombras y colores para obtener una simulación 3D.

No tengo presente algún tutorial al respecto (pero seguro que con JavaScript sobre la imagen, no vas a obtener ese efecto).
Posiblemente en el foro de diseño gráfico puedan orientarte mejor, dependiendo el editor que estés usando: PhotoShop, GIMP, Fireworks, Corel, etc.
Suerte!

ceaped · #6 (**permalink**) 08/02/2008, 15:05

Ok eso por un lado la parte gráfica del fondo.
Pongamos un caso en concreto, el fondo de la web que menciono.
Yo como hago para que ese fondo se adapte a varias resoluciones de monitar?

Yo habia visto algo en el foro de javascript en los faqs.
Tema: Fondo degradado
Autor: caricatos

Cita:

<html>
<head>
<title>
Degradado
</title>
<script language=javascript>
function color(n) {
return "0123456789ABCDEF".charAt(parseInt(n / 16)) + "0123456789ABCDEF".charAt(parseInt(n % 16));
}

function ini() {
var elFondo = document.getElementById("fondo").style;
var ancho = document.body.clientWidth;
var alto = document.body.clientHeight;
elFondo.width = ancho;
elFondo.height = alto;
var altoCelda = alto / 256;
var tabla = "<table cellpadding=0 cellspacing=0 width=100% height=100%>";
for (var i = 255; i >= 0; i --)
tabla += "<tr><td width=100% height=" + altoCelda + " style='background-color: #FF" + color(i) + "00' ></td></tr>"
tabla += "</table>";
document.getElementById("fondo").innerHTML = tabla;
}
</script>
</head>
<body style="margin:0" onresize=ini() onload="ini()">
<div style="position: relative">
<div id=fondo style="position:absolute; top:0; left:0;"></div>
<div id=general style="position:absolute; top:0; left:0;">
<table border=1>
<tr>
<td >
Tabla sin importancia
</td></tr></table>
<div>
</div>
</body>
</html>

Yo deseo algo asi pero con una textura. Yo la hice en photoshop y la deseo poner en una Web de fondo asi como esta en la Web que puse de referencia, claro esta que en esa Web no esta así.
Gracias

Daniel Ulczyk · #7 (**permalink**) 08/02/2008, 16:21

Cada tipo de textura, por forma, dimensiones, etc. requiere de una técnica distinta. Y para eso no creo que exista una regla general, que pueda solucionar todos los casos.
No es mi estilo la utilización de JavaScript para obtener presentaciones de diseño. Prefiero para tal efecto la utilización de Hojas de Estilos en Cascada (CSS).
En el siguiente, ejemplo; que podés consultar

Open Source Web Design: Bitter Sweet

Podés notar que utiliza dos imágenes
una para el <body>: 1673 x 3px y
otra para el <div class="container">: 702 x 3px

El fondo, con esta técnica se adapta a cualquier resolución. Seguramente no el ejemplo más ilustrativo; pero creo que podés tomar la idea.

ceaped · #8 (**permalink**) 09/02/2008, 05:28

Ok gracias