Foros del Web » Creando para Internet » CSS »

lograr este borde

Estas en el tema de lograr este borde en el foro de CSS en Foros del Web. como logro un borde sombreado como este aka les dejo una imagen: http://i48.tinypic.com/2inp0h.png es posible o esta echo con pothoshop¡¡??...
  #1 (permalink)  
Antiguo 16/12/2009, 10:09
 
Fecha de Ingreso: diciembre-2009
Mensajes: 43
Antigüedad: 8 años
Puntos: 0
lograr este borde

como logro un borde sombreado como este aka les dejo una imagen:

http://i48.tinypic.com/2inp0h.png

es posible o esta echo con pothoshop¡¡??

Última edición por pod1221; 16/12/2009 a las 10:19
  #2 (permalink)  
Antiguo 16/12/2009, 10:33
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: lograr este borde

Sin ver el código fuente pueden ser mil cosas.... Un borde añadido que da apariencia de sombra, la imagen de fondo que le han incluido ese sombreado con photoshop.. Se puede hacer..

Yo personalmente, lo haria con photoshop, creo que es mas sencillo.

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #3 (permalink)  
Antiguo 16/12/2009, 14:38
 
Fecha de Ingreso: diciembre-2009
Mensajes: 43
Antigüedad: 8 años
Puntos: 0
Respuesta: lograr este borde

agradeceria si alguien me podria explicar como lograr ese borde en css y como en potoshop.

grax!
  #4 (permalink)  
Antiguo 16/12/2009, 15:18
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
De acuerdo Respuesta: lograr este borde

Con css añadiendole la propiedad border al div http://www.librosweb.es/referencia/css/border.html

Con photoshop, mejor pregunta en el foro de diseño gráfico.
__________________
Revisa las FAQ's antes de disparar.
  #5 (permalink)  
Antiguo 17/12/2009, 00:58
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Respuesta: lograr este borde

Estas repitiendo mensaje (http://www.forosdelweb.com/f53/borde...-estos-761844/)

Saludos.
__________________
· Lo poco que sé, lo he aprendido de AQUÍ ·
· No contesto por M.P. ·
  #6 (permalink)  
Antiguo 17/12/2009, 04:42
 
Fecha de Ingreso: febrero-2007
Mensajes: 4
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: lograr este borde

Cita:
Iniciado por Impostor Ver Mensaje
Sin ver el código fuente pueden ser mil cosas.... Un borde añadido que da apariencia de sombra, la imagen de fondo que le han incluido ese sombreado con photoshop.. Se puede hacer..

Yo personalmente, lo haria con photoshop, creo que es mas sencillo.

Saludos¡¡
...es posible o esta echo con pothoshop¡¡??

¿Como vas a escribir una pagina si no sabes escribir tu lengua?
Hecho... se escribe con "h".
  #7 (permalink)  
Antiguo 17/12/2009, 06:06
 
Fecha de Ingreso: noviembre-2009
Mensajes: 11
Antigüedad: 8 años
Puntos: 1
Respuesta: lograr este borde

Cita:
Iniciado por vmorales Ver Mensaje
...es posible o esta echo con pothoshop¡¡??

¿Como vas a escribir una pagina si no sabes escribir tu lengua?
Hecho... se escribe con "h".
No entiendo que tiene que ver una cosa con la otra..
  #8 (permalink)  
Antiguo 17/12/2009, 07:16
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: lograr este borde

veamos, ese tipo de borde(sombreado), con CSS2.1 no se puede lograr, es necesario utilizar una imagen que la haces en cualquier editor gráfico.
Suponiendo que tengo una imagen para el fondo como la siguiente:



que mide 800px de ancho incluyendo la sombra.

El truco consiste en recortar una parte de la imagen para que se repita en el eje-y, en el caso de la img de ejemplo bastará con recortar un pedacito de la img que mida 800px por 2px y ponerla de fondo del contenedor principal.

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <style type="text/css">
  6. body{color:#FFF;}
  7. #contenedor_principal{width:800px; margin:0 auto; background:url(imagenes/fondo.png) repeat-y;}
  8. p{padding:15px;}
  9. </head>
  10.  
  11. <div id="contenedor_principal">
  12.     <p>Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido </p>
  13.     <p>
  14.     Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido
  15.     </p>
  16. </div>
  17. </body>
  18. </html>

teniendo como resultado esto:



__________________
WFC
codigo82
  #9 (permalink)  
Antiguo 17/12/2009, 07:47
 
Fecha de Ingreso: diciembre-2009
Mensajes: 43
Antigüedad: 8 años
Puntos: 0
Respuesta: lograr este borde

Cita:
Iniciado por willyfc Ver Mensaje
veamos, ese tipo de borde(sombreado), con CSS2.1 no se puede lograr, es necesario utilizar una imagen que la haces en cualquier editor gráfico.
Suponiendo que tengo una imagen para el fondo como la siguiente:



que mide 800px de ancho incluyendo la sombra.

El truco consiste en recortar una parte de la imagen para que se repita en el eje-y, en el caso de la img de ejemplo bastará con recortar un pedacito de la img que mida 800px por 2px y ponerla de fondo del contenedor principal.

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <style type="text/css">
  6. body{color:#FFF;}
  7. #contenedor_principal{width:800px; margin:0 auto; background:url(imagenes/fondo.png) repeat-y;}
  8. p{padding:15px;}
  9. </head>
  10.  
  11. <div id="contenedor_principal">
  12.     <p>Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido </p>
  13.     <p>
  14.     Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido
  15.     </p>
  16. </div>
  17. </body>
  18. </html>

teniendo como resultado esto:



gracias por todo me re sirvio te lo agradesco.
  #10 (permalink)  
Antiguo 17/12/2009, 07:49
 
Fecha de Ingreso: diciembre-2009
Mensajes: 43
Antigüedad: 8 años
Puntos: 0
Respuesta: lograr este borde

Cita:
Iniciado por vmorales Ver Mensaje
...es posible o esta echo con pothoshop¡¡??

¿Como vas a escribir una pagina si no sabes escribir tu lengua?
Hecho... se escribe con "h".
flaco me parece que este foro es para ayudar no veo por que criticas ademas que haces en este foro si sos tan perfecto??

jaja lo suponia es un..
  #11 (permalink)  
Antiguo 17/12/2009, 13:28
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: lograr este borde

Hola:

Cita:
Iniciado por pod1221 Ver Mensaje
flaco me parece que este foro es para ayudar no veo por que criticas ademas que haces en este foro si sos tan perfecto??
Perdón por meterme donde no me llaman, pero creo que no estaría de más que cuidaramos un poco nuestra cultura ¿no crees? ¿o prefieres volverte cavernícola? Además, está dentro de las normas de uso del foro. Si cada uno escribe como le da la gana terminaremos por no entendernos. Si un simple lenguaje de programación da error o no funciona correctamente si cometes una "falta de ortografía" ¿Por qué no leyendo/escribiendo?

Cita:
Iniciado por pod1221 Ver Mensaje
jaja lo suponia es un..
Prefiero no interpretar eso como una falta de respeto a otro usuario del foro.

Saludos.



PD.: Yo tampoco soy perfecto.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:43.