CSS avanzado: 12 trucos

La propiedad skew y todas sus variantes dentro de CSS

¡Prueba gratis durante 10 días

nuestros 1218 cursos !

Prueba gratis Mostrar modalidades de suscripción
Cuando queremos realizar figuras complejas en HTML, terminamos complicándonos la vida sin necesidad. Os mostraré cómo funciona skew y las ventajas que podemos sacar de esta propiedad para dar vida a nuestras páginas web.

Transcripción

En este vídeo vamos a aprender cómo se utiliza la subpropiedad 'skew'. Esta está dentro de la propiedad 'transform' y se utiliza para hacer que nuestros elementos se conviertan en figuras trapezoidales. El 'skew' admite distintas opciones. Tenemos, por un lado, el poder utilizar el 'skew' de forma corta así, que funcionaría tanto en eje X como en eje Y. También tenemos el 'skew' X, que solo afectaría a la X o el 'skew' Y, que solo afectaría a la Y. Vamos a ver cómo utilizarlo de normal. Si nos vamos a la web... Imaginaos que lo que queremos es que cuando yo ponga el ratón encima, esto se convierta en una forma trapezoidal. Los valores que utiliza 'skew' son grados. Entonces, nos vamos a nuestro HTML y sería nuestra clase botón, cuando hacemos hover encima, le vamos a decir que nos lo transforme de modo trapezoidal. Que, por ejemplo, nos ponga 5 º. Si nos vamos al navegador después de salvar y actualizamos y ponemos el ratón encima, como podéis ver, se genera un trapecio. También admite valores negativos. Ahí tenéis. Y como son grados, podemos añadir los que queramos hasta 360. Imaginaos que queremos solamente modificar el eje de las X. Si salvamos, ahí tendríamos. O el eje de la Y. ¿Veis? Con lo cual, con el 'skew' lo que estamos consiguiendo es hacer que nuestra forma de HTML sea modificada –y es porque pierde el foco, ¿vale?– También una cosa importante a la hora de tener en cuenta cuando estamos utilizando el 'skew' –voy a colocar el normal y así no nos ponemos locos mientras os lo explico– es que si os fijáis, todo lo que está dentro de ese elemento HTML es susceptible de convertirse en un trapecio. Por lo que si tenemos texto o cosas por el estilo, pueden llegar a distorsionarse bastante. Hay que tener mucho cuidado con cómo utilizamos este efecto, pero la verdad que queda bastante decente y se pueden llegar a conseguir muchas cosas y efectos ópticos si sabemos cómo montárnoslo. Nuevamente, si lo que queremos es que el efecto tenga una sensación de suavidad, le diremos que lo hagan durante 3 milisegundos. Ahí esta, ¿lo veis? Pues esta es la propiedad 'skew'.

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.