Foros del Web » Creando para Internet » CSS »

(CSS) caja con borde e imagen

Estas en el tema de (CSS) caja con borde e imagen en el foro de CSS en Foros del Web. Hola, Necesito hacer algo así: VER CAJA Intenté de diferentes modos y no he podido lograr lo que ven en la imagen. Alguna idea?? Gracias....
  #1 (permalink)  
Antiguo 04/10/2010, 22:32
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
(CSS) caja con borde e imagen

Hola,

Necesito hacer algo así:

VER CAJA

Intenté de diferentes modos y no he podido lograr lo que ven en la imagen.

Alguna idea??

Gracias.
  #2 (permalink)  
Antiguo 04/10/2010, 22:55
Avatar de TEPO  
Fecha de Ingreso: febrero-2010
Mensajes: 235
Antigüedad: 7 años, 10 meses
Puntos: 23
Respuesta: (CSS) caja con borde e imagen

Bueno, lo que yo veo es una ilustracion, un dibujo, con css, no podes dibujar, podes hacer cuadros, como mucho cuadros con bordes redondeados, la verdad que no entiendo tu consulta, que es lo queres hacer especificamente?
Si queres hacer eso con css, es muy facil, abris el illustrator o el photoshop haces esa imagen y luego la pones como background de un div, de hecho, ya lo tenes hecho, porque el enlace es un jpg, disculpame, no entiendo tu pregunta.-
  #3 (permalink)  
Antiguo 04/10/2010, 23:00
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: (CSS) caja con borde e imagen

necesito hacer eso que ves en la imagen pero con css.

O sea:

Borde de 1px,
La esquina inferior derecha con el borde con ese "triangulo".
y el boton naranja que se ve sobre el borde.

Saludos.
  #4 (permalink)  
Antiguo 05/10/2010, 06:42
Avatar de TEPO  
Fecha de Ingreso: febrero-2010
Mensajes: 235
Antigüedad: 7 años, 10 meses
Puntos: 23
Respuesta: (CSS) caja con borde e imagen

Opzina, en principio, te vuelvo a repetir, porque me parece que tenes un error de concepto, con CSS no podes realizar ese tipo de ilustraciones, lo que vos tenes que hacer es lo siguiente:

LA IMAGEN QUE VOS QUERES REALIZAR MIDE 246 X182 PX Y ES UN JPG, POR ENDE LO QUE TENES QUE HACER CON CSS ES INCRUSTAR O ADJUNTAR ESTA IMAGEN A TU LIENZO O PAGINA O BODY, OK? LO QUE NO PODES HACER ES REALIZAR LA IMAGEN CON CSS, ESPERO QUE ESO HAYA QUEDADO CLARO.

TEPASO EL CODIGO PARA HACERLO:
(SUPONIENDO QUE TU IMAGEN SE LLAMA CAJA.JPG Y ESTA ALOJADA EN UNA CARPETA LLAMADA IMAGENES)

1-EN HTML, GENERAS EL DIV DONDE VOS QUIERAS PONER LA IMAGEN
<div id="imagen"></div>

2-EN CSS COLOCAS LA IMAGEN
#imagen{
width:246px;
height:182px;
background-image: url(imagenes/caja.jpg);
background-repeat:no-repeat;
background-position:center;
}

hay otras maneras de hacerlo, te paso el codigo que se me ocurre ahora, tambies podes pones la imagen en el html con un tag img, o en lugar de usar en css background-image, usar background: eso depende de como te quede mas comodo, ahora si no entendes nada de lo acabo de escribir, bueno, tenes que empezar de cero con css y html.
Espero haberte ayudado. Saludos.-
  #5 (permalink)  
Antiguo 05/10/2010, 06:55
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: (CSS) caja con borde e imagen

YA SE QUE NO PUEDO HACER UNA IMAGEN CON CSS.

YA SE COMO SE ADJUNTA UNA IMAGEN CON CSS.

YO quiero interpretar esa imagen y pasarla a CSS.

ES DECIR:

border: solid 1px #000;
Imagen: en el borde inferior derecho (para poner ese triangulito donde se lo ve)
Boton: sobre el borde inferior (para poder hacer click e ir a otra seccion)
position:
margin:
padding:
etc etc etc etc etc etc

ENTENDESS?????
  #6 (permalink)  
Antiguo 05/10/2010, 06:57
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: (CSS) caja con borde e imagen

LO que vos me queres hacer entender es que la imagen que te mostre la ponga como fondo y "arriba" le ponga el contenido.

Pero eso yo no lo quiero, quiero hacerlo todo con CSS.

Viste, que se pueden hacer bordes redondeados con imagenes. Bueno quiero tener 3 bordes rectos y uno con ese triangulito.
  #7 (permalink)  
Antiguo 05/10/2010, 06:59
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: (CSS) caja con borde e imagen

A demas segun tu codigo; como hago para hacer click en el boton y me lleve a la otra seccion???, si pusite la imagen como fondo..
  #8 (permalink)  
