Celui-ci est pour mes collègues nerds Mac. Le dernier système d'exploitation de bureau d'Apple, OS X Mountain Lion, intègre un système de notification similaire à celui utilisé sur iOS depuis des années. Aujourd'hui, nous allons créer l'une des fenêtres de notification à l'aide de CSS.
Pour cela, nous allons utiliser du HTML de base et un peu de CSS3 sophistiqué. Pour terminer, nous allons ajouter une touche de magie jQuery pour permettre à l'utilisateur de faire glisser la fenêtre. Ce sera très amusant, alors démarrez votre application de codage préférée et suivez-la!
Ce que nous construisons
Pour que les détails soient corrects, j'ai configuré une notification de test et pris une capture d'écran sur mon Mac. Voici à quoi ressemble la fenêtre:
Comme vous pouvez le constater, nous avons un rectangle arrondi de base avec un fond dégradé et une légère transparence. Il commence par une icône à gauche, suivie d'un titre indiquant le texte de l'alerte et d'un horodatage en dessous. Enfin, sur le côté droit, nous avons deux boutons: snooze et close.
J'aime regarder de telles choses et réfléchir à la manière de les construire avec CSS. Cela peut sembler un exercice inutile, mais c'est un excellent moyen de parfaire votre technique de codage. Ne jamais arrêter de pratiquer! Commençons.
Étape 1. Le HTML
Pour démarrer ce projet, sautons dans le balisage. Notre objectif ici est d'examiner l'exemple ci-dessus et de voir si nous pouvons le décomposer en différents éléments. J'aime commencer avec mes conteneurs de base et réfléchir à la manière dont les objets sont regroupés. De toute évidence, la fenêtre elle-même aura besoin d'une div, et nous pouvons déposer l'icône juste à l'intérieur de celle-ci.
À partir de là, deux objets texte doivent être groupés et deux boutons doivent être groupés. Nous utiliserons un? Message? boutons div et? div pour ceux-ci.
Étape 5. Type CSS
Maintenant, contrôlons notre texte. Nous avons deux crochets de style à cibler: un pour le h2 et un pour le paragraphe. La partie délicate ici est que vous voudrez appliquer une ombre de texte blanche. Cela semble un peu étrange, mais cela lui donnera un léger aspect biseauté qui donnera au texte un aspect inséré.
Vérification des progrès
Grâce à ces changements rapides, notre fenêtre de notification semble beaucoup mieux! En fait, nous avons presque fini. Nous avons juste besoin de coder les boutons et de rendre le tout glissable.
Étape 6. Bouton CSS
Pour que les boutons soient comme nous le souhaitons, nous avons besoin de beaucoup de style. Divisons-le en quelques morceaux faciles à gérer pour que ce ne soit pas écrasant.
Styles de boutons de base
La première chose à faire est de définir la forme et l’aspect des boutons. Nous allons scinder ce code comme nous l'avons fait avec l'étape de fenêtre ci-dessus, en commençant par la taille et la forme de base, puis en passant au texte et en terminant avec les éléments CSS3.
Comme vous pouvez le constater, cela ressemble beaucoup à la façon dont nous avons stylé la fenêtre. Une différence notable réside dans le fait que nous définissons la position des boutons en absolu afin de pouvoir les localiser exactement où nous les voulons, dans les limites du parent relativement positionné, à savoir les "notifications". div.
Le style du texte est un peu plus robuste cette fois-ci, car les liens nécessitent une clarification supplémentaire du style par défaut pour paraître décents.
Bouton survol
Pour aider les boutons à se démarquer en survol, nous allons affiner le dégradé en éliminant la transparence. Facile et subtil!
Positionner les boutons
Maintenant que nos boutons sont beaux et jolis, il est temps de les mettre en place. Parce que nous utilisons un positionnement absolu, c'est vraiment très facile. La façon dont nous ciblons chaque bouton est plus intéressante: le sélecteur CSS3 pour le nième enfant. Cela nous permet de saisir des boutons spécifiques sans ajouter de classes supplémentaires dans notre code HTML.
Ces sélecteurs devraient fonctionner parfaitement, même sur IE9. Pour IE8 et les versions précédentes, appuyez sur Selectivizr.
Vérification des progrès
Notre fenêtre de notification est terminée! Ça a l'air génial si je le dis moi-même. Pour le rendre encore plus cool, passez à l'étape suivante.
Étape 7. Faites-le glisser
Juste pour le plaisir, je veux faire en sorte qu'un utilisateur puisse cliquer et faire glisser cette fenêtre sur tout l'écran, comme avec les fenêtres de votre système d'exploitation. Cela semble compliqué, non? En fait, avec un peu de magie jQuery, il suffit d’un petit peu de JavaScript pour réussir.
C'est tout! Nous ciblons simplement notre? Notification? div et appelle la fonction glissable. Cela ne pourrait pas être plus facile.
Découvrez la démo
Nous avons tous terminé avec notre fenêtre de notification Mountain Lion.Découvrez la démonstration en direct, intégrée ci-dessous via CodePen.
Il est intéressant de noter que la fonctionnalité cliquer-déplacer ne fonctionne que sur le site CodePen, alors cliquez ici pour voir la démo complète de la page et assurez-vous de faire glisser la fenêtre.
Mettre à jour
Doh! Je viens de remarquer que j'ai troqué la fin? et? snooze? boutons de la façon dont ils apparaissent dans Mountain Lion. J'ai corrigé le code donc il devrait être correct maintenant.
Conclusion
Donc, voilà, une fenêtre de notification de style Mountain Lion codée purement avec le bon vieux HTML & CSS (et un tout petit peu de jQuery en option). Quels autres éléments d'interface populaires aimeriez-vous voir transformés en tutoriels? Laissez un commentaire ci-dessous et laissez-nous savoir!