Caja animada con CSS
Que onda! Ya todos pudieron
notar el gran cambio de diseño en el blog, espero que sea de su agrado y
si no es así ya se irán acostumbrando; Para los que quieran consejos
sobre cómo agregar X o Y cosa con gusto les puedo ayudar.
Ya se han dado cuenta de que no he escrito en 6 días -Aunque he estado al pendiente diariamente- Pero lamentablemente así estará el blog unos días, escribire un poco menos ya que de éste sábado al próximo (16 de mayo) será mi exámen de admisión para la Universidad, y si se preguntan dónde y qué estudiaré... Será Administración de Empresas en la Universidad Veracruzana primeramente Dios.
No quisé seguir estudiando Informática debido al campo laboral. En la zona ya hay muchos Ingenieros en Sistemas Computacionales y salen más cada año gracias a nuestra prestigiosa Universidad del Tecnológico de Orizaba -Incluido mi hermano. Además una mayor parte de lo que sé sobre Diseño
Gráfico y Diseño Web lo he aprendido por mi mismo en la red... El resto se lo debo a mis grandiosos maestros y maestras del Colegio CONALEP 252 -Sin comentarios sobre la autopublicidad-jeje. Entonces después me podrán ver de empresario, quizás con mi propio centro de cómputo...
En fin, volviendo al tema... Muchos cambios en una sola noche ¿Cierto?, pues también habrá cosas nuevas sobre las que escriba, pues ahora escribiré también sobre DISEÑO GRÁFICO y DISEÑO WEB... para hacer este blog más útil para el mundo.
Y además... Nuevos concursos podrán encontrar muy pronto en Dockerblogs! y claro, no podrán faltar los grandes premios. Por eso suscríbete por correo electrónico para estar enterado de todo en nuestro blog -Sin comentarios sobre ésta otra autopublicidad ;)-
Por último para dar un pequeño adelanto, les déjo un código para insertar una caja animada usando estilo de CSS3 con transición cómo el que nos enseñan en webintenta.com, pueden ver el ejemplo aquí:
.caja1{
margin:10px;
border:1px solid #CCC; /* Ancho de borde y color de borde */
width:100px; /* Ancho de la caja sin pasar cursor */
height:100px; /* Alto de la caja sin pasar cursor */
background-color:#FF0000; /* Color de fondo sin pasar cursor */
/* Animación */
-webkit-transition: width 0.5s ease 0s, height 1s ease-out 0.5s, background-color 1s ease 1.5s;
-moz-transition: width 0.5s ease 0s, height 1s ease-out 0.5s, background-color 1s ease 1.5s;
-o-transition: width 0.5s ease 0s, height 1s ease-out 0.5s, background-color 1s ease 1.5s;
transition: width 0.5s ease 0s, height 1s ease-out 0.5s, background-color 1s ease 1.5s;
/* Fin de animación */
}
.caja1:hover{
width:400px; /* Ancho de la caja al pasar cursor */
height:200px; /* Alto de la caja al pasar cursor */
background-color:#95d2ea; /* Color de fondo al pasar el cursor */
}
Puedes configurarlo de la siguiente manera:
El borde -1px- puedes cambiarlo por el tamaño de píxeles que desees, además de que puedes cambiar el color del borde que por default se los déjo en -#CCC- pero le pueden poner cualquier color Hexadecimal que deseen.
Y el tamaño de la caja sin pasar el cursor, que por default muestra -100px- de ancho y -100px- de alto, pueden cambiarlo del modo que ustedes deseen, pero -Cuidado con ésto- si estos tamaños son mayores a los del tamaño del cuadro al pasar el cursor entonces el cuadro en vez de abrise, se cerrará.
Posteriormente tenemos el color de fondo del cuadro sin pasar el cursor que tenemos con -#FF0000- que igualmente puede ser el color Hexadecimal que ustedes deseen.
Y aquí se termina el diseño de la caja... Ahora personalizamos la caja solamente al pasar el cursor encima:
Por lo que tenemos el ancho (width) y el alto (height) de -400px- y -200px- respectivamente que pueden cambiar a su gusto, pero recuerden que deben ser tamaños mayores a los de la caja sin pasar el cursor.
Por último personalizamos el color de fondo que tenemos en -#95d2ea- por el color que deseen en Hexadecimal.
Recuerden que el código CSS va antes de la etiqueta . No es necesario Expandir Plantilla de Artilugios.
Y para usar el código inserten el contenido de la caja dentro de una etiqueta div agregandole class="caja1" en la etiqueta del mismo div.
Espero haberme logrado expresar, soy nuevo dando tutoriales, pero con el tiempo me expresaré cada vez más claro; De todos modos si tienen dudas escriban en un comentario y con gusto les ayudo.
Me late un buen pero no se en que ocuparlo. Buen tutorial
Ya encontraras en que amigo. Gracias por comentar :)