Con la finalidad de realizar cambios vistosos en elementos para una página web, crearemos transiciones básicas de
CSS en un documento, según las reglas de este lenguaje de diseño. A veces el
desconocimiento de la creación, el uso y los beneficios de las transiciones de CSS,
conlleva a pérdidas de tiempo cuando se realizan diseños llamativos en páginas web. Por lo tanto, identificaremos las
etiquetas necesarias, y el beneficio aportado por un Trigger.
Las transiciones son utilizadas
con mucha frecuencia para añadir diferentes atractivos a las páginas web, su función es cambiar de un estado
a otro un elemento. En CSS, para ejecutarse una transición es necesario un
estado inicial, un estado final y un Trigger.
En la imagen observamos cómo el fondo, inicialmente, es de color naranja, sin
embargo, cambia a color rojo.
061-01_0801_ilu01.
Estado de una transición
El disparador o Trigger es una Pseudoclase de CSS; una palabra clave o también conocida como reservada
del lenguaje, la cual se agrega a un selector para ejecutar una acción. Existen
variedades de pseudoclases, sin
embargo, ampliaremos tres:
- Active: utilizado para activar la acción cuando el usuario presiona
el mouse con el botón primario, y
termina cuando lo suelta.
- Hover: utilizado para activar la acción cuando el usuario pasa el mouse sobre el elemento, sin la
necesidad de presionar un botón.
- Focus: utilizado para activar la acción cuando el usuario realiza
una selección, por ejemplo, al momento de ingresar datos en un formulario.
061-01_0801_ilu02.
Tipos de Pseudoclases
Con la finalidad de especificar
los cambios de estado de un elemento de CSS es necesario utilizar transition-property, con ella definimos
la propiedad a la cual se va a aplicar la transición. En la ilustración siguiente
tenemos algunos ejemplos background-color
y background-position para cambiar
los colores de fondos, border-bottom-color
y border-bottom-width para modificar
el color de un borde o el ancho, y así
sucesivamente con el resto de las propiedades.
061-01_0801_ilu03.
Tipos de propiedades
En el siguiente ejemplo explicamos
como crear la transición:
- Definimos
la clase prueba en CSS.
- Especificamos
en orange como estado inicial del
fondo.
- Delimitamos
como transición a la propiedad background-color.
- Utilizamos
como activador la Pseudoclase hover.
- Definimos
como estado final el color red para
el fondo.
Por este motivo, mediante la vista
del usuario es posible visualizar el cambio a realizarse de forma inmediata
cuando el usuario pasa el mouse sin
presionar.
061-01_0801_ilu04.
Creación de una transición
Existe una propiedad llamada transition-duration la cual es utilizada
para especificar el tiempo de la transición. En el ejemplo se especifica en 10
segundos, por lo tanto, en ese tiempo ocurre el cambio de color al fondo,
mientras el usuario mantega el mouse en
el elemento.
061-01_0801_ilu05.
Creación de una transición con tiempo
Keynotes
- Las transiciones son utilizadas con mucha
frecuencia para añadir diferentes atractivos a las páginas web, su función es cambiar de un estado a otro un elemento.
- En CSS, para ejecutarse una transición es
necesario un estado inicial, un estado final y un Trigger
- El disparador o Trigger es una Pseudoclase de
CSS; una palabra clave o también conocida como reservada del lenguaje, la cual
se agrega a un selector para ejecutar una acción.
- Con la finalidad de especificar los cambios
de estado de un elemento de CSS es necesario utilizar transition-property, con ella definimos la propiedad a la cual se
va a aplicar la transición.
- Existe una propiedad llamada transition-duration la cual es utilizada
para especificar el tiempo de la transición.
RetoCrea dos transiciones básicas de CSS en un
documento, según las reglas de este lenguaje. Es necesario utilizar colores de
letras en una.
¡Comparte el resultado final de tu reto en VKTV y pide a tus compañeros un comentario
de optimización!
Tiempo disponible: entre 15 y 30 minutos.
CierreLa creación de las transiciones básicas de CSS en un documento, optimiza el tiempo
cuando agregamos diseños llamativos en páginas web. Además, realizamos cambios vistosos en elementos específicos
pertenecientes a proyectos destinamos a internet. Con precaución y organización,
agregaremos correctamente un Trigger para
transiciones en documentos CSS.
