En esta web se explican los conceptos referentes a diversos recursos utilizados en css y su uso.
Los elementos a tratar son:
Una transición, como su propio nombre indica, es la propiedad que en CSS nos permite animar los cambios producidos en las propiedades CSS, en lugar de que esos cambios surtan de manera instantánea.
Un ejemplo de esto es el mostrado en el rectángulo de abajo al colocar el ratón sobre él.
.cw{
background-color: rgba(255, 0, 0, 0.705); --- Propiedad original
height: 250px;
color: rgba(255, 255, 255, 0); --- Segunda propiedad original
}
.cw:hover{
background-color: rgba(0, 0, 255, 0.712); --- Propiedad a cambiar, su valor es distinto del original
transition: background-color 2s, color 2s; --- Selecciona la propiedad a modificar y le asigna una duración.
color: white; --- Segunda propiedad a cambiar
}
Como podemos observar, la propiedad "transition" se utiliza en este caso para aplicar una transición tanto al
color de fondo como al color de la letra.
Para realizar la transición primero es necesario indicar la propiedad a cambiar y luego añadir la información necesaria para que nuestra transición
funcione adecuadamente. Estas propiedades son principalmente:
Con estas propiedades podemos hacer que nuestra transición se adapte a nuestras necesidades. También podemos agrupar todas esas propiedades como se indica en el ejemplo.
El objetivo de FlexBox es crear un modelo de caja o contenedor optimizado para los distintos dispositivos que usan los usuarios de una web. Aquí tenemos un ejemplo de su funcionamiento.
Uno
Dos
Tres
#fb{
display: flex;
justify-content: space-between;
}
Para utilizar la flexbox debemos saber su principal propiedad: "display". Con la primera indicaremos que las etiquetas indicadas utilizarán flexbox, escribiendo "display: flexbox" o "display: flexbox-inline" y observaremos como se recolocan las cajas y adquieren la capacidad de ajustarse a ancho de pantalla sin necesidad de lidiar con porcentajes.
Esto es especialmente útil cuando hay que diseñar una estructura formada por cajas que requiere de que al cambiar de tamaño se adapte al tamaño de la misma. Existen diversas opciones para modificar nuestra flexbox dependiendo de lo que deseemos:
Además de lo anteriormente comentado, es necesario indicar que las propiedades "float" y "clear" no tienen uso dentro de una flexbox, ni tampoco el "vertical-align", debido a las propiedades de la flexbox ya comentadas.
Si antes hemos visto lo que hacía la flexbox adaptando las cajas al tamaño de pantalla, ahora con grid veremos otra forma de realizar algo similar, salvo que guiándonos de una cuadrícula, en la que estableceremos las divisiones entre cajas, de manera que queden colocadas en forma de "tabla". Veamos el ejemplo. (Las líneas blancas están colocadas para poder saber
#gr{
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 65% 35%;
}
Lo primero que debemos de hacer para crear un grid es exactamente lo mismo que se utilizaba en flexboxes: "display", salvo que en este caso nuestro "display" utilizará "grid". Una vez hecho esto, procedemos a escoger las dimensiones de la plantilla, mediante el uso de "grid-template-columns" y "grid-template-rows". En esta plantilla escribiremos las dimensiones deseadas una tras de otra, como se ve en el ejemplo. Debemos tener en cuenta que cada dimensión añadida es una columna o una fila más.
Se trata del recurso que nos permite realizar animaciones dentro de CSS. Se utiliza para realizar cambios en el css, dandole movimiento, cambio de color, etcétera. Tiene un parecido similar al que tienen las transiciones, con la excepción de que es mucho más específico y ofrece muchas más posibilidades a la hora de establecer una serie de "fotogramas" clave en los que el navegador se apoyará para animar el objeto en cuestión.
@keyframes cubo{
from{ --- Fotograma inicial. Seleccionar las propiedades a verse justo al iniciar
background-color: yellow;
left: 0%;
}
15%{ --- Fotograma adicional. Modifica la rotación al alcanzar el 15% de la animación.
transform: rotate(50deg);
}
30%{ --- Fotograma adicional. Modifica la rotación al alcanzar el 30% de la animación, además del color
y su posición.
color: green;
left: 93%;
transform: rotate(180deg);
}
60%{ --- Fotograma adicional que cambia su color al llegar al 60% de la duración total de la animación.
background-color: blue;
}
95%{ --- Fotograma adicional.
background-color: red;
}
to{ ---- Fotograma final. Queda mejor si las propiedades encajan con las iniciales aunque no es necesario
background-color: yellow;
left: 0%;
transform: rotate(360deg);
width: 100px;
}
}
Para realizar una animación lo primero que debemos hacer es lo mostrado en el ejemplo: Crear unos fotogramas clave. Para ello, utilizaremos el "@keyframes [nombre de la animación]" y abriremos llaves. Una vez abierto esto, se asignarán los puntos iniciales con from y los puntos finales con to, como se muestra en el código de la parte superior. Dentro de estos fotogramas clave introduciremos los valores a modificar, como puede ser el cambio de color de fondo, rotar el objeto en cuestión o modificar su posición. Una vez hecho esto, se pueden añadir fotogramas clave intermedios, como se muestra en el código, que vendrán representados con un porcentaje en vez del "from" o el "to".
Una vez hecho todo esto, la animación deberá ser asignada al objeto en cuestión, como se muestra en el ejemplo de abajo. Utilizaremos el "animation" para indicar el nombre, y a partir de ahí podremos modificar diversos aspectos de la animación, como su duración, el número de veces que se repetirá, etcétera. Estas dos últimas propiedades son las más comunes a la hora de configurar una animación, aunque existen muchas más propiedades que tienen usos más específicos aún.
#cubo {
background-color: red;
width: 50px;
height: 50px;
position: relative;
left: 45%;
top: 45%;
animation: cubo;
animation-duration: 3s;
animation-iteration-count: infinite;
}
Con esto nuestra animación quedaría completa. Es necesario recalcar que no todo puede ser utilizado por las animaciones ya que pueden provocar errores en el código a la hora de ser visualizado. Las propiedades más comunes que reciben modificaciones son tanto "transform" como "opacity".
Y con las animaciones se termina el temario que esta web tiene como propósito explicar. En el panel lateral hay un enlace que lleva directamente a la web en la que se prueban todos estos conceptos. Es necesario indicar que por problemas técnicos la web ha sido optimizada para resoluciones que se encuentran entre los tamaños "1360x780" y ligeramente inferiores.