(CSS) caja con borde e imagen

[opzina]

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.

[TEPO]

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.-

[opzina]

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.

[TEPO]

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.-

[opzina]

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?????

[opzina]

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.

[opzina]

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..

[TEPO]

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.

[opzina]

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.

[TEPO]

Exactamente eso es lo que tenes que hacer, al menos, eso es lo que yo haria.
Saludos.-

[BloodShadow]

no pude ver la imagen, me dio error no xq yo les hubiera podido ayudar... lastima

[opzina]

Iniciado por BloodShadow

no pude ver la imagen, me dio error no xq yo les hubiera podido ayudar... lastima

El link funciona.

Saludos

[BloodShadow]

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

CSS:

Código CSS:

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

HTML

Código HTML:

<div class="cuadro">
        
       <div class="esquina"></div>
            
    <div class="bottom"></div>
            
</div>
 

IMAGENES:

esquina.jpg


boton.jpg

[opzina]

Gracias blood...

En cuanto pueda lo miro y comento.

Saludos.

[opzina]

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

[Dalvenjha]

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.

[opzina]

Gracias,


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

Saludos.

[mejork1capuleto]

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%

[opzina]

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.

[Dalvenjha]

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.

[BloodShadow]

Iniciado por opzina

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

[opzina]

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.

[opzina]

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.

[BloodShadow]

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

[davinho]

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/