Últimamente me aburrí con todos los botones de la tienda de aplicaciones Java / Mac de iTunes que he estado viendo en la web, así que codifiqué algunas divertidas alternativas animadas que pensé que compartiría.
Este proyecto es super simple, por lo que incluso si eres un principiante, deberías poder seguirlo. Aprenderemos cómo usar algunas técnicas sofisticadas, como incorporar fuentes de iconos en un diseño y cómo insertar objetos usando pseudo elementos.
El concepto
Para comenzar un proyecto, a menudo es divertido agarrar un lápiz y esbozar algunas ideas. Tendemos a pensar más libremente cuando dibujamos con nuestras manos que con un ratón. Tampoco tienes que ser bueno para dibujar, siéntete libre de escribir bocetos rápidos y feos. Mientras comuniquen su proceso de pensamiento, ¡funcionarán!
El concepto aquí es bastante básico y similar a otros proyectos que hemos realizado en el pasado. Me gustaría comenzar con un círculo que contiene solo un icono. Luego, cuando se desplaza sobre el ícono, se expande para mostrar un mensaje sobre la descarga de la aplicación en la tienda de aplicaciones.
Por supuesto, dado que Apple tiene tres arquetipos principales de dispositivos (iPad, iPhone y Mac), tendremos que crear algunas versiones diferentes sobre las bases.
Paso 1: El HTML
Para comenzar, saque un div como el que se muestra a continuación. Dentro, he colocado un párrafo envuelto en una etiqueta de anclaje, parte del cual también está envuelto en una etiqueta pequeña. Esto nos ayudará a diferenciar un poco el texto.
Viendo esto ahora, se siente un poco de marcado pesado. Probablemente podría aplicar las clases directamente al ancla y omitir la división por completo, pero nos limitaremos a esto por ahora. Tenga en cuenta que he aplicado dos clases separadas a la div. Podría haber salido con uno, pero para diferenciar los diferentes tipos de botones que crearemos, ayuda a separarlos en clases separadas (esto le permite apuntar a cada versión individualmente). Los estilos repetidos se pueden agrupar en un? Appstorebutton? clase, un método de organización que mantendrá nuestro CSS agradable y seco.
También tenga en cuenta que HTML5 nos permite envolver un enlace alrededor de lo que queramos, así que si eso le parece un poco torpe, sepa que está perfectamente permitido.
Paso 2: Estilos de botones básicos
Ahora saltemos a algo de CSS y tomemos ese? Appstorebutton? gancho. El estado predeterminado del botón será un círculo, pero es mucho más fácil organizar todo con el botón en su estado expandido, así que comenzaremos con un ancho de 275px, que reduciremos a 80px una vez que estemos todo terminado.
Hay algunas otras cosas interesantes aquí también. En primer lugar, aplicamos la posición relativa porque usaremos alguna posición absoluta en un elemento dentro de este más adelante y esto nos dará un punto de partida. Si esto no tiene sentido, lea este artículo.
También configuramos el desbordamiento a oculto. Esto se debe a que cuando el botón se encuentra en su estado circular, gran parte del contenido estará fuera de los límites físicos del botón y queremos mantenerlo agradable e invisible. Finalmente, aplicamos un color de fondo al? Iphone? clase. Más adelante crearemos algunos más de estos para las otras versiones.
Control del progreso
En este punto, nuestro objeto es horrible, pero no te preocupes, se verá mejor en ningún momento.
Paso 3: Estilo del párrafo
A continuación, es hora de arreglar ese feo texto. Esto es bastante sencillo e implica cambiar el color a blanco y definir diferentes tamaños para el texto de párrafo pequeño y regular. También declaré un ancho establecido, que divide el texto en dos líneas, luego usé márgenes para colocarlo todo en su lugar.
Control del progreso
¿No te prometí que todo se vería bien pronto? Ya estamos empezando a ver el resultado final perfilado. ¡Es increíble lo lejos que puede llegar un texto con un poco de estilo!
Paso 4: Añadir el icono
En la imagen de arriba, el texto parece desplazarse torpemente hacia la derecha con un gran espacio vacío a la izquierda. Aquí es donde irá nuestro pequeño icono de iPhone. Sin embargo, antes de ponerlo allí, debemos pensar cómo hacerlo.
El primer pensamiento que me viene a la mente es usar una fuente de iconos. Estos son simples de implementar e infinitamente escalables y, por lo tanto, funcionarán perfectamente para un gráfico de botón. Después de una pequeña búsqueda, encontré una fuente gratuita llamada Modern Pictograms de Font Squirrel que contiene un iPhone y un iPad que podemos usar para este proyecto.
Ahora, en lugar de abarrotar nuestro marcado, podemos insertar este ícono usando CSS puro utilizando el: antes del pseudo-elemento. El código para esto junto con la implementación de la fuente del icono se muestra a continuación.
Como puedes ver, le dijimos a nuestro CSS que? Antes? El párrafo, queríamos insertar la letra? O ?, que corresponde al gráfico del iPhone en la fuente de Pictogramas modernos. El código de @ font-face que utilicé aquí se copia y pega directamente de los increíblemente prácticos kits de @ font-face que se encuentran en Font Squirrel.
A continuación, colocamos el gráfico del iPhone en su lugar. Al utilizar la posición absoluta aquí, sacamos el gráfico del flujo normal. Sin embargo, está vinculado al espacio de nuestro botón debido al contexto de posicionamiento relativo que aplicamos en un paso anterior. Desde aquí, lo empujamos diez píxeles desde la parte superior y veinte desde la izquierda, y luego estamos listos.
Control del progreso
Como puede ver, el ícono de la fuente se ve perfecto en nuestro pequeño botón. Todo lo que nos queda por hacer es redondear nuestras esquinas, reducir el ancho y establecer una transición flotante.
Paso 5: Haz el círculo
Ahora que nuestro botón tiene un aspecto similar al que queremos cuando se expande, es hora de contratarlo. Para hacer esto, vuelve a nuestro? Appstorebutton? enganche y establezca el ancho a 80 px, luego agregue un radio de borde de 40 px.
Control del progreso
Ahora nuestro botón se ha derrumbado en un pequeño círculo agradable. Como nuestro desbordamiento está oculto, no verá nada del texto. En el siguiente paso, veremos cómo recuperarlo todo.
Paso 6: Expandir sobre Hover
Para finalizar nuestro botón animado, necesitamos agregar una transición y un estado de desplazamiento. Nuestra transición se centrará en el ancho de la clase .appstorebutton con una duración de un segundo y una función de sincronización de "facilidad".
Luego, una vez que el usuario se desplace sobre el botón, se expandirá al ancho de 275px que habíamos usado antes.
Control del progreso
¡Nuestro botón está todo terminado! En este punto todo debería estar funcionando perfectamente. Si lo has seguido, tu resultado debería ser como el de abajo.
Paso 7: Añadir los otros
Ahora que tenemos un botón listo, es hora de expandir esta idea en un conjunto de tres botones. Agrega dos divs más a tu HTML y dales a cada uno una clase única, como hice a continuación.
Desde aquí seguimos los pasos que hicimos antes para insertar los íconos usando el elemento: before pseudo element. El icono del iPad es? Q? en nuestra fuente de íconos, pero desafortunadamente no hay una computadora portátil o iMac que podamos usar para el ícono de Mac App Store. Para esto, fui y agarré un ícono del fabuloso Proyecto Noun (tuve que modificarlo un poco para acercarlo a los demás).
Para terminar, le di a cada botón un color único usando las clases especiales que aplicamos en nuestro HTML. Úsalos para aplicar cualquier otro estilo específico de botón que quieras usar.
¡Véalos en acción!
Todo su arduo trabajo ha dado sus frutos y tiene un pequeño botón para mostrarlo. Si no ha seguido y creado los botones, haga clic a continuación para obtener el resultado de una prueba de manejo.
Manifestación: Haga clic aquí para iniciar la demostración.
Conclusión
Pequeños proyectos como estos son excelentes para mantener tus chuletas CSS frescas y tu cerebro en un modo de pensar constantemente en nuevas ideas de diseño.
¿Has visto otros botones creativos de la App Store recientemente? Háganos saber en el área de comentarios a continuación.