Foros del Web » Creando para Internet » CSS »

Bordes de imágenes

Estas en el tema de Bordes de imágenes en el foro de CSS en Foros del Web. Estimados, encontré que se pueden hacer bordes con CSS. Quisiera saber si alguien me puede ayudar a que mis imágenes queden algó como en la ...
  #1 (permalink)  
Antiguo 21/07/2010, 07:41
Avatar de eragas  
Fecha de Ingreso: enero-2009
Mensajes: 417
Antigüedad: 8 años, 10 meses
Puntos: 43
Bordes de imágenes

Estimados, encontré que se pueden hacer bordes con CSS.

Quisiera saber si alguien me puede ayudar a que mis imágenes queden algó como en la imagen:



Si alguien sabe un estilo parecido sería genial, ya que quisiera que mis imágenes tuvieran ese borde.

Encontré este link:
http://net.tutsplus.com/tutorials/ht...th-simple-css/

Mil gracias,
  #2 (permalink)  
Antiguo 21/07/2010, 08:07
Avatar de TuWebBook  
Fecha de Ingreso: julio-2010
Ubicación: Gijón(Xixón)-Asturias(Asturies)
Mensajes: 580
Antigüedad: 7 años, 4 meses
Puntos: 17
Respuesta: Bordes de imágenes

Creo que se hace dando px al "margin" de las imágenes.
  #3 (permalink)  
Antiguo 21/07/2010, 08:38
Avatar de eragas  
Fecha de Ingreso: enero-2009
Mensajes: 417
Antigüedad: 8 años, 10 meses
Puntos: 43
Respuesta: Bordes de imágenes

Please, si me pueden ilustrar aún más pero a nivel de código. Seríal genial.

Gracias!!!
  #4 (permalink)  
Antiguo 21/07/2010, 10:10
Avatar de eragas  
Fecha de Ingreso: enero-2009
Mensajes: 417
Antigüedad: 8 años, 10 meses
Puntos: 43
Respuesta: Bordes de imágenes

Estimados, a lo mejor podría quedar algo así. Es posible con el CSS, somo se hace?

Se aprecia que la imagen está al medio y tiene como un fondo gris y un borde más oscure. Genial



Gracias,
  #5 (permalink)  
Antiguo 21/07/2010, 10:16
 
Fecha de Ingreso: julio-2010
Mensajes: 28
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Bordes de imágenes

Código HTML:
Ver original
  1. <img src="tu/imagen" style="border:10px;">
Donde dice 10px tienes que poner el numero de pixeles que quieres de grosor.
  #6 (permalink)  
Antiguo 21/07/2010, 10:46
Avatar de Garot  
Fecha de Ingreso: marzo-2010
Ubicación: Mar de Dirac
Mensajes: 121
Antigüedad: 7 años, 9 meses
Puntos: 7
Respuesta: Bordes de imágenes

Para hacer bordes dobles aplicando estas reglas a las imagenes tiene que funcionar:

Código CSS:
Ver original
  1. border-style:double;
  2. padding:5px;
  3. background:#BCBEC0;

Ahi con "padding" podes regular la separacion de los bordes respecto de la imagen y con "background" pones el color de fondo que quieras.

Espero que te sirva.

Saludos
  #7 (permalink)  
Antiguo 21/07/2010, 10:54
Avatar de eragas  
Fecha de Ingreso: enero-2009
Mensajes: 417
Antigüedad: 8 años, 10 meses
Puntos: 43
Respuesta: Bordes de imágenes

Genial @Garot, y por favor como se inserta en este caso ya dentro del <body>, cuak sería el código suponiendo que tengo el estilo en una hoja externa de CSS.

Es decir como se inserta la imagen.

Gracias,
  #8 (permalink)  
Antiguo 21/07/2010, 11:07
Avatar de Garot  
Fecha de Ingreso: marzo-2010
Ubicación: Mar de Dirac
Mensajes: 121
Antigüedad: 7 años, 9 meses
Puntos: 7
Respuesta: Bordes de imágenes

Si en el html tenes las imagenes y queres darle el estilo mediante una hoja externa podes poner asi dentro del archivo CSS:

Código CSS:
Ver original
  1. img {  
  2.       border-style:double;
  3.       padding:5px;
  4.       background:#BCBEC0;
  5. }

pero ojo que ahi te lo va a aplicar a todas las imagenes del html.
No se adentro de que DIV tenes las imagenes pero podes especificar a que imagenes queres aplicarle el estilo, por ej:

Código CSS:
Ver original
  1. #nombredeldiv img {  
  2.       border-style:double;
  3.       padding:5px;
  4.       background:#BCBEC0;
  5. }

Ahi se aplicaria a todas las imagenes que esten dentro del DIV "nombredeldiv".

Saludos

Etiquetas: 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




La zona horaria es GMT -6. Ahora son las 22:13.