Sigue a lo largo de la creación de un botón de descarga simple y divertido con algunos CSS3 de lujo. Nuestro botón utilizará muchas cosas divertidas que incluyen el radio del borde, la sombra de la caja, los gradientes lineales, el índice z y las transiciones para lograr un efecto único de doble cajón deslizante en el cursor.
A medida que avanzamos, discutiré por qué deberían evitarse algunas técnicas que podría pensar utilizar. Las transiciones son difíciles de trabajar y son bastante propensas a negarse a trabajar con ciertas propiedades. Sigue leyendo para saber más.
El concepto
Basado libremente en esta idea, quería crear un botón de descarga con un efecto de cajón deslizante en el que la información originalmente oculta salta cuando el usuario comienza un evento flotante. Para darle mi propio toque, decidí duplicar el efecto y crear un cajón en la parte superior e inferior del botón (haga clic aquí para obtener un adelanto del resultado final).
Así es como funcionará: usando una combinación de HTML y CSS, crearemos tres piezas separadas. Estos incluyen el botón principal y dos paneles de información más pequeños. Los paneles más pequeños se ocultarán inicialmente debajo del botón más grande, luego, cuando el usuario se desplace, uno se deslizará hacia arriba y el otro hacia abajo.
Como puede ver, este será un proyecto bastante fácil que es perfecto para los principiantes que buscan mejorar sus habilidades de CSS. Especialmente vale la pena aprender es cómo utilizaremos el posicionamiento absoluto y el apilamiento a través del índice z.
Lo que no funciona
Cuando planeé este proyecto, se me ocurrieron algunas formas de hacer que mi concepto funcionara. Dado que últimamente he estado en una patada de pseudo-elementos, la forma en que elegí estructurar el proyecto inicialmente fue mediante el uso de: antes y: después.
Con estos pseudo elementos, podemos codificar solo el botón de descarga en nuestro HTML y luego agregar en las alas usando CSS puro. ¿Parece una solución óptima y de hecho funcionó muy bien? Hasta que intenté animar la transición. No importa lo que intenté, simplemente no pude hacer que la transición funcionara.
Después de una pequeña investigación, descubrí que solo Firefox admite transiciones CSS en pseudo elementos. Este es un verdadero fastidio que realmente limita la diversión que podemos tener con: antes y: después, pero al alza, aprendí una valiosa lección que me ahorrará mucho tiempo y problemas en el futuro.
En tutoriales como este, a menudo no se sabe dónde falló el autor, pero creo que es importante comunicar estas fallas para que pueda aprender de ellas como yo. Ahora, la próxima vez que desee animar un pseudo elemento recordará que no funcionará en la mayoría de los navegadores.
Dejando a un lado los fallos, saltemos a un método que será trabajo.
El botón
Para empezar, crearemos y estilizaremos nuestro botón. Una vez que tengamos esto en su lugar, será más fácil formar los otros elementos. Todo lo que necesitamos en el departamento de HTML es un solo div que contenga un enlace. Simplemente podríamos usar el enlace para el botón, pero tendremos que agrupar varios objetos para que sea necesario un div.
Forma y tamaño del botón
El código HTML anterior simplemente debe proporcionarle un enlace de texto sin formato. Vamos a transformar esto en un botón con una forma y tamaño de fondo establecidos. Para hacer esto, comenzamos con algunas dimensiones, agregamos algo de color y configuramos el valor de visualización para bloquear.
He aquí un vistazo a cómo debería lucir tu botón después de este paso. Todavía no parece mucho, pero será un botón de aspecto elegante antes de que te des cuenta.
Tipo de estilos
La primera cosa fea sobre el botón de arriba que tendremos que arreglar es el tipo, actualmente es un desastre. Afortunadamente, esto es fácil de abordar. Todo lo que necesitamos hacer es establecer el color en blanco, declarar una fuente y centrarla.
Hay un par de cosas interesantes para notar aquí. Primero, note que estoy usando la fuente? taquigrafía en lugar de ejecutar a través de la propiedad de fuente de alcance individualmente. Esta es una excelente manera de ahorrar espacio y mantener sus estilos de letra agradables y sucintos. El orden aquí es el siguiente:
Aquí hay otro truco ingenioso: establezco la altura de la línea en 50px para centrarla verticalmente en el botón. También tenga en cuenta que eliminé el subrayado del texto y transformé el tipo en mayúsculas. ¿Por qué no lo escribí en mayúsculas en HTML? Porque esto es realmente una elección de estilo y podría cambiar con un futuro rediseño.
Ahora nuestro botón se ve mucho mejor!
CSS3 Magic
En este punto, nuestro botón todavía se ve un poco liso. Si te gusta la apariencia mínima, puedes saltarte. De lo contrario, hagámoslo un poco más interesante. Lo primero que haremos es redondear las esquinas. Asegúrese de agregar los tres prefijos del navegador:
A continuación, vamos a lanzar en una caja de sombra. Una vez más, necesitaremos tres versiones para cubrir los distintos navegadores. El orden de valores abreviados aquí es desplazamiento horizontal, desplazamiento vertical, desenfoque y color.
Por último, vamos a lanzar en un gradiente. Desafortunadamente, esto requiere un montón de código. La forma en que funcionan los gradientes recientemente cambia, por lo que no solo necesitamos múltiples prefijos, también necesitamos múltiples sintaxis para asegurarnos de que admitimos todo.Voy a ser honesto, rara vez codifico esto a mano. En su lugar, uso el Generador de degradado final y pego el código generado. Aquí está el resultado:
Ahora nuestro botón está completamente peinado y se ve bien. Aquí está el resultado:
Añadiendo los cajones
Ahora que nuestro botón principal está listo, es hora de agregar los pequeños cajones que se deslizarán desde la parte superior e inferior (tal vez "alas" es el término apropiado). Para hacer esto, comenzaremos agregando un poco a nuestro HTML:
Como puede ver, básicamente lo hice en dos párrafos, cada uno con una clase única que hace que sean más fáciles de identificar (en su lugar, podría usar algunos pseudo selectores si realmente desea obtener fantasía).
Estilo de párrafo predeterminado
Ahora salta a tu CSS y te daremos estilo a los párrafos. Para empezar, queremos enfocarnos en los estilos que ambos párrafos compartirán. El diseño de ambos a la vez, siempre que sea posible, ayuda a mantener nuestro código limpio y menos redundante. Aquí hay una gran cantidad de código para pensar:
Ahora, esto es mucho para lanzarle a todos a la vez, así que lo veré paso a paso. Lo primero que hacemos es darles forma, color y estilo a los párrafos exactamente como lo hicimos en el botón. La principal diferencia es que estos son más pequeños y utilizan algunos márgenes para colocarlos en su lugar.
A continuación están los estilos de posicionamiento. Estos son muy importantes, así que asegúrese de entenderlos claramente. Para que aparezcan las alas detrás del botón, debemos aplicar el índice z, que afecta el orden de apilamiento de los elementos. Piense en esto como un? Enviar a la espalda? tipo de comando Para hacer este trabajo, necesitamos aplicar posicionamiento absoluto.
Finalmente, agregamos el mismo radio de borde y estilos de degradado que hicimos antes. Los he mantenido separados de los estilos anteriores para mantener las cosas simples y claras, pero para hacer las cosas más DRY, probablemente querrás reescribir tus estilos CSS3 compartidos a algo como esto:
Básicamente, cada vez que te encuentras repitiendo o pegando estilos varias veces, estás haciendo tu código innecesariamente complejo y debes intentar simplificarlo.
Al final de este paso, extrañamente no verá ningún cambio en su vista previa desde la última vez. Esto es porque hemos escondido estos elementos detrás del botón. ¡Están ahí, simplemente no puedes verlos todavía!
Hover y estilos activos
Lo que queremos hacer a continuación es tomar las alas que acabamos de crear y moverlas hacia afuera cuando el usuario se desplace sobre el botón. Para lograr esto, simplemente necesitamos ajustar los márgenes en cada párrafo. Aquí nos dirigimos a cada una de las clases que creamos, luego movemos el .top uno hacia arriba y el .bottom uno hacia abajo. La clase .top también requería un ligero ajuste de altura de línea para verse bien.
Mientras estamos aquí, también podríamos lanzar algunos estilos activos. Estos tendrán efecto durante un evento de mouse hacia abajo.
Como puede ver, lo que he hecho aquí es ajustar el gradiente para que el color superior se estire un poco más, luego volví a colocar las alas un poco para que haya un efecto de contracción cuando haga clic.
Ahora nuestro botón se ve increíble. Los tres de nuestros estados están trabajando. Cuando no estás flotando, parece un simple botón. Cuando estás flotando, las alas o los cajones sobresalen. Cuando haces clic, las alas vienen un poco y el gradiente cambia ligeramente.
Paso final: añadir la transición
En este punto, todo parece estar funcionando bien. El único problema es que el efecto de desplazamiento se produce instantáneamente y, por supuesto, nos gustaría que fuera un poco más gradual. Para lograr esto, regrese a su bloque de párrafo y agregue una transición básica de 0.5 segundos usando todos los prefijos requeridos.
Con esta adición, el botón realizará una transición muy agradable entre los tres estados diferentes.
Verlo en acción
¡Todos hemos terminado! Ahora debería tener un botón de descarga animado impresionante que seguramente impresionará. Echa un vistazo a la demostración en vivo a continuación o mira el código en Tinkerbin.
Manifestación: Haga clic aquí para iniciar
¿Quiere una versión aún mejor del botón con seis versiones diferentes para elegir? Echa un vistazo a la increíble descarga gratuita en nuestro nuevo sitio hermano Design Curate.
Conclusión
Gracias por leer y seguir adelante. Si lo hizo bien, dése una palmadita en la espalda por un trabajo bien hecho.
Espero que hayas aprendido una o dos cosas sobre el índice z o los trucos geniales de CSS3. ¡Si no, al menos tienes un botón impresionante del trato! Deja un comentario a continuación y avísanos si te gustó el tutorial.