CSS avanzado: 12 trucos

La propiedad translate, su uso y su función dentro de CSS

¡Prueba gratis durante 10 días

nuestros 1203 cursos !

Prueba gratis Mostrar modalidades de suscripción
En este vídeo aprenderemos cómo usar la propiedad translate y cómo beneficiarnos de ella. Mediante translate añadiremos movimiento a nuestro proyecto web para dar una sensación más dinámica a nuestro contenido.

Transcripción

En este vídeo vamos a aprender a utilizar la propiedad 'translate'. Esta está dentro de la propiedad 'transform' y nos va a ayudar a poder realizar un pequeño desplazamiento del elemento HTML al que se lo estemos indicando y que dé una sensación de movimiento suave. Para ello, la propiedad 'translate' tiene la siguiente sintaxis: existen dos valores a aplicar: X e Y. Es decir, teniendo un eje de coordenadas, lo que serían la X y la Y. Si nos vamos a nuestro diseño, es esta web. Lo que vamos a hacer es utilizar nuestro 'translate' en esta web, para a medida que nosotros vayamos moviendo el ratón, se vayan moviendo elementos. Por ejemplo, que si yo hago 'hover' sobre mi cabecera, que el logotipo se mueva un poquito para arriba. Si hago 'hover' sobre las opciones de menú, que las opciones de menú se muevan un poquito también, para dar la sensación de que está vivo. Y así con algunos elementos más de nuestra web. Vamos a ello. Nos vamos a nuestro CSS Como os decía, lo que queremos es que cuando hagamos 'hover' sobre nuestro 'header', el logo se desplace. En este caso, lo que quiero es que se desplace un poco para arriba. Así que lo que haré será restarle 10 píxeles, o mejor dicho, tal como él lo entiende, que se mueva 10 píxeles en negativo. Si yo salvo esto y me voy a mi navegador, si os fijáis, cuando yo pongo el ratón encima de la cabecera, se mueve hacia arriba, pero queda como muy seco. Lo ideal sería que pudiéramos hacer ese efectillo siendo muy sutil. Así que añadiríamos un 'transition' en la imagen, para hacer ese efecto sutil. Vamos a ir con nuestras opciones de menú. Nos vamos al HTML. Queremos que nuestro enlace se desplace un poquito cuando ponemos el ratón encima. Así que nos vamos al CSS y le decimos que el enlace, queremos –desde la propiedad 'transform'– que se mueva, es decir, 'translate' –en el eje de las X es no, pero en el eje de las Y sí– que se mueva por ejemplo 5 píxeles cuando hacemos 'hover'. Es decir, cuando hacemos 'hover'. Salvamos, nos vamos a nuestro navegador, actualizamos. ¿Veis? Ahí tenemos el movimiento. Si quisiéramos que fuera mucho más suave, pues entonces aplicaríamos un 'transition', para especificarle que quiero que me realice esa propiedad durante tres milisegundos. Nos vamos aquí, salvamos y ahí veis como nuestro menú se mueve suavemente. Así es como se utiliza la propiedad 'translate'.

CSS avanzado: 12 trucos

Descubre con estos 12 ejemplos cómo abordar los diseños y plantearlos para construir estructuras estándares de HTML5 con efectos CSS3 útiles en nuestro día a día como maquetadores.

1:04 horas (15 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:6/09/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.