Foros del Web » Creando para Internet » CSS »

¿Como pongo una imagen de relleno en un borde?

Estas en el tema de ¿Como pongo una imagen de relleno en un borde? en el foro de CSS en Foros del Web. Saludos, bueno pues estoy modificando una plantilla y trabajando sobre el archivo css, y resulta q no kiero una linea de borde de un solo ...
  #1 (permalink)  
Antiguo 26/06/2010, 14:24
Avatar de Jahier  
Fecha de Ingreso: julio-2009
Mensajes: 71
Antigüedad: 8 años, 4 meses
Puntos: 4
Pregunta ¿Como pongo una imagen de relleno en un borde?

Saludos, bueno pues estoy modificando una plantilla y trabajando sobre el archivo css, y resulta q no kiero una linea de borde de un solo color sino una con degradado y para eso prepare una imagen. Pero no se como ponerla para q aga de borde, la linea d codigo q kiero modificar es:


border-bottom: 7px solid #E1E1E1


En lugar de #E1E1E1 kiero q aparezca la imagen jpg q hace una linea de degradado.
  #2 (permalink)  
Antiguo 26/06/2010, 16:14
Avatar de alberduris  
Fecha de Ingreso: junio-2010
Ubicación: Bizkaia
Mensajes: 7
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: ¿Como pongo una imagen de relleno en un borde?

Cita:
Iniciado por Jahier Ver Mensaje
¿Como pongo una imagen de relleno en un borde?
Me añado a la pregunta y estoy a la espera de que se responda!
  #3 (permalink)  
Antiguo 26/06/2010, 16:18
Avatar de allemand2  
Fecha de Ingreso: febrero-2010
Ubicación: Cordoba
Mensajes: 34
Antigüedad: 7 años, 10 meses
Puntos: 1
Respuesta: ¿Como pongo una imagen de relleno en un borde?

Puedes crear una nueva clase que tenga como background esa imagen con repeat, y luego colocas esa clase con un div=id en el template.
  #4 (permalink)  
Antiguo 26/06/2010, 17:45
 
Fecha de Ingreso: junio-2002
Mensajes: 751
Antigüedad: 15 años, 6 meses
Puntos: 22
Respuesta: ¿Como pongo una imagen de relleno en un borde?

En CSS3 con la propiedad border-image.
Para obtener gradientes sin usar imágenes, en CSS hay linear-gradient, radial-gradient. Algunos navegadores incluyen sus propias propiedades (-webkit-gradient, -moz-border-image).

En versiones anteriores de CSS no se puede asignar una imagen de fondo a un borde. Hay alternativas para emular bordes con imágenes, tanto mediante CSS como mediante javascript o el uso de frameworks javascript como JQuery.

Anidar dos elementos, el interior tendrá el contenido principal, y el elemento exterior con un padding dejará ver la imagen de fondo (en lugar de padding en el elemento exterior se podría usar margin en el elemento interior).
Código CSS:
Ver original
  1. .imgborde{padding:10px; background-image:url(imagen.gif);}
  2. .contenido{background-color:white;}
Código HTML:
Ver original
  1. <div class="imgborde"><div class="contenido">contenido</div></div>

O con un sólo elemento(aunque la imagen se verá debajo del contenido, puede servir para crear el efecto de hoja con bordes quemados, o si tiene el centro transparente a de un color sólido como puede ser el blanco no molestará si el contenido es texto):
Código CSS:
Ver original
  1. .imgborde2{padding:10px; background-image:url(imagen.gif);}
Código HTML:
Ver original
  1. <div class="imgborde2">contenido</div>

En estos ejemplos, no probados, puede ser necesario especificar las medidas (height, width) de los elementos. También se puede ajustar el padding o margin para que se vea en todos los bordes, o sólo en los que se quiera (derecho, izquierdo, superior, inferior), usar repeat, etc, según como sea la imagen que se quiere poner de fondo.

CSS Image Frames Style Tutorial
Unique CSS Borders – Boring borders step aside
Bonita técnica para lograr fondos desvanecidos o degradados
  #5 (permalink)  
Antiguo 25/10/2015, 12:36
 
Fecha de Ingreso: octubre-2015
Mensajes: 4
Antigüedad: 2 años, 1 mes
Puntos: 0
Respuesta: ¿Como pongo una imagen de relleno en un borde?

Hola yo tengo este código pero el degradado aparece en toda la tabla no sé que hago mal

<div class="imgborde2"padding: 10px;
background-image: url(Mis%20imagenes/Amargura/bode1.png);
top: repeat;
right: repeat;
botton:repeat;
left:repeat;></div>

<head>
<style type="text/css">
.imgborde2{
padding: 10px;
background-image: url(Mis%20imagenes/Amargura/bode1.png);
top: repeat;
right: repeat;
botton:repeat;
left:repeat;
}
  #6 (permalink)  
Antiguo 02/11/2015, 15:17
Avatar de dartcoupli  
Fecha de Ingreso: febrero-2013
Ubicación: España
Mensajes: 13
Antigüedad: 4 años, 10 meses
Puntos: 0
Esto puede serte útil.

Hola.

He encontrado esto, donde viene ejemplos bastante buenos, he probado el que tú buscas, (viene un ejemplo en la web) y funciona bastante bien, no se si es el resultado que buscas exactamente, en el caso que no lo sea avisarme. Pero se acerca a lo que buscas.

http://www.mclibre.org/consultar/amaya/css/css3_bordes.html

Saludos.

Etiquetas: pongo, relleno, bordes
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

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 00:49.