Este es para mis compañeros nerds de Mac. El sistema operativo de escritorio más nuevo de Apple, OS X Mountain Lion, tiene un sistema de notificación incorporado similar al que hemos tenido en iOS durante años. Hoy vamos a construir una de las ventanas de notificación usando CSS.
Para lograr esto, usaremos un HTML básico y un poco de CSS3 elegante. Para finalizar, agregaremos un toque de jQuery magic para permitir al usuario arrastrar la ventana. Será un montón de diversión, así que inicie su aplicación de codificación favorita y ¡sígalo!
Lo que estamos construyendo
Para asegurarme de obtener los detalles correctos, configuré una notificación de prueba y tomé una captura de pantalla en mi Mac. Así es como se ve la ventana:
Como puede ver, tenemos un rectángulo redondeado básico con un fondo degradado y una ligera transparencia. Comienza con un icono a la izquierda, seguido de un encabezado que indica el texto de alerta y una marca de tiempo debajo de eso. Finalmente, en el lado derecho tenemos dos botones: posponer y cerrar.
Me encanta mirar cosas como esta y pensar cómo construirlas con CSS. Puede parecer un ejercicio sin sentido, pero es una excelente manera de perfeccionar sus habilidades de codificación. Nunca dejes de practicar! Empecemos.
Paso 1. El HTML
Para iniciar este proyecto, vamos a saltar en el marcado. Nuestro objetivo aquí es mirar el ejemplo anterior y ver si podemos dividirlo en diferentes elementos. Me gusta comenzar con mis contenedores básicos y pensar cómo se agrupan los objetos. Obviamente, la ventana en sí necesitará un div, y podemos colocar el icono dentro de eso.
Sin embargo, desde aquí, hay dos objetos de texto que deben agruparse y dos botones que deben agruparse. ¿Usaremos un mensaje? div y? botones? div para estos
Paso 5 Tipo CSS
Ahora vamos a tener nuestro texto bajo control. Tenemos dos ganchos de estilo que debemos apuntar: uno para el h2 y otro para el párrafo. La parte difícil aquí es que querrás aplicar una sombra de texto blanca. Esto parece un poco extraño, pero le dará un ligero aspecto biselado que hará que el texto se vea más adentro.
Control del progreso
¡Con esos cambios rápidos, nuestra ventana de notificación se ve mucho mejor! De hecho, casi hemos terminado. Solo necesitamos codificar los botones y hacer que todo se pueda arrastrar.
Paso 6 Boton de CSS
Para que los botones se vean como queremos, necesitamos un poco de estilo. Vamos a dividirlo en unos pocos pedazos manejables para que no sea abrumador.
Estilos de botones básicos
Lo primero que debemos hacer es definir la forma y el aspecto de los botones. Dividiremos este código como lo hicimos con el paso de la ventana anterior, comenzando con el tamaño y la forma básicos, luego moviéndonos hacia el texto y terminando con el material CSS3.
Como puedes ver, esto es muy similar a cómo diseñamos la ventana. Una diferencia notable es que establecemos la posición de los botones en absoluta, por lo que podemos moverlos exactamente donde los queremos dentro de los límites del padre con posición relativa, ¿cuáles son las notificaciones? div.
El estilo del texto es un poco más robusto esta vez porque los enlaces requieren un poco de limpieza de estilo predeterminado adicional para verse decentes.
Botón Hover
Para ayudar a que los botones se destaquen al mover el mouse, modificaremos el gradiente eliminando la transparencia. Fácil y sutil!
Posicionando los Botones
Ahora que nuestros botones se ven bonitos y bonitos, es hora de colocarlos en su lugar. Debido a que estamos usando posicionamiento absoluto, esto es realmente muy fácil. Más interesante es cómo nos dirigimos a cada botón: el selector CSS3 nth-child. Esto nos permite agarrar botones específicos sin agregar clases adicionales en nuestro HTML.
Estos selectores deberían funcionar muy bien en todos los ámbitos, incluso en IE9. Para IE8 y anteriores, pulse Selectivizr.
Control del progreso
¡Nuestra ventana de notificación está lista! Parece bastante impresionante si lo digo yo mismo. Para hacerlo aún más fresco, salta al siguiente paso.
Paso 7 Hazlo arrastrable
Solo por diversión, quiero hacerlo para que un usuario pueda hacer clic y arrastrar esta ventana alrededor de la pantalla al igual que con Windows en su sistema operativo. Suena complicado ¿verdad? En realidad, con un poco de magia jQuery, solo se necesita un poquito de JavaScript para arrancar.
¡Eso es! Simplemente nos dirigimos a nuestra? Notificación? div y llamar a la función arrastrable. No podría ser más fácil.
Echa un vistazo a la demostración
Todos terminamos con nuestra ventana de notificación de Mountain Lion.Echa un vistazo a la demostración en vivo, incluida a continuación a través de CodePen.
Curiosamente, la funcionalidad de hacer clic y arrastrar solo funciona en el sitio de CodePen, así que vaya aquí para ver la demostración de la página completa y asegúrese de arrastrar la ventana.
Actualizar
Doh! Acabo de darme cuenta de que cambié alrededor del? Cerrar? y? dormitar? Botones de cómo aparecen en Mountain Lion. He arreglado el código por lo que debería ser correcto ahora.
Conclusión
Así que ahí lo tienen, una ventana de notificación al estilo de Mountain Lion codificada puramente con buen HTML y CSS antiguos (y un poco de jQuery opcional). ¿Qué otros elementos populares de la interfaz te gustaría ver convertidos en tutoriales? ¡Deja un comentario abajo y haznos saber!