Comunidad de diseño web y desarrollo en internet online

Cómo logro éste borde ?????

Citar            
MensajeEscrito el 09 Ago 2009 02:04 pm
Hola amigos, quisiera saber cómo hacer undegradé en un borde, el diseño ya lo tengo hecho pero no sé cómo lograrlo. Son los 4 bordes de un div, los horizontales son de 1px de alto por 980px de ancho y los verticales, 350px de alto por 1px de ancho, espero se entienda.
Igual acá dejo un link a la imagen para que puedan verlos e interpretar lo que digo. Imagen

Alguien puede darme una mano ???? Desde ya muchas gracias

Por El Ruso Loco

85 de clabLevel



Genero:Masculino  

Avellaneda. Bs As.

chrome
Citar            
MensajeEscrito el 09 Ago 2009 04:09 pm
Haz una imagen con esos bordes y la pones de fondo... Si van a medir siempre lo mismo no hay problema...

Por jackbach

Claber

196 de clabLevel

1 tutorial

 

Barcelona

firefox
Citar            
MensajeEscrito el 09 Ago 2009 04:25 pm
Pero tendría que hacer una imagen de todo el div, tiene sentido poner algo con ese peso por los bordes, no hay una manera de hacerlo con css ??? o de otra manera, pero evitando poner toda una imagen de fondo del div ???
o estoy equivocado en pensar ésto ?

Por El Ruso Loco

85 de clabLevel



Genero:Masculino  

Avellaneda. Bs As.

chrome
Citar            
MensajeEscrito el 10 Ago 2009 02:52 pm
Yo pondría la imagen, en png no creo que ocupe tanto.
Si que se puede hacer de otra manera: Hces dos imagenes (una para los horizontales, otra para los verticales). Luego haces un html más o menos así:

Código HTML :

<div id="box">
  <span id="borde_i"></span>
  <span id="borde_d"></span>
  <p>...Contenidooooooo...</p>
  <span id="borde_a"></span>
</div>


Y luego el css:

Código :

#box, #borde_a { background: #xxx url('imagenbordehorizontal.png') top center; }
#borde_i, #borde_d {
background: #xxx url('imagenbordevertical.png') center 0;
width: xxxpx;
height: xxxpx;
}
#borde_i {float:left;}
#borde_d {float:right;}
#borde_a {
width: xxxpx;
height: xxxpx;
}


Para que te hagas a la idea sería algo así, aunque faltarían alomejor cositas. Con css3 será mucho más fácil... pero ahora mismo no funciona con la mayoría de navegadores.

Hasta otra!

Por jackbach

Claber

196 de clabLevel

1 tutorial

 

Barcelona

firefox
Citar            
MensajeEscrito el 10 Ago 2009 03:54 pm
Hoy lo pruebo. Lo voy a hacer con un png 8 con transparencia de indice, espero que quede !!

Por El Ruso Loco

85 de clabLevel



Genero:Masculino  

Avellaneda. Bs As.

chrome
Citar            
MensajeEscrito el 13 Ago 2009 01:53 pm

Por El Ruso Loco

85 de clabLevel



Genero:Masculino  

Avellaneda. Bs As.

chrome

 

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