Estudiando y experimentando con los estilos CSS3, me ha salido este cuadro en movimiento, en el que he utilizado un codigo muy cortito. Como veis, se trata de un sencillo diseño pero atrayente y decorativo. Con las propiedades de animacion, tales como transform: rotate y transform: translate, se consigue este efecto balanceo tan bueno. Se puede utilizar, por ejemplo para poner la imagen que queramos para anunciar algo, mostrar una foto en especial o como decoracion del blog. Ademas, si quereis añadir un texto, tambien lo podeis poner, como veis en este ejemplo.
Redeando Art
Si deseas poner este elemento en tu blog o web, tan solo copia este codigo y pegalo donde tu quieras. Agrega url de la imagen que quieras mostrar y tambien el texto en cuestion. No te preocupes por el tamaño de la imagen, porque esta se redimensionara automaticamente en el cuadro.
ver/ocultar codigo
<textocuadro><cuadro>ESCRIBE AQUI EL TEXTO</cuadro></textocuadro>
<style>
cuadro {
background: #B45F04 url( URL DE LA IMAGEN );
background-size: cover;
font-size: 40px;<!-- tamaño del texto -->
font-family: Century Gothic;
width: 350px;height: 130px;
padding: 80px 0px;
text-align: center;
border-radius: 5px;
box-shadow:
0px 1px 3px rgba(0,0,0,0.2),
0 0 1px 5px #FFF inset;
text-shadow:
1px 1px 0 #FFF,
-1px -1px 0 #FFF,
1px -1px 0 #FFF,
-1px 1px 0 #FFF;
position: absolute;top:0px;
border: 10px solid #B45F04; <!-- color del marco -->
transform: translate(-100px,-20px) rotate(-45deg);
}
textocuadro {
color:#7401DF; <!-- color del texto -->
margin: 0 auto; display: block;
position: relative;
width: 85px;
height: 85px;
background: transparent;
border-radius: 3px;
border: 1px solid black;
animation: infinite swing 3s ease-in-out;
transform-origin: 0 0;
}
@keyframes swing {
0%{ transform: rotate(35deg); }
50%{ transform: rotate(55deg); }
100%{ transform: rotate(35deg); }
}
</style>
