
A nivel mundial, los iconos de control de medios son algunos de los lenguajes visuales más entendidos universalmente en cualquier tipo de interfaz. Un diseñador puede simplemente asumir que cada usuario no solo sabe ▶ ️ = jugar, sino que los usuarios buscarán el ícono para ver cualquier video o animación.
Según se informa, introducida en la década de 1960 por el ingeniero sueco Philip Olsson, la flecha de reproducción se diseñó primero para indicar la dirección en la que iría la cinta al leer en reproductores de cinta de carrete a carrete. Desde entonces, pasamos de casetes a CD, del iPod a Spotify, pero los iconos de los controles multimedia siguen siendo los mismos.
El ícono reproducir ▶ ️ es un símbolo estándar (con su propio Unicode) de iniciar un medio de audio / video junto con el resto de los símbolos como detener, pausar, avanzar rápido, rebobinar y otros.
Hay opciones unicode y emoji para los íconos de los botones de reproducción, pero si desea algo personalizado, puede buscar una fuente de ícono o un activo personalizado. Pero, ¿y si quieres cambiar entre los iconos? ¿Puede ese cambio ser suave? Una solución podría ser utilizar SVG. Pero, ¿y si pudiera hacerse en 10 líneas de CSS? Que lindo es eso
En este artículo, crearemos un botón de reproducción y un botón de pausa con CSS y luego exploraremos cómo podemos usar las transiciones de CSS para animar entre ellos.
Botón de play
Paso uno
Queremos lograr un triángulo que apunte a la derecha. Comencemos haciendo una caja con un borde grueso. Actualmente, las cajas son el método base preferido para hacer triángulos. Comenzaremos con un borde grueso y colores brillantes para ayudarnos a ver nuestros cambios.
<button class="button play"></button>
.button.play {
width: 74px;
height: 74px;
border-style: solid;
border-width: 37px;
border-color: #202020;
}
Segundo paso
La reproducción de un borde de color sólido produce el resultado anterior. Escondido detrás del color del borde hay un pequeño truco ingenioso. ¿Cómo se representa exactamente el borde? Cambiemos los colores del borde, uno para cada lado, nos ayudará a ver cómo se renderiza el borde.
.button.play {
...
border-width: 37px 37px 37px 37px;
border-color: red blue green yellow;
}
Paso tres
En la intersección de cada borde, notará que se forma un ángulo de 45 grados. Esta es una forma interesante en que los bordes son renderizados por un navegador y, por lo tanto, abre la posibilidad de diferentes formas, como triángulos. Como veremos a continuación, si hacemos el border-left
lo suficientemente ancho, ¡parece como si pudiéramos lograr un triángulo!
.button.play {
...
border-width: 37px 0px 37px 74px;
border-color: red blue green yellow;
}
Paso cuatro
Bueno, eso no funcionó como se esperaba. Es como si el cuadro interior (el div real) insistiera en mantener su ancho. La razón tiene que ver con el box-sizing
propiedad, que por defecto tiene un valor de content-box
. El valor content-box
le dice al div que coloque cualquier borde en el exterior, aumentando el ancho o el alto.
Si cambiamos este valor a border-box
, el borde se agrega al interior del cuadro.
.button.play {
...
box-sizing: border-box;
width: 74px;
height: 74px;
border-width: 37px 0px 37px 74px;
}
Último paso
Ahora tenemos un triángulo adecuado. A continuación, debemos deshacernos de la parte superior e inferior (rojo y verde). Hacemos esto configurando el border-color
de esos lados a transparent
. El ancho también nos da control sobre la forma y el tamaño del triángulo.
.button.play {
...
border-color: transparent transparent transparent #202020;
}
Aquí hay una animación para explicar eso, si eso es útil.
Botón de pausa
Paso uno
Continuaremos haciendo nuestro símbolo de pausa comenzando con otro cuadro de borde grueso ya que el anterior funcionó tan bien.
<button class="button pause"></button>
.button.pause {
width: 74px;
height: 74px;
border-style: solid;
border-width: 37px;
border-color: #202020;
}
Segundo paso
Esta vez usaremos otra propiedad CSS para lograr el resultado deseado de dos líneas paralelas. Cambiaremos el border-style
a double
. La propiedad doble en el estilo de borde es bastante sencilla, duplica el borde agregando un trazo transparente en el medio. El trazo o espacio vacío será el 33% del ancho del borde dado.
.button.pause {
...
border-style: double;
border-width: 0px 37px 0px 37px;
}
Último paso
Ahora coloque un lado del borde con el border-width
propiedad. Utilizando el border-width
es lo que hará que la transición funcione sin problemas en el siguiente paso.
.button.pause{
...
border-width: 0px 0px 0px 37px;
border-color: #202020;
}
Animando la transición
En los dos botones que creamos arriba, observe que hay muchas similitudes, pero dos diferencias: border-width
y border-style
. Si usamos transiciones CSS, podemos cambiar entre los dos símbolos. No hay efecto de transición para border-style
pero border-width
Funciona genial.
A pause
El cambio de clase ahora se animará entre el estado de reproducción y pausa.
Aquí está el estilo final en SCSS:
.button {
box-sizing: border-box;
height: 74px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
will-change: border-width;
cursor: pointer;
// play state
border-style: solid;
border-width: 37px 0 37px 60px;
// paused state
&.pause {
border-style: double;
border-width: 0px 0 0px 60px;
}
}
Manifestación
Vea la transición del botón del lápiz con bordes de Chris Coyier (@chriscoyier) en CodePen.
Alternar sin JavaScript
Con un botón de reproducción / pausa del mundo real, es casi seguro que usará JavaScript para alternar el estado del botón. Pero es interesante saber que hay una forma CSS de hacerlo, utilizando una entrada y una etiqueta: el truco de la casilla de verificación.
<div class="play-pause">
<input type="checkbox" value="" id="playPauseCheckbox" name="playPauseCheckbox" />
<label for="playPauseCheckbox"></label>
</div>
.playpause {
label {
display: block;
box-sizing: border-box;
width: 0;
height: 74px;
cursor: pointer;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
will-change: border-width;
// paused state
border-style: double;
border-width: 0px 0 0px 60px;
}
input[type="checkbox"] {
visibility: hidden;
&:checked + label {
// play state
border-style: solid;
border-width: 37px 0 37px 60px;
}
}
}
Manifestación
Vea el botón de alternancia de lápiz con casilla de verificación de Chris Coyier (@chriscoyier) en CodePen.
Me encantaría conocer tu opinión y tus comentarios. Añádalos en los comentarios a continuación.