12 trucos de CSS avanzado

La propiedad scale y cómo sacarle todo el jugo con CSS

¡Prueba gratis durante 10 días

nuestros 1142 cursos !

Prueba gratis Mostrar modalidades de suscripción
Si quieres meter efectos en los que la sensación de zoom sobre un elemento es lo que buscas, con este vídeo vas a ver realizados tus deseos. Vamos a aprender a utilizar la propiedad scale para sacar el máximo partido a nuestros efectos de zoom en la web.

Transcripción

Si quieres meter efectos en los que la sensación de zoom sobre un elemento es lo que buscas, este es tu curso. Vamos a aprender a utilizar la propiedad 'scale', para sacar el máximo partido a nuestros efectos de zoom en la web. Tenemos este diseño y lo que queremos es hacer que cuando yo haga 'hover' sobre mi botón, se amplíe, tenga ese efecto de zoom. ¿Cómo lo podemos hacer? Nos vamos a nuestro CSS, le decimos que cuando hacemos 'hover' sobre el botón, me aplique la propiedad 'scale' del 'transform'. Tiene dos valores: el del eje X y el del eje Y. Estos valores son numéricos, pero también acepta decimales, es decir, podríamos poner 1 ó 1,5 Si yo hago esto, lo salvo y me voy a mi navegador, actualizo, si yo pongo el ratón encima, ¿veis que apenas aparece? Es porque le estoy especificando 0 en uno de los valores. Si este lo modifico y lo pongo a 1, que sería el tamaño base –es decir, él empieza a contar desde el 1,1– y actualizo, ahí tenéis. Es decir, que cuando utilizamos la propiedad 'scale', tenemos que ser conscientes que su cifra base sería 1,1. A partir de ahí, tanto los números de más que añadamos –¿veis?– como los decimales de más que añadamos serán susceptibles de cambiar nuestro botón. Si quisiéramos además hacer que nuestro botón tuviera una transformación suave, añadiríamos el 'transition', y ahí tenemos nuestro botón con zoom. De la misma manera, también acepta valores negativos. En este caso, como hemos dicho, como parte del 1, si pongo menos de uno, lo que hará será hacerlo más pequeño y tenemos ese efectillo tan chulo de zoom sobre un botón.

12 trucos de CSS avanzado

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.