Antiguo 05/10/2010, 08:44
Avatar de TEPO  
Fecha de Ingreso: febrero-2010
Mensajes: 235
Antigüedad: 7 años, 10 meses
Puntos: 23
Respuesta: (CSS) caja con borde e imagen

bueno, no te enojes, nuncas dijiste que eso era un boton, igual sigo sin entenderte, debe ser porque no se hacer lo que necesitas, y ahora hasta a mi intriga, asi que si algun otro forero lo lee, nos puede dar la solucion a ambos.
Saludos.-

pd: podes hacer bordes redondeados, pero no podes hacer "bordes triangulito", insisto, el jpg de fondo y le vas agregando mas divs con el boton, el contenido, etc.- creo.
  #9 (permalink)  
Antiguo 05/10/2010, 09:07
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: (CSS) caja con borde e imagen

No me enoje jeje, resalte para que podamos entendernos.

Lo que voy a hacer es el borde con el triangulito como imagen de fondo y el boton lo posiciono.

Cuando lo tenga hecho lo posteo.

Gracias.

Saludos.
  #10 (permalink)  
Antiguo 05/10/2010, 09:25
Avatar de TEPO  
Fecha de Ingreso: febrero-2010
Mensajes: 235
Antigüedad: 7 años, 10 meses
Puntos: 23
Respuesta: (CSS) caja con borde e imagen

Exactamente eso es lo que tenes que hacer, al menos, eso es lo que yo haria.
Saludos.-
  #11 (permalink)  
Antiguo 05/10/2010, 11:26
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: (CSS) caja con borde e imagen

no pude ver la imagen, me dio error no xq yo les hubiera podido ayudar... lastima
  #12 (permalink)  
Antiguo 05/10/2010, 13:31
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: (CSS) caja con borde e imagen

Cita:
Iniciado por BloodShadow Ver Mensaje
no pude ver la imagen, me dio error no xq yo les hubiera podido ayudar... lastima
El link funciona.

Saludos
  #13 (permalink)  
Antiguo 05/10/2010, 15:14
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: (CSS) caja con borde e imagen

Ok hermano ya lo tengo listo... lo hice a la carrera pero espero que te sirva...

CSS:
Código CSS:
Ver original
  1. .cuadro         { position: relative; width: 222px; min-height: 146px; _height: 146px; border: 1px solid #e9e9e9; }
  2.                 .esquina    { position: absolute; bottom: -2px; right: -4px; width: 18px; height: 17px; background: url(esquina.jpg) no-repeat 0px 0px; }
  3.                 .bottom     { position: absolute; bottom: -12px; left: 15px; width: 99px; height: 22px; background: url(boton.jpg) no-repeat 0px 0px; }

HTML
Código HTML:
Ver original
  1. <div class="cuadro">
  2.        
  3.        <div class="esquina"></div>
  4.            
  5.     <div class="bottom"></div>
  6.            
  7. </div>

IMAGENES:

esquina.jpg


boton.jpg
  #14 (permalink)  
Antiguo 05/10/2010, 20:43
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: (CSS) caja con borde e imagen

Gracias blood...

En cuanto pueda lo miro y comento.

Saludos.
  #15 (permalink)  
Antiguo 06/10/2010, 10:18
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: (CSS) caja con borde e imagen

Hay un problema con .bottom

1. no aparece la imagen con el backgroud desde el css.

2. Al poner el enlace desde HTML aparece la imagen pero no la posiciona, modifique los valores pero no hubo cambios.

Saludos
  #16 (permalink)  
Antiguo 06/10/2010, 10:59
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: (CSS) caja con borde e imagen

Wn primer lugar no vas a poder ese borde de esa manera pq? pq quieres usar border y el border va FUERA de la caja, por lo tanto tu fondo no funcionará a menos que uses una imagen posicionada absolutamente lo cual sería una chapucería pero te resolvería el tema, en cuanto al botón, solo es cosa de posicionarlo con márgenes negativos.

Otra cosa, aprende a pedir ayuda.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #17 (permalink)  
Antiguo 06/10/2010, 12:03
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: (CSS) caja con borde e imagen

Gracias,


Voy a ver si puedo solucionarlo pero hasta ahora no pude dar con el problema.

Saludos.
  #18 (permalink)  
Antiguo 06/10/2010, 12:06
 
Fecha de Ingreso: marzo-2010
Mensajes: 21
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: (CSS) caja con borde e imagen

Yo te recomiendo que hagas la imagen con photoshop con las medidas que quieras y la pongas de background, yo trabajo mucho de esta forma, y funciona al 100%
  #19 (permalink)  
Antiguo 06/10/2010, 12:10
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: (CSS) caja con borde e imagen

si en realidad como el contenido de esta caja no va a crecer, con el background funcionaria muy bien. Pero me gustaria saber como hacelo en css.
  #20 (permalink)  
Antiguo 06/10/2010, 12:17
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: (CSS) caja con borde e imagen

como hacerlo funcionar? fácil:

Pon los borders y has tu imagen del borde alzado, luego coloca absolutamente tu imagen ¿Como?

#imagen {
position:absolute;
right:0;
bottom:0;
}

