Creando interfaces de usuario animadas y adaptables
Danae Aguilar Guzmán MCT, MS, MCTS, MCP
Contenido del Módulo
Animando objetos con transiciones CSS
Aplicando transformaciones 3-D y 2-D
Animaciones con keyFrames
Trabajando con formularios
Animando objetos con transiciones CSS
Nos permiten agregar efectos cuando cambiamos de un estilo a otro, usando solo CSS3
1. Especificar la propiedad CSS a la que queremos agregar el efecto
2. Especificar la duración del efecto.
Animando objetos con transiciones CSS
Transiciones:
div { width: 100px; height: 100px; background: red; transition: width 2s; -webkit-transition: width 2s; /* Safari */ } div:hover { width: 500px; }
Animando objetos con transiciones CSS
Transiciones múltiples:
Las agregamos separadas por comas.
div { width: 100px; height: 100px; background: blue; transition: width 2s, height 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; } div:hover { width: 200px; height: 200px; transform: rotate(180deg); -webkit-transform: rotate(180deg); /* Safari */ }
Animando objetos con transiciones CSS
Propiedades de transición:
transition
transition-property
transition-duration
transition-timing-function
transition-delay
div { transition: width 1s linear 2s; /* Safari */ -webkit-transition: width 1s linear 2s; }
Animando objetos con transiciones CSS
Propiedades de transición
div { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Safari */ -webkit-transition-property: width; -webkit-transition-duration: 1s; -webkit-transition-timing-function: linear; -webkit-transition-delay: 2s; }
Aplicando transformaciones 3-D y 2-D
Transformaciones 2D.
Permiten cambiar la forma, tamaño y posición.
Chrome y Safari requieren el prefijo -webkit-
translate()
rotate()
scale()
skew()
matrix()
Aplicando transformaciones 3-D y 2-D
Transformaciones 2D.
transform: translate(50px,100px);
transform: rotate(30deg);
transform: scale(2,4);
transform: skew(30deg,20deg);
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
div { transform: rotate(30deg); -webkit-transform: rotate(30deg); }
Aplicando transformaciones 3-D y 2-D
Transformaciones 3D.
• rotateX()
• rotateY()
div { transform: rotateX(120deg); -webkit-transform: rotateX(120deg); }
Animaciones CSS3
CSS3 @keyframes
Definiendo:
@keyframes miAnimacion { from {background: red;} to {background: yellow;} } /* Safari y Chrome */ @-webkit-keyframes miAnimacion { from {background: red;} to {background: yellow;} }
Animaciones CSS3
CSS3 @keyframes
Aplicando:
.animar { animation: miAnimacion 5s; -webkit-animation: miAnimacion 5s; }
Animaciones CSS3
CSS3 @keyframes
Aplicando por partes:
@keyframes miAnimacion { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} }
Ajustando el UI basado en media queries
Media queries
Permiten adaptar el UI para diferentes tamaños
Especifican media types y alguna condición:
Tipo screen, y debe ser a color
@media (max-width: 480px) { ... }
<link rel="stylesheet" media="screen and (color)" href="ejemplo.css" />
Ajustando el UI basado en media queries
Media queries
Media all puede obviarse. Estos dos son iguales:
Se puede especificar la orientación de la página:
@media all and (min-width:500px) { … } @media (min-width:500px) { … }
@media (orientation: portrait) { … } @media all and (orientation: portrait) { … }
Ajustando el UI basado en media queries
Media queries
Se puede especificar varios separándolos por comas:
Si la lista es vacia, se evalua a true:
@media screen and (color), projection and (color) { … }
@media all { … } @media { … }
Ajustando el UI basado en media queries
Media queries
(device-width: 800px)
Se aplicará cuando el ancho sea exactamente 800px
(device-height: 600px)
Se aplicará cuando el alto sea exactamente 600px
Ajustando el UI basado en media queries
Orientacion
(orientation:portrait)
(orientation:landscape)
Aspect ratio @media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 32/18) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }
@media screen and (device-aspect-ratio: 2560/1440) { … }
Aplican a dispositivos de 1280 por 720 pixeles.
Trabajando con formularios
autocomplete
<form autocomplete="on"> Nombre<input type="text" name="fname"><br> Apellido: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form>
Trabajando con formularios
novalidate
autofocus
<form novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form>
Nombre:<input type="text" name="nombre" autofocus>
Trabajando con formularios
form
Permite tener un input fuera del form
<form id="form1"> E-mail: <input type="email" name="user_email"> <input type="submit"> Nombre:<input type="text" name="nombre"> </form> Apellido: <input type="text" name="lname" form="form1">
Trabajando con formularios
formaction
Permite diferentes actions para los botones submit
<form action="pagina1.aspx"> Nombre: <input type="text" name="fname"><br> Apellido: <input type="text" name="lname"><br> <input type="submit" value="enviar"><br> <input type="submit" formaction="pagina2.aspx" value="enviar 2"> </form>
Trabajando con formularios
formnovalidate
Imagen con height y width
Usar una imágen como boton de submit
<input type="submit" formnovalidate value="Enviar sin validar">
<input type="image" src="img_submit.gif" alt="Enviar" width="48" height="48">
Trabajando con formularios
list
<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
Trabajando con formularios
multiple
pattern
<form > Seleccione varias imágenes: <input type="file" name="img" multiple> <input type="submit"> </form>
Código: <input type="text" name="codido" pattern="[A-Za-z]{3}" title="Codigo de tres letras">
Trabajando con formularios
placeholder
required
Nombre: <input type="text" name="fname" placeholder="Nombre">
Nombre de Usuario: <input type="text" name="usrname" required>