martes, 21 de junio de 2011

Caja contenedora elegante

Publicado por Abraham en 6:22:00 p. m. ,
Lo que vamos hacer hoy es algo parecido al Blockquote. Pero este es más elegante y está hecho con css3.
Este truco lo he visto en el blog de Gema, Gema blog. Gracias a ella he aprendido mucho.

Ahora, vamos a poner un ejemplo y un código en la plantilla antes de  ]]></b:skin>, el siguiente código:



.bloque-color {

-webkit-border-radius: 31px;

-moz-border-radius: 31px;

border-radius: 31px;

-webkit-box-shadow: 4px 4px 6px #000000;

-moz-box-shadow: 4px 4px 6px #000000;

box-shadow: 4px 4px 6px #000000;

text-shadow: -1px -1px 0px #000000;

-webkit-transform: rotate(-17deg) scale(0.9) skew(-22deg,17deg);

-moz-transform: rotate(-17deg) scale(0.9) skew(-22deg,17deg);

-o-transform: rotate(-17deg) scale(0.9) skew(-22deg,17deg);

border: 1px solid #FFC0CB;

background: #696969;

padding: 9px;

opacity: 0.7;

font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;

font-size: 12pt;

color: #FFF5EE;

text-align: center;

width: 300px;

height: 150px;

}


Nosotros lo podemos usar de la siguiente manera:


  1. Lo podemos poner en un gadget html el código siguiente
  2. Y lo podemos poner en una entrada como en el blockquote.
Para ponerlo, y funcione, tenemos que poner el siguiente:



<div class="bloque-color">

Aquí añadimos el contenido, puede ser texto, una imagen 
.

</div>


Este es el ejemplo que no nosotros pusimos, lo anterior. Esto es muy bueno, también como el blockquote. Blogger
Vieron, así de fácil es. Para poner una imagen dentro de esta caja contenedora vean esta entrada. Bueno, también les invito a que visiten el blog de Gema, dónde explica mejor lo que he tratado en esta entrada

Back Top

2 comentarios:

  1. tienes una mierda de pagina y solo sabes copiar.
    hay más de 170 blogs en español de ayuda blogger, crees que vas a destacar copiando como haces?
    cierralo y harás un gran favor al mundo.

  2. Mira, nada de lo que yo hago aquí es copiado.

    Yo lo escribo, por lo menos trato eso, nada es copiado con excepción los códigos css pero los html no.

    Y si lo consigo de otro lugar le pongo una referencia de dónde fue que yo conseguí el truco.

    Y por favor no hables mal de mi.

    En una página donde habla de html y todo lo relacionado a este punto en concreto duré una semana leyendo, aprendiendo y poniendo en práctica, la mayoría de mis blogs, trucos no los hubiera aprendido yo solo.

    Si lees; en cada entrada hay una pequeña biografía de mi que explica algo sobre mi.

    Bueno, espero que cambies de opinión sobre eso...

    Att... El autor

Publicar un comentario

Por favor: cuando vallan a comentar tengan el perfil habilitado por si alguna pregunta, y si quieres que te responda de algo sobre tu blog, de algún problema que tengas, por favor deja el enlace de
tu blog.