asumamos que tu botón está justo debajo y que quieres ponerla a 20px de la izquierda y metido 10px en tu caja anterior:

#boton{
position:relative;
z-index:100;
left:0;
top:0;
margin-left:20px;
margin-top:-10px;
}

y para eso tu caja debe tener:

#caja{
position:relative;
z-index:20;
}

Con eso te debe ser suficiente.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #21 (permalink)  
Antiguo 06/10/2010, 12:39
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: (CSS) caja con borde e imagen

Cita:
Iniciado por opzina Ver Mensaje
Hay un problema con .bottom

1. no aparece la imagen con el backgroud desde el css.

2. Al poner el enlace desde HTML aparece la imagen pero no la posiciona, modifique los valores pero no hubo cambios.

Saludos
1. Revisa la url de la image, el ejemplo que te di, estan las imagenes al lado del css y del html

2. te lo di funcional al 100% no tendrias que tener problema mas que de solo copiar y pegar.

Dalvenjha te explico como hacerlo y lo que yo justamente te di solo que yo me tome el tiempo de hacertelo completo... te tiene que funcionar
  #22 (permalink)  
Antiguo 06/10/2010, 13:36
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: (CSS) caja con borde e imagen

Las rutas las cambie a mi estructura de directorios.

Quizas tengo clases repetidas afectan el buen funcionamiento.

En cuanto tenga un tiempito vuelvo sobre esto y comento.

Muchas Gracias.
  #23 (permalink)  
Antiguo 10/10/2010, 22:31
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: (CSS) caja con borde e imagen

He estado con esto y no logro poner el boton.jpg sobre el borde de la caja.

He intentado con margenes, bottom, top, etc. positivos y negativos, y tampoco.

El boton.jpg esta ubicado en el borde inferior izquierda bien en la esquina, pero no se monta sobre el borde.
  #24 (permalink)  
Antiguo 11/10/2010, 09:51
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: (CSS) caja con borde e imagen

mmmm tenes q usar valores negativos en el bottom... yo ya te di el codigo hecho papa si no lo pudiste ni copiar y pegar estas muy mal :S
  #25 (permalink)  
Antiguo 14/10/2010, 12:29
 
Fecha de Ingreso: octubre-2010
Mensajes: 1
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: (CSS) caja con borde e imagen

Que onda!
Ojala no sea demasiado tarde para contestar tu pregunta, la imagen que pones de ejemplo no se ve, pero si entendi bien lo que quieres hacer: es un como tipo globo de texto que tenga una pico que apunte a cierta cosa, parecida a la que usan en los comics para indicar el dialogo de un personaje. Ademas con un botón, la verdad lo del boton ni lo intente hacer por que yo necesitaba algo parecido para señalar un campo vacio de un formulario. Y lo queria hacer usando CSS nada mas, de hecho por eso llegue aquí. Lo que hice fue lo siguiente:

EN LA HOJA DE ESTILO
Código:
.alert-der{/*globo de alert que flote a la derecha*/
  background-color:none;
  float:left;
  position:relative;
  z.index:2;
}

.esquina{
  width:0; 
  height:0;
  float:left;
  border-left: 0; 
  border-right: 10px solid white;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  margin-top:5px;
}

.cuadrado{
  background:none;
  float:left;
  width:120px;
  height:30px;
  border:white solid 1px;
  -moz-border-radius:5px; /* Firefox */
  -webkit-border-radius:5px; /* Safari, Chrome */
  border-radius:5px; /* CSS3 */
}
EN TU PAGINA HTML
Código HTML:
<div class="alert-der">
  <div class="esquina"></div>
  <div class="cuadrado">Msj...</div><!--Aqui puedes meter el boton-->
</div><!--div alert-derecha--> 
Hice tres estilos:
1° para hacer la esquina de la caja de texto en esta pagina explica como funciona ese estilo, de ahi me base
http://www.filamentgroup.com/lab/image_free_css_tooltip_pointers_a_use_for_polygona l_css/

2° para hacer el cuadro de texto con esquinas redondeadas, aqui explican como funciona eso:
http://www.css3.info/preview/rounded-border/
Lo probe y funciona en todos los navegadores (Firefox, safari, opera, chrome) excepto en IE, lo inetete usando border-radius.htc pero no me quedo. Si quieres intentarlo tu aqui explican como:
http://dimox.net/cross-browser-border-radius-rounded-corners/

3° un estilo que hace que floten a la derecha de las cosas

Ojala te sirva a ti o quien sea suerte!!

PD. En mi busqueda encontre estos tooltips para hacer algo similar http://www.1stwebdesigner.com/resources/stylish-jquery-tooltip-plugins-webdesign/

Última edición por davinho; 14/10/2010 a las 12:38

Etiquetas: caja, 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 1 personas




La zona horaria es GMT -6. Ahora son las 23:53.