Bordes montados

Citar

Escrito el 09 Nov 2010 10:56 am

Buenas de nuevo:
Estoy intentando meter una imagen con un marco o con bordes, pero que no se unan por sus extremos sino que quede con la apariencia de una almohadilla (#) con angulos rectos, es decir q sus extremos no coincidan, ademas dandoles la longitud que yo kiera. ¿Como puedo hacer eso en CSS? si es q se puede. Gracias

Por CLAnonimo

Claber

600 de clabLevel

5 tutoriales
1 articulo

Envíale un mensaje privado Web

Este es un usuario anónimo genérico para las cuentas borradas o perdidas.

@cristalab

Citar

Escrito el 09 Nov 2010 05:14 pm

umm me dejaste pensando un buen rato... sinceramente no sabría cómo hacer eso, pero se pueden pensar en algunas soluciones a lo machete. Si las imágenes están destinadas a tener un alto y ancho fijo, puedes poner un background hecho con la forma que deseas y encerrar la imagen en un div contenedor, se le dan los respectivos paddings y se pone de fondo ese back. Si las imagenes no van a tener proporciones fijas.... ya veremos qué se nos ocurre

Por gosunkugi

Claber

251 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado Web

Kuri - frontend dev - XueZhongWen!

@gosunkugi

Citar

Escrito el 09 Nov 2010 06:42 pm

En principio tenia pensado poner la imagen q va dentro con dimensiones fijas (900px x 400px q creo q es apta para casi todas las pantallas) pero n estaria mal estudiar la opcion de adaptable.
Gracias

Por CLAnonimo

Claber

600 de clabLevel

5 tutoriales
1 articulo

Envíale un mensaje privado Web

Este es un usuario anónimo genérico para las cuentas borradas o perdidas.

@cristalab

Citar

Escrito el 09 Nov 2010 10:25 pm

Uhmm... algo así tal vez?:

Código HTML :

<!doctype html>
<html>
<head>
<style type="text/css">

</style>
</head>
<body>

<div style="position: relative; width: 200px; height: 200px;">
   <div style="position: absolute; width: 160px; height: 200px; top: 0px; left: 20px; border-left: 4px solid black; border-right: 4px solid black;">
   </div>
   <div style="position: absolute; width: 200px; height: 160px; top: 20px; left: 0px; border-top: 4px solid black; border-bottom: 4px solid black;">
   </div>
   <div style="position: absolute; width: 160px; height: 160px; top: 24px; left: 24px;">
      <img src="some_cool_image.jpg" width=160 height=160 />
   </div>
</div>
</body>
</html>

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 10 Nov 2010 11:57 am

La imagen de q es??

Por CLAnonimo

Claber

600 de clabLevel

5 tutoriales
1 articulo

Envíale un mensaje privado Web

Este es un usuario anónimo genérico para las cuentas borradas o perdidas.

@cristalab

Citar

Escrito el 10 Nov 2010 01:41 pm

Lo he hecho de la siguiente manera;
He creado una imagen en PNG con photoshop, con las 4 lineas realizadas con un pincel con ruido y textura de 3px de grosor. Luego en la web puse lo siguiente:
<table background="la imagen" width="900 height="500">
<tr>
<td>
lo que kiera que vyas a poner encima, en mi caso una animación flash
</td>
</tr>
</table>
Todo dentro del div que kieras. Y con esto he conseguido el efecto deseado, por lo menos en mi pc se ve bien, cuando termine vere cunato tarda en cargar esto en internet.
Gracias

Por CLAnonimo

Claber

600 de clabLevel

5 tutoriales
1 articulo

Envíale un mensaje privado Web

Este es un usuario anónimo genérico para las cuentas borradas o perdidas.

@cristalab

Citar

Escrito el 10 Nov 2010 08:14 pm

El problema con una imagen en background es que no se "estira" con el contenido (al menos no en CSS 2.1 y anteriores).

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 11 Nov 2010 04:33 pm

Ya, pero he decidido dejarla fija, con medidas de 900x500 px que creo q esta bien para cualquiertipo de pantalla. Tu q dices?

Por CLAnonimo

Claber

600 de clabLevel

5 tutoriales
1 articulo

Envíale un mensaje privado Web

Este es un usuario anónimo genérico para las cuentas borradas o perdidas.

@cristalab

Citar

Escrito el 11 Nov 2010 08:19 pm

Si esa solución sirve a tus propósitos, pues adelante

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 12 Nov 2010 01:38 am

DriverOp la solución que presentas usa muchos divs que semanticamente no tienen sentido

yo preferiría tomar un fondo con la forma de la # y dejarlo de fondo, y aplicar paddings para lograr que el fondo se vea. Si quedan dudas sobre este procedimiento nos comentas