Hack x Crack - Comunidad de Seguridad informática

Programación => Programación Web => Diseño web => Mensaje iniciado por: R3LI4NT en Septiembre 27, 2020, 06:48:25 am

Título: 4 Tipos de Transiciones [CSS]
Publicado por: R3LI4NT en Septiembre 27, 2020, 06:48:25 am
Buenas, aquí de nuevo R3LI4NT je!
Traigo cuatro transiciones para compartir con ustedes...

Por si les interesa el código HTML:
Código: Text
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4.         <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="transitions.css">
  6.     <title>Transiciones CSS</title>
  7. </head>
  8. <body>
  9.         <div class="caja1">CAJA<span class="a">1</span></div>
  10.         <div class="caja2">CAJA2</div>
  11.         <div class="caja3">CAJA<span class="b">3</span></div>
  12.         <div class="caja4">CAJA<span class="c">4</span></div>
  13. </body>
  14. </html>
  15.  

Transición #1
Al pasar el cursor por encima de la caja, cambiara de color.
Código CSS
Código: CSS
  1. body {
  2.         margin:0;
  3.         display:flex;
  4.         justify-content: center;
  5.         align-items: center;
  6.         min-height: 100vh;
  7. }
  8.  
  9. /* Al poner el mouse sobre él cambia de color */
  10. .caja1 {
  11.         width: 200px;
  12.         height: 200px;
  13.         background:#00FF04;
  14.         margin: 20px;
  15.         display: flex;
  16.         justify-content: center;
  17.         align-items: center;
  18.         font-size: 3rem;
  19.         color:#000;
  20.         font-family: Arial;
  21.         border:2px solid #138E00;
  22.         transition-property: background, color, border;
  23.     transition-duration: 1s; /* Duración de la transición (obligatorio) */
  24.     transition-delay: 20ms; /* cuanto tiempo para que empiece la transición */
  25. }
  26.  
  27. .a {
  28.         color: #fff;
  29.         padding-left: 3px;
  30. }
  31.  
  32. .caja1:hover {
  33.         background: #0070FF;
  34.         color: #fff;
  35.         border:2px solid #0800FF;
  36. }
  37.  

RESULTADO
(https://imagizer.imageshack.com/img924/3404/ZQ1G0I.png)
A la transición le agregue una duración, en la imagen no se ve.

Transición #2
Al pasar el cursor por encima del texto, cambiara de tamaño (ZOOM).
Código CSS
Código: CSS
  1. /* Texto ZOOM (font-size) */
  2. .caja2 {
  3.         width: 200px;
  4.         height: 200px;
  5.         margin: 20px;
  6.         font-family: Arial;
  7.         background:#00B7A9;
  8.         border:2px solid #005763;
  9.         color:#fff;
  10.         display: flex;
  11.         justify-content: center;
  12.     align-items: center;
  13.     -webkit-transition: font-size 1s ease;
  14.     transition: font-size 1s ease;
  15.     transition-duration: 1s, 1s;
  16. }
  17.  
  18. .caja2:hover {
  19.     font-size: 3rem;
  20.     color:#000;
  21. }
  22.  
No pongo el resultado porque sería incomodo tomar screenshot.

Transición #3
Al pasar el cursor por encima, agregara sombra a la caja.
Código CSS
Código: CSS
  1. /* Sombra a la caja */
  2. .caja3 {
  3.         width: 200px;
  4.         font-size: 3rem;
  5.         font-family: Arial;
  6.         margin: 20px;
  7.         height: 200px;
  8.         background:#FFD100;
  9.         border:2px solid #CEA900;
  10.         color:#000;
  11.         display: flex;
  12.         justify-content: center;
  13.     align-items: center;
  14.     -webkit-transition: 1s linear;
  15.     transition: 1s linear;
  16.     background-color: #F1C40F;
  17. }
  18. .caja3:hover {
  19.     -webkit-box-shadow: 11px 10px 13px 2px rgba(0,0,0,0.47);
  20.     box-shadow: 9px 9px 12px 2px rgba(0,0,0,0.47);
  21. }
  22. .b {
  23.         color: #fff;
  24.         padding-left: 3px;
  25. }
  26.  
RESULTADO
(https://imagizer.imageshack.com/img924/4765/SDezt2.png)

Transición #4
Añadir opacidad a la caja cuando pasemos el cursor por encima.
Código CSS
Código: CSS
  1. /* Implantar opacidad */
  2. .caja4 {
  3.         width: 200px;
  4.         font-size: 3rem;
  5.         font-family: Arial;
  6.         margin: 20px;
  7.         height: 200px;
  8.         background:#00B7A9;
  9.         border:2px solid #AC1203;
  10.         color:#000;
  11.         display: flex;
  12.         justify-content: center;
  13.     align-items: center;
  14.     -webkit-transition: 1s linear;
  15.     transition: 1s linear;
  16.     background-color: #FF3030;
  17. }
  18. .c {
  19.         color: #fff;
  20.         padding-left: 3px;
  21. }
  22. .caja4:hover {
  23.     opacity: 0.7;
  24. }
  25.  
RESULTADO
(https://imagizer.imageshack.com/img923/5426/a9JNae.png)
Espero les guste.
Saludos

#R3LI4NT

Título: Re:4 Tipos de Transiciones [CSS]
Publicado por: C4sp3n en Septiembre 27, 2020, 11:33:34 am
Muy buenas transiciones R3LI4NT. Muchas gracias por el aporte. Soy nuevo en este foro, bueno nuevo no, de vez en cuando entro a ojear jeje.
Pero es ahora cuando me decidí a registrarme para ingresar en esta comunidad. Un saludo y espero aportar pronto información interesante para todo el mundo.
Título: Re:4 Tipos de Transiciones [CSS]
Publicado por: R3LI4NT en Septiembre 27, 2020, 02:02:16 pm
Hola C4sp3n, bienvenido a la comunidad!
Me alegro que te haya gustado las transiciones, esperamos con ansias tus aportes.

Saludos