Programador
Web Inicial Front- End
Developer
CSS y maquetado avanzado
CSS (parte 3)
Presentación
En esta unidad vemos las propiedades de CSS más avanzadas que nos ayudarán en la
maquetación del sitio.
Objetivos
Que los participantes logren…
● Conocer más propiedades de CSS.
● Entender y utilizar las distintas transformaciones.
● Conocer para qué sirven las media queries.
Bloques temáticos
1. Transformaciones.
2. Transiciones.
3. Media queries.
1. Transformaciones
La propiedad CSS transform permite manipular el sistema de coordenadas de un
elemento usando las funciones de transformación.
rotate
La función CSS rotate() define una transformación que gira un elemento alrededor de
un punto fijo en un plano 2D sin deformarlo.
El punto fijo alrededor del cual gira el elemento, mencionado anteriormente, también
se conoce como el origen de transformación. Se establece de manera
predeterminada en el centro del elemento.
transform: rotate(deg);
scale
La función CSS scale() define una transformación que modifica el tamaño de un
elemento en el plano 2D. Debido a que la cantidad de escalado está definida por un
vector, puede cambiar el tamaño de las dimensiones horizontal y vertical a diferentes
escalas.
scale(sx) scale(sx, sy)
translate
La función de CSS translate() recoloca un elemento en el eje horizontal y/o vertical.
transform: translate(tx, ty);
2. Transiciones
Las transiciones CSS son pequeños cambios en propiedades de la hoja de estilos
desencadenados por acontecimientos generados por interacciones del usuario, como
por ejemplo cuando el mouse pasa por encima de algo (:hover) el cambio se ve tosco.
En una transición, estos cambios en las propiedades se producen de manera
progresiva durante un intervalo de tiempo.
Estructura
Transition: [property] [duration] [timing-function] [delay];
Transition: all 0.3s ease 0.5s;
transition-property: Especifica el nombre o nombres de las propiedades CSS a las que
deberían aplicarse las transiciones. Sólo las propiedades que se enumeran aquí son
animadas durante las transiciones; los cambios en el resto de las propiedades suceden
de manera instantánea como siempre. En caso que sean varias
propiedades se puede usar el valor all.
transition-duration: Especifica la duración en la que sucederán las transiciones.
transition-timing-function: Especifica la curva cúbica bézier que se usa para definir
cómo se computan los valores intermedios para las propiedades.
transition-delay: Define el tiempo de espera entre el momento en que se cambia una
propiedad y el inicio de la transición.
Algunas propiedades que pueden ser animadas: background-color,
background-image, background-position, background-size, border-color ,
border-radius, color, font-size, opacity y entre otras.
Propiedad transition-timing-function
Valor Descripción
linear La animación tiene la misma velocidad de principio a fin.
ease La animación tiene un comienzo lento, luego rápido, antes de que
termine lentamente.
ease-in La animación tiene un comienzo lento.
ease-out La animación tiene un final lento.
ease-in-out La animación tiene un comienzo lento y un final lento.
step-start Equivalente a pasos (1, inicio)
step-end Equivalente a pasos (1, fin)
steps(int,start Especifica una función paso a paso, con dos parámetros. El
| end) primer parámetro especifica el número de intervalos en la función.
Debe ser un número entero positivo (mayor que 0). El segundo
parámetro, que es opcional, es el valor "inicio" o "final", y
especifica el punto en el que se produce el cambio de valores
dentro del intervalo. Si se omite el segundo parámetro, se le
asigna el valor "fin"
cubic-bezier( Defina sus propios valores en la función cubic-bezier
n,n,n,n) Los valores posibles son valores numéricos de 0 a 1
3. Media queries
Media queries significa "consulta de medios" y son útiles cuando deseamos modificar el
aspecto de nuestra página basados en la resolución de la pantalla o el ancho del
viewport del navegador.
Imagen: [Link]
El resultado de la consulta es "verdadero" cuando el tipo de medio (si se especifica)
coincide con el dispositivo en el que se está mostrando el documento y todas las
expresiones en la media query son "verdaderas". En este caso, se aplican los estilos
correspondientes, siguiendo las reglas usuales de cascada.
Imagen: [Link]
Forma alternativa de definir nuestros media queries
Una forma no tan usada, pero muchas veces más beneficiosa para el usuario, de
definir nuestros media queries es usando el atributo media de la etiqueta link que
usamos para incluir nuestros estilos.
Mediante el uso de esta técnica y la correcta separación de las hojas de estilos
podemos reducir drásticamente la cantidad de datos que el usuario necesite descargar
para ver correctamente nuestro sitio.
¿En qué se diferencian min-width y max-width?
Las directivas min-width y max-width se usan para acotar las resoluciones en donde se
van a aplicar los estilos que definamos dentro de nuestra media query. Mientras
min-width especifica la resolución mínima desde la cual se aplican los estilos,
max-width define la resolución máxima dentro de la cual serán válidos los estilos.
¿Qué es Mobile First?
Es una forma de pensar nuestras hojas de estilo aplicando primero los estilos para
pantallas más chicas, que por lo general tienen las conexiones de datos más lentas y
se verán beneficiados por esta técnica.
Esto significa que debemos realizar algunos cambios en nuestro CSS.
En lugar de cambiar los estilos cuando el ancho es menor a 768px, deberíamos
cambiar el diseño cuando el ancho es mayor a 768px. Esto hará que nuestro diseño
sea Mobile First.
Bibliografía utilizada y sugerida
Libros y otros manuscritos:
Collell Puig, Jordi. CSS3-y-Javascript-Avanzado. Universidad Oberta de Catalunya.
Gauchat, Juan Diego. El gran libro de HTML5, CSS3 y Javascript. 1era Edición. 2012
Artículos de revista en formato electrónico:
Mozilla MDN Web Docs. Disponible desde la URL:
[Link]
w3schools. Disponible desde la URL:
[Link]
