Crea tu mismo tus cajas para texto, codigos,
ventanas iframe o aplicaciones.
simplemente son dos "etiquetas div".
Es algo muy facil , solo debes de imaginar
que forma le vas a dar.
Primero necesitas una imagen
la que vendra siendo el fondo de la caja.
Yo lo hare con esta . ..
sus medidas son: 450 pixeles de ancho y
340 pixeles de alto.
con estas medidas se crea la primera etiqueta div.
Entonces tenemos la imagen y las medidas esto quedara asi :
<div style="height: 340px; width: 450px; background-image: url(http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/i95b254dfa3bf5426/1354307322/orig/image.jpg); background-repeat: no-repeat; margin-right: auto; margin-left: auto;"></div>
Lo que tenemos es la altura 340px (height), la anchura 450px (width), la url de la imagen
de fondo (background-image), indicamos que la imagen de fondo no se repita (background-repeat),
y que los margenes de los lados,izquierda y derecha se ajusten automaticamente para
que queden al siempre al centro.
y el resultado hasta ahora es el siguiente:
A simple vista parece una sola imagen pero las imagenes se pueden guardar dando click
derecho con el mouse, las etiquetas div no!.
Por ultimo hacemos la otra etiqueta dentro de la que ya tenemos y listo.
Tiene que ser un poco mas chica, color blanco pero con trasparencia para que no se pierda la imagen de fondo y que las letras sean legibles.
y será asi:
<div style="width: 440px; height: 320px; background: rgba(255,255,255,0.5); margin-right: auto; margin-left: auto; overflow-y: scroll; margin-top: 10px;">
Aqui dentro ira tu contenido.
</div>
Quedara asi:
Y bueno Aqui esta el resultado .
Espero se aprendan y este sencillo dato.
cada uno puede crear el suyo a su estilo con la
imagen que quiera :D.
Aya abajo pueden comentar
y me pueden regalar un like a este post
o a cualquier otro que les guste.
Los articulos mas populares los colocare
en el sidebar.
Suerte amigos visitantes :D.
no se queden con dudas comenten!
Este es el codigo:
<div style=
"height: 340px; width: 450px; background-image: url(http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/i95b254dfa3bf5426/1354307322/orig/image.jpg); background-repeat: no-repeat; margin-right: auto; margin-left: auto;border: 1px solid #000000;">
<div style="width: 440px; height: 320px; background: rgba(255,255,255,0.5); margin-right: auto; margin-left: auto; overflow-y: scroll; margin-top: 10px;">
Aqui va tu contenido (texto)
</div>
</div>
( OJO! le agregue un borde de 1 px color negro a la primera etiqueta div sin eso no cuadra bien)