Comunidad de diseño web y desarrollo en internet online

Capa con sombra?

Citar            
MensajeEscrito el 14 Sep 2005 03:33 pm
Hola a todos y todas,

Estoy haciendo una página en dreamweaver y he visto un efecto que me gusta mucho, pero que no tengo NI IDEA de cómo hacerlo!

Es un fondo degradado (hasta ahí, ya lo he hecho con la etiqueta body de css), echad un vistazo a esta página: http://www.ek10.com/

El caso es que a los lados de la capa (creo que son capas y no tablas, aunque no estoy seguro :( ), además de estar la floritura esa, hay una pequeña sombra....la veis?

Bueno, pues es que me gustaría hacer algo parecido y no sé si es una imagen, o dos, o varias, o ponerlo en capas, en tablas, con css, ufff, no sé cómo organizarlo...

Si pudierais echarme una mano, os lo agradecería mucho!!

Saludos!!!

Por ma

6 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 14 Sep 2005 04:18 pm
Aquí vez el ejemplo
lo que tu ves es esa imágen.
El efecto lo puedes lograr con Fireworks, creas un cuadrado, le das a filtros > iluminar y seleccionas el color negro para que la luz parezca sombra (en ese efecto en concreto, tambien hay uno especifico de sombra, pero me gusta más como te digo...), tambien hay más parámetros como el ancho, el grado de iluminacion...

Una vez tienes la imágen optimizada, creas en XHTML una etiqueta div

Código :

<div class="mi_cuadrito_con_sombra">el contenido va aki dentro</div>

y en un archivo css vinculado al de xhtml pones esto:

Código :

.mi_cuadrito_con_sombra{
background:url('*imagenes/imagen_de_las_sombras') no-repeat;

*esa url es ficticia, al igual que los nombres, etc. Sólo sustituyelos por los tuyos.
PD: leete el manual de xhtml y css de ramm en la seccion de tutoriales, está muy bien.
Ciao!!! :wink:

PD2: Al bofh que corresponda, aunque descentre creo es bueno poner la imagen entera, si lo veis bien la borrais,ok?? (y esta PD tambien) aquí os dejo la url por si acasohttp://www.ek10.com/imagenes/fondos/contenedor.jpg

Nota SWAT: Corregido ;) a la siguiente combina la etiqueta URL con la IMG o deja sólo el URL de la imagen...por favor ;)

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

  Héroes

opera
Citar            
MensajeEscrito el 14 Sep 2005 05:54 pm
Dejame corregirte un poquito aqui johnny, en este caso, para que quede mejor serian necesarias dos imagenes, la primera, una que contenga el color de fondo y el diseño de las flores y tal (fondo plano), la cual va a atravesar a lo largo toda la pagina.

Código :

body {
  background-image:url(imagen_central.jpg);
  background-repeat:repeat-y;
  }

luego haces el div con un alto especifico d ela segunda imagen, la cual contendra el diseño de las flores y el degradado, digamos 600px, y a ese div, al cual llamaremos "contenedor" le pones la otra imagen de fondo, ocupando el 100% de la pantalla.

Puedes ver los archivos de esa pagina aqui:
Imagen repetida
Imagen de arriba
Archivo CSS

NOTA: esto no funciona bien si la resolucion es mayor a la de la imagen de arriba.[/i]

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 14 Sep 2005 06:44 pm
oups! tienes razon, lo hice pensando con el objetivo de crear la capa con sombra, pero sí que es verdad que así quedaría mejor... :oops:

en todo caso...

Código :

body { 
  background-image:url(imagen_central.jpg); 
  background-repeat:repeat-y; 
  }

...para el fondo

y

Código :

.mi_cuadrito_con_sombra{ 
background:url('imagenes/imagen_del_fondo_especifico_de_la_div.png') no-repeat;

...para la imágen de la div.

También hay un buen tutorial sobre cómo crear una div con esquinas redondeadas en diseñorama, lo menciono porque haciendo las imagenes específicas podría venir muy bien...
http://www.disenorama.com/tutoriales/css/creando_esquinas_redondeadas.htm :P
deu!

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

  Héroes

opera
Citar            
MensajeEscrito el 15 Sep 2005 07:48 pm
Muchas gracias, eh? lo voy a intentar....estoy algo perdido con las css y con las div (yo era de los de las tablas...hasta que me comencé a sentir en una calle cortada, sin poder avanzar :)).

Ramm, he visto tus tutoriales, están muy chulos, y muy claros, gracias!

Johnny, el link a diseñorama está genial!

Saludos!!

Por ma

6 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 15 Sep 2005 07:54 pm
de nada hombre, para eso estamos. Tu duro con el css y el xhtml que una vez le pillas el "truco" está facilisimo, y si tienes dudas pues ya sabes donde acudir...
ciao!

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

  Héroes

opera

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.