Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

CSS3 - Transiciones - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 5 de abril de 2021 por Fernando M.

122 visualizaciones

Más información Transcripción

Descargar la transcripción

Hola chicos, hoy vamos a hacer un tutorial sobre las transiciones, ¿vale? 00:00:00
Es decir, esto va a explicar o va a demostrar o os va a enseñar cómo crear efectos de transición entre diferentes elementos, ¿vale? 00:00:06
Esto es especialmente útil, por ejemplo, para enlaces o para aquellos elementos en los que queréis poner que haya algún cambio en el estilo 00:00:15
una vez que hacéis clic sobre un... o que pasáis el ratón, ¿vale? sobre un elemento, ¿vale? 00:00:23
Entonces, nos vamos a ir a nuestro editor. 00:00:29
Yo ya me he creado un archivo que lo he llamado transiciones.html, ¿vale? 00:00:33
Y como veis, pues mantengo la estructura que fijo siempre, que es la altura del 100% 00:00:37
y un tipo de letra, en este caso yo tengo Arial, ¿vale? 00:00:44
Y un tamaño a 125, ¿vale? 00:00:47
Entonces, lo primero que vamos a hacer va a ser explicar cuáles son estas propiedades de transición, ¿vale? 00:00:49
O cómo gestionar las transiciones, ¿vale? 00:00:59
Porque realmente las transiciones tienen una única propiedad y simplemente lo que vamos a hacer es... 00:01:02
Bueno, tienen varias propiedades asociadas al efecto de transición, ¿vale? 00:01:09
Y lo que vamos a hacer primero es explicarla. 00:01:13
Y lo voy a explicar utilizando comentarios dentro de la parte de estilo, ¿vale? 00:01:15
Pues fijaros, pongo aquí transiciones y lo que vamos a definir o vamos a trabajar nosotros habitualmente con cuatro propiedades diferentes, ¿vale? 00:01:19
La primera propiedad, y la voy a poner así, ¿vale? Va a ser transition property, ¿vale? 00:01:29
Y esta propiedad puede tener tres valores principales. Ninguno, que sería el valor por defecto, es decir, no añadir ninguna transición. Todos o, cuando aquí pongo propiedad, estoy refiriéndome a qué le quiero hacer la propiedad, ¿vale? 00:01:37
pongo height, la única propiedad que sufrirá esa transición será la propiedad altura, 00:02:07
¿vale? Lo vamos a ver luego con un ejemplo. Luego vamos a tener otra propiedad que va 00:02:14
a ser transition duration, ¿vale? Que aquí se pone simplemente el tiempo que queremos 00:02:21
que dure esa transición. Luego vamos a tener transition delay, ¿vale? Que también se le 00:02:30
Añade el tiempo, pero el delay aquí será desde que, por ejemplo, si estamos utilizando el hover, que recuerdo que es para que aplique el efecto cuando pasamos el ratón por encima, ¿vale? 00:02:37
Si queremos, si pasamos el ratón, si nosotros ponemos un transition delay de dos segundos, pues cuando pasemos el ratón por encima pasarán dos segundos antes de que comience a hacer la transición, ¿vale? 00:02:47
Y por último, que es el más particular, transition timing function, ¿vale? 00:02:58
Y aquí podemos añadirle varios valores por defecto, ¿vale? Estos valores significan cómo se va a ejecutar esa transición, ¿vale? Es decir, si va a ser muy rápida al principio y lenta al final, si va a ser lineal, ¿vale? 00:03:05
Va a tener muchas propiedades. Yo las voy a poner aquí y luego vamos a ir viendo algunas de ellas, pero esto ya es cuestión de gustos que cada uno trabaje con la que más le guste, ¿vale? Tenemos Linear, tenemos Is, tenemos Is In, ¿vale? Esto, por ejemplo, sería rápido al principio y lento al final. Is Out sería rápido al final y lento al principio, ¿vale? Is In Out, Step Start, Step End, ¿vale? 00:03:23
Y luego tenemos también cubicVecier, ¿vale? 00:03:58
En la que se le pone dentro de los paréntesis, cubicVecier. 00:04:03
Se le pone aquí cuatro valores que representan cómo se hace esa variación, ¿vale? 00:04:09
Entonces vamos a verlo con un ejemplo. 00:04:13
Y para eso nos vamos a crear en la parte del cuerpo de nuestro HTML, nos vamos a crear un elemento div vacío, ¿vale? 00:04:16
No va a tener nada. 00:04:24
Y ahora nosotros aquí le vamos a dar propiedad a ese elemento dip. Lo vamos a convertir en una cajita, ¿vale? Con un color de fondo, background color, que va a ser en esa decimal 0080, ¿vale? 00:04:25
Es decir, si os dais cuenta, cuando pongo el ratón encima va a ser un tipo verde. Le vamos a dar una anchura de 200 píxeles y una altura también de 200 píxeles, ¿vale? 00:04:41
Ya estáis viendo aquí que me sale mi cuadradito verde, ¿vale? Perfecto. Y le vamos a poner también un margen de 90 píxeles por arriba y por abajo y de 0, y de auto, perdón, en los laterales para que no los centre, ¿vale? 00:04:54
Recuerdo que cuando poníamos auto en los márgenes laterales nos lo centraba automáticamente, ¿vale? 00:05:09
Y lo que voy a hacer es añadir aquí al mismo dip, pero con la pseudo propiedad, ¿vale? 00:05:16
Hover, ¿vale? 00:05:24
Que esto recuerdo que era para cuando pasamos el ratón por encima, ¿vale? 00:05:25
Y vamos a coger estas tres primeras propiedades, las vamos a copiar y las vamos a pegar, ¿vale? 00:05:30
Y simplemente las vamos a modificar. 00:05:37
En el caso del color, va a pasar a tener un color amarillo, ¿vale? En la anchura va a pasar a tener 500 píxeles y en la altura 300 píxeles, ¿vale? 00:05:39
Y aparte de eso, pues le vamos a poner un sombreado, ¿vale? Vamos a ponerle box shadow de 2 píxeles en el horizontal y vertical, 5 píxeles en el vertical, 00:05:52
5 píxeles de difuminación 00:06:03
Y le vamos a poner un color tipo gris 00:06:06
¿Vale? 00:06:09
Todo haces 00:06:10
Entonces fijaros 00:06:11
Si yo ahora paso el ratón por encima 00:06:13
Al pasar el ratón por encima 00:06:15
Se modifica nuestro elemento dip 00:06:18
Y pasa a ser amarillo, más grande 00:06:21
Con un sombreado 00:06:23
Pero esto lo hace muy rápido 00:06:24
¿Vale? 00:06:27
Pues yo quiero que haya una transición 00:06:27
Entre ese cuadradito rojo 00:06:29
Verde, perdón 00:06:31
Y este cuadrado amarillo, ¿vale? Entonces, para eso, me voy a venir aquí, en la clase hover, ¿vale? En la propiedad hover que he definido, y vamos a poner transition property, ¿vale? El primero que veíamos, ¿vale? 00:06:32
Entonces, vamos a imaginarnos que yo ahora mismo solo quiero que se modifique, que tenga un efecto de transición el elemento de la anchura, ¿vale? 00:06:50
Entonces pongo aquí width, ¿vale? Solo quiero que la anchura sea el que yo detecte esa transición. 00:06:58
Le voy a poner también, se me ha olvidado el punto y coma, le voy a poner también una duración de 1,5 segundos, ¿vale? 00:07:04
Le voy a poner un delay de un segundo, ¿vale? Y por último, le voy a poner una transition, lo que hablábamos antes, transition, timing function de easy, ¿vale? Es decir, rápido al principio y lento al final, ¿vale? 00:07:12
Entonces, fijaros lo que pasa ahora. Si yo pongo el ratón encima, como le he definido un delay de un segundo, va a pasar un segundo hasta que comience el efecto. ¿Vale? ¿Habéis visto? Es decir, todo el efecto que no tiene que ver con width, es decir, la sombra, la altura y el color, ocurre instantáneamente. 00:07:35
Pero en la anchura hay un efecto de transición donde se produce ese cambio, ¿vale? 00:07:56
Si yo quisiera que esa propiedad afectara a todo, aquí pondría All. 00:08:05
Al poner All, fijaros que yo ahora pongo el ratón encima y ese cambio se produce en completo de forma gradual, ¿vale? 00:08:10
¿Qué más, qué más, qué más? 00:08:21
Vale, si os dais cuenta, cuando quito el ratón, la transición se hace también de forma instantánea. 00:08:22
Si yo quiero que esa transición también sea, también tenga un efecto de transición, pues lo único que haría sería copiarme todo esto y me lo llevo al elemento div, ¿vale? 00:08:28
Y ahora fijaros que si yo pongo el ratón encima, se cambia de forma lenta al color amarillo con mayor anchura y altura, y si lo quito, también se cambia con un efecto de transición al siguiente elemento, ¿vale? 00:08:40
Pues por último, simplemente deciros que yo puedo todas estas cuatro propiedades definirlas en una sola, ¿vale? 00:08:55
La propiedad transition, ¿vale? 00:09:06
Y simplemente pues pondría que quiero que afecte en todos los elementos, que dure 1,5 segundos, que tenga el efecto easy in, o en este caso voy a poner easy out, ¿vale? 00:09:10
Y que tenga un delay de un segundo, ¿vale? 00:09:22
¿Vale? Entonces fijaros que ahora cuando yo pongo el ratón, ¿vale? Funciona exactamente igual, ¿vale? Simplemente que lo he resumido todo en una única línea, ¿vale? Pues muy bien, espero que os haya gustado y que lo veáis provechoso. Nos vemos en el siguiente vídeo. 00:09:24
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
122
Fecha:
5 de abril de 2021 - 17:22
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
09′ 50″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
32.42 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid