Proyecto Francisco José Terceño Vélez

1.- Transiciones

En CSS3 se introduce uno de los aspectos más interesantes en la web interactiva: las transiciones. En versiones anteriores de CSS sólo se podían utilizar ciertas funcionalidades interactivas con pseudoclases como :hover o :focus. Sin embargo, dichas transiciones ocurrían de golpe, pasando de un estado a otro. Ahora, con las transiciones, tenemos a nuestra disposición una gran flexibilidad que nos permitirá dotar de atractivos y elegantes efectos de transición que multiplicarán por mil las posibilidades de nuestros diseños.

Sintaxis de las Transiciones

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.

transition-duration

Especifica la duración en la que sucederán las transiciones. Puedes especificar una única duración que se aplique a todas las propiedades durante la transición o valores múltiples que permitan a cada propiedad de transición un período de tiempo diferente.

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.

EJEMPLO

PASA EL RATÓN POR ENCIMA

2.- Animaciones

Las animaciones CSS3 permiten animar la transición entre un estilo CSS y otro. Las animaciones constan de dos componentes: un estilo que describe la animación CSS y un conjunto de fotogramas que indican su estado inicial y final, así como posibles puntos intermedios en la misma.

Sintaxis de las Animaciones

animation-delay

Tiempo de retardo entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación.

animation-direction

Indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.

animation-duration

Indica la cantidad de tiempo que la animación consume en completar su ciclo (duración).

animation-iteration-count

El número de veces que se repite. Podemos indicar infinite para repetir la animación indefinidamente.

animation-name

Especifica el nombre de la regla @keyframes que describe los fotogramas de la animación.

animation-play-state

Permite pausar y reanudar la secuencia de la animación

animation-timing-function

Indica el ritmo de la animación, es decir, como se muestran los fotogramas de la animación, estableciendo curvas de aceleración.

animation-fill-mode

Especifica qué valores tendrán las propiedades después de finalizar la animación (los de antes de ejecutarla, los del último fotograma de la animación o ambos).

EJEMPLO

EJEMPLO DE ANIMACIÓN

3.- "Flexbox" o Cajas Flexibles

Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.

Sintaxis de las Flexbox

flex-direction

La propiedad flex-direction establece el eje principal.

justify-content

La propiedad justify-content define cómo los elementos flexibles se disponen a lo largo del eje principal en la línea en curso.

align-items

La propiedad align-items define cómo los elementos flexibles se disponen a lo largo del eje secundario de la línea en curso.

align-self

La propiedad align-self define cómo cada elemento flexible se alinea respecto al eje secundario, y sustituye al valor por defecto establecido por align-items.

ESTE CONTENEDOR ESTA CAPACITADO COMO FLEX

4.- Grid

CSS Grid layout contiente funciones de diseño dirigidas a los desarrolladores de aplicaciones web. El CSS grid se puede utilizar para lograr muchos diseños diferentes. Destaca por dividir una página en regiones principales, o definir la relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML.

Sintaxis de los Grid

grid-template-columns

La propiedad CSS grid-template-columns define el nombre de las líneas y las funciones de tamaño de línea de grid columns.

grid-gap

La propiedad CSS grid-gap es una propiedad abreviada shorthand para grid-row-gap y grid-column-gap que especifica los canales entre las filas y las columnas de la cuadrícula.

grid-auto-rows

La propiedad CSS grid-auto-rows espeficica el tamaño automatico de las filas.

grid-row

La propiedad CSS grid-row especifica en el contenedor usado el numero de fila que ocupa

grid-column

La propiedad CSS grid-colum espeficica en el contenedor usado el numero de columna que ocupa

One
Two
Three
Four
Five
Six