Share
Aujourd'hui, nous allons concevoir et construire les badges de notification de menu d'Orman Clark à l'aide de HTML et de CSS. Nous allons examiner différentes méthodes pour obtenir cet effet, notamment l’utilisation d’attributs de données HTML5 avec lesquels vous n'êtes peut-être pas familier. Plongeons dedans!
Commençons par ajouter quelques balises de base. Nous utiliserons le doctype HTML5 tout au long du tutoriel. Nous allons créer le menu lui-même en ajoutant d'abord un div principal suivi par des éléments de liste qui créeront chaque lien de menu. Nous avons également inclus le script HTML5 shiv (ou shim) dans l'en-tête de notre document. Ceci est appelé à jouer avec les anciennes versions d'Internet Explorer, leur permettant de reconnaître et de styliser les éléments HTML5.
Badges de notification de menu
Pour créer la structure de notre menu, nous utiliserons une liste non ordonnée avec 4 éléments de liste et une balise d'ancrage à l'intérieur. Vous pouvez également vouloir imbriquer la liste dans un tag pour le déploiement.
Pour les besoins de cette démonstration, nous allons créer une division autour du menu avec une classe de wrapper. Cela servira simplement à déplacer le menu au milieu de la page.
Votre balisage devrait ressembler à quelque chose comme ça;
Badges de notification de menu
- Profil
- Réglage
- Les notifications
- Connectez - Out
Avant de commencer à styler le menu, nous allons ajouter des réinitialisations et des styles de page. Nous allons d'abord lancer une réinitialisation pour supprimer toutes les marges, les bourrages, etc. de la feuille de style par défaut du navigateur. Nous allons ensuite appliquer une couleur d’arrière-plan au corps et une taille de police de 16 pixels. Cette taille de police fixe garantit la taille de base de notre démo, mais vous préférerez peut-être la définir à 100%, ce qui permettra à l'utilisateur de définir la taille de la police de son navigateur. Nous allons appliquer une largeur de 70% à l'emballage et le centrer avec une marge supérieure de 200 pixels..
html, corps, div, span, applet, objet, iframe, h1, h2, h4, h4, h5, h6, p, blockquote, pre, un, abbr, acronyme, adresse, gros, citer, code, del, dfn, em, font, img, ins, kbd, q, s, samp, petit, grève, fort, sous, sup, tt, var, b, u, i, centre, dl, dt, dd, ol, ul, li, fieldset, formulaire, étiquette, légende, tableau, légende, tbody, tfoot, thead, tr, th, td margin: 0; rembourrage: 0; bordure: 0; contour: 0; taille de police: 100%; alignement vertical: ligne de base; fond: transparent; body line-height: 1; ol, ul list-style: none; blockquote, q quotes: none; blockquote: before, blockquote: after, q: before, q: after content: "; content: none;: focus contour: 0; ins text-decoration: aucune; del text-decoration: line -through; table border-collapse: collapse; border-spacing: 0; a text-decoration: none; body background: #ededed; taille de la police de caractères: 16px; .wrapper width: 70%; marge: 200px auto;
Pour lancer le style du menu, nous allons d'abord nous concentrer sur la base. Ciblez d'abord la liste non ordonnée, à laquelle une classe de 'menu' a été attribuée. Nous lui donnerons un affichage de inline-block, nous permettant de déterminer sa largeur / hauteur en fonction de son contenu, comme un élément de bloc.
Ensuite, nous appliquerons un fond dégradé avec tous les préfixes du navigateur. Ensuite, ajoutez un rayon de bordure, mais bon quels sont ces ems?! Nous utilisons ems (au lieu de pixels) pour redimensionner le rayon de la bordure par rapport à la taille de la police. Découvrez la démo; vous verrez le rayon augmenter proportionnellement avec le texte plus grand.
Pour déterminer la taille dont nous avons besoin, nous allons en prendre 3 (la taille souhaitée du rayon de la bordure en px) et le diviser par 16 pixels (la taille de la police). Donc 3px / 16px = 0,188 mais nous arrondirons à 0,2.
Ensuite, nous appliquerons une simple bordure grise, puis une ombre encadrée avec une ombre portée et insérée. N'oubliez pas ces préfixes de navigateur aussi!
.menu display: inline-block; image d'arrière-plan: -webkit-linear-gradient (haut, rgb (249, 249, 249), rgb (240, 240, 240)); image d'arrière-plan: -moz-linear-gradient (haut, rgb (249, 249, 249), rgb (240, 240, 240)); image d'arrière-plan: -o-linear-gradient (haut, rgb (249, 249, 249), rgb (240, 240, 240)); image d'arrière-plan: -ms-linear-gradient (haut, rgb (249, 249, 249), rgb (240, 240, 240)); image d'arrière-plan: gradient linéaire (en haut, rgb (249, 249, 249), rgb (240, 240, 240)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f9f9f9', EndColorStr = "# f0f0f0"); -webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; rayon de la frontière: 0.2em; bordure: 1px solide #cecece; -webkit-box-shadow: encart 0px 1px 0px #fff, 0px 1px 2px rgba (0,0,0, .06); -moz-box-shadow: encart 0px 1px 0px #fff, 0px 1px 2px rgba (0,0,0, 0,06); box-shadow: incrément 0px 1px 0px #fff, 0px 1px 2px rgba (0,0,0, 0,06);
Passons à autre chose, améliorons le menu en nommant les éléments de la liste. Tout d'abord, nous allons placer les éléments de la liste à gauche afin qu'ils soient tous sur une seule ligne et non répertoriés. Nous les positionnerons alors relativement, cela sera nécessaire ultérieurement lorsque nous créerons les badges. Ensuite nous ajouterons une bordure à gauche et une bordure à droite.
Nous devrons maintenant cibler le premier élément de liste et le dernier élément de liste. Nous allons donc le faire en utilisant les pseudo-sélecteurs; :premier enfant et :dernier enfant (gardez à l'esprit le support du navigateur lors de l'utilisation de ceux-ci). Pour le premier, nous allons supprimer la bordure à gauche et la bordure droite du dernier élément de la liste..
.menu li float: left; position: relative; border-right: 1px solid # d8d8d8; border-left: 1px solid #ffffff; .menu li: premier enfant border-left: none; .menu li: last-child border-right: none;
La prochaine chose que nous devrons faire est de styliser les balises d'ancrage. Nous allons tout d’abord leur présenter une famille de polices de caractères Helvetica Neue avec quelques solutions de remplacement pour les personnes qui ne possèdent pas la police Helvetica. Nous leur donnerons ensuite une taille de police de 0.75em (13px / 16px = 0.75). Ensuite, nous appliquerons une police de caractères de gras, suivie d'une couleur de # 666666 et appliquerons une ombre de texte..
Nous allons maintenant appliquer des marges à gauche et à droite de 1em (13px / 13px = 1) et un peu de hauteur de ligne pour centrer le texte verticalement. Nous avons basé la hauteur de ligne sur 30px, interprété en ems.
.menu li a font-family: 'Helvetica Neue', Helvetica, sans serif; taille de police: 0,75em; poids de police: gras; couleur: # 666666; text-shadow: 0px 1px 0px #ffffff; bloc de visualisation; rembourrage: 0 1em; hauteur de ligne: 2.5em;
Notre menu commence à bien paraître!
Il est temps d'ajouter les petites bulles de notification. Vous devez d’abord remplacer le balisage HTML de votre menu par ce qui suit. Nous allons créer les bulles en utilisant des balises span, puis pour chaque couleur, nous appliquerons une classe appropriée. J'ai ajouté du rose, du jaune et du bleu.
- Profil2
- Réglage3
- Les notifications6
- Connectez - Out
Pour créer les bulles de notification, nous allons d’abord styliser les balises span avec tout sauf la couleur et la couleur de la bordure. De cette façon, nous pouvons changer les couleurs facilement en changeant simplement les noms de classe.
Premièrement, nous allons créer des largeurs et des hauteurs, prenons 18px / 12px = 1.5em. Ensuite, nous devrons les positionner absolument (0.5em en partant de la droite et -2em en partant du haut). Ensuite, une hauteur de ligne sera appliquée pour centrer le nombre verticalement et le centre d'alignement de texte pour centrer horizontalement.
Helvetica Neue s'appliquera à une famille de polices, avec des replis pour les utilisateurs ne disposant pas de Helvetica. Nous allons le mettre en gras, appliquer une couleur blanche puis ajouter une ombre au texte. Nous ajouterons ensuite quelques ombres de boîte (nous en ajouterons deux: une ombre portée et une ombre incrustée). Pensez à les créer en utilisant les préfixes du navigateur. Nous allons maintenant ajouter un bord de rayon de 4 em (environ 50 pixels).
Pour la prochaine étape du processus, nous allons tirer parti de certaines techniques CSS3 et obtenir l'effet de survol actif. Nous allons d'abord cacher la bulle en utilisant une opacité de 0. Ensuite, pour créer nos petites animations sympas, nous allons utiliser des transitions. Nous allons cibler le haut et l'opacité et lui dire de se calmer sur une période de 0,3 seconde (3 millisecondes). Ceux-ci auront besoin des préfixes de navigateur appliqués, y compris -o- et -ms-.
span position: absolute; en haut: -2em; à droite: 0.5em; largeur: 1.5em; hauteur: 1.5em; hauteur de ligne: 1.5em; text-align: center; ont-family: 'Helvetica Neue', Helvetica, sans serif; poids de police: gras; couleur: #fff; texte-ombre: 0px 1px 0px rgba (0,0,0, 0,15); -webkit-box-shadow: encart 0px 1px 0px rgba (255,255,255,35), 0px 1px 1px rgba (0,0,0, 0,2); -moz-box-shadow: encart 0px 1px 0px rgba (255,255,255, 0,35), 0px 1px 1px rgba (0,0,0, 0,2); box-shadow: incrément 0px 1px 0px rgba (255,255,255, 0,35), 0px 1px 1px rgba (0,0,0, 0,2); -webkit-border-radius: 4em; -moz-border-radius: 4em; border-radius: 4em; opacité: 0; filtre: alpha (opacité = 0); -webkit-transition: la plus grande facilité .3s, la facilité d'opacité .3s; -moz-transition: la plus grande facilité .3s, la facilité d'opacité .3s; -o-transition: la plus grande facilité .3s, la facilité d'opacité .3s; -ms-transition: la plus grande facilité .3s, la facilité d'opacité .3s; transition: .3s top-in-in, opacité .3s easy-in;
Le temps pour l'esthétique finale touche les bulles; ajout de CSS pour styliser les couleurs. Rappelez-vous les classes que nous avons ajoutées aux balises span? Cela rendra les choses assez simples, nous allons cibler chaque couleur, appliquer un dégradé et une couleur de bordure.
.rose image d'arrière-plan: -webkit-linear-gradient (haut, rgb (247, 130, 151), rgb (244, 102, 119)); image d'arrière-plan: -moz-linear-gradient (haut, rgb (247, 130, 151), rgb (244, 102, 119)); image d'arrière-plan: -o-linear-gradient (haut, rgb (247, 130, 151), rgb (244, 102, 119)); image d'arrière-plan: -ms-linear-gradient (haut, rgb (247, 130, 151), rgb (244, 102, 119)); image d'arrière-plan: gradient linéaire (haut, rgb (247, 130, 151), rgb (244, 102, 119)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f78297', EndColorStr = "# f46677"); bordure: 1px solide # ce4f5e; .yellow background-image: -webkit-linear-gradient (haut, rgb (254, 218, 113), rgb (254, 186, 72)); image d'arrière-plan: -moz-linear-gradient (haut, rgb (254, 218, 113), rgb (254, 186, 72)); image d'arrière-plan: -o-linéaire-gradient (en haut, rgb (254, 218, 113), rgb (254, 186, 72)); image d'arrière-plan: -ms-linear-gradient (haut, rgb (254, 218, 113), rgb (254, 186, 72)); image d'arrière-plan: gradient linéaire (haut, rgb (254, 218, 113), rgb (254, 186, 72)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); bordure: 1px solide # dea94f; .blue background-image: -webkit-linear-gradient (haut, rgb (172, 228, 248), rgb (108, 205, 243)); image d'arrière-plan: -moz-linear-gradient (haut, rgb (172, 228, 248), rgb (108, 205, 243)); image d'arrière-plan: -o-linéaire-gradient (haut, rgb (172, 228, 248), rgb (108, 205, 243)); image d'arrière-plan: -ms-linear-gradient (haut, rgb (172, 228, 248), rgb (108, 205, 243)); image d'arrière-plan: gradient linéaire (haut, rgb (172, 228, 248), rgb (108, 205, 243)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# ace4f8', EndColorStr = "# 6ccdf3"); bordure: solide 1px # 79b5cb;
Bien sûr, nos bulles sont superbement stylées mais totalement invisibles. Nous devrons ajouter des CSS pour permettre aux bulles de s'afficher en survol. Commencez par ajouter de la couleur aux balises d'ancrage lorsqu'elles sont survolées, juste un simple gris foncé. Nous allons ensuite cibler la plage lorsque son élément de liste parent est survolé. Nous allons ajouter une opacité de 1 pour la rendre visible et modifier la valeur de position supérieure pour la faire apparaître comme si elle glissait vers le bas.
.menu li: survolez un color: # 343434; .menu li: survolez une plage top: -1em; opacité: 1; filtre: alpha (opacité = 100);
Alors, qu'en est-il des attributs de données HTML5?
Content que tu aies demandé…
Pour créer notre menu avec des attributs de données HTML5, nous devons d'abord modifier notre balisage HTML. Nous allons utiliser des attributs personnalisés pour créer les bulles. HTML5 a introduit un nouvel attribut data où le nom de l'attribut peut être n'importe quoi tant qu'il fait au moins 1 caractère et commence par 'data-'.
Pour ce tutoriel, nous utiliserons «bulle de données». Cela nous permettra de stocker et d'accéder à nos valeurs de notification sans ajouter de structure de balisage inutile à notre document. Notez que nous avons également déplacé nos classes de couleur sur les balises d'ancrage..
- Profil
- Réglage
- Les notifications
- Connectez - Out
Comme nous n'allons plus utiliser les éléments span, vous devrez revenir à votre code CSS et supprimer les règles suivantes.
span position: absolute; en haut: -2em; à droite: 0.5em; largeur: 1.5em; hauteur: 1.5em; hauteur de ligne: 1.5em; text-align: center; font-family: "Helvetica Neue"; poids de police: gras; couleur: #fff; texte-ombre: 0px 1px 0px rgba (0,0,0, 0,15); -webkit-box-shadow: encart 0px 1px 0px rgba (255,255,255,35), 0px 1px 1px rgba (0,0,0, 0,2); -moz-box-shadow: encart 0px 1px 0px rgba (255,255,255, 0,35), 0px 1px 1px rgba (0,0,0, 0,2); box-shadow: incrément 0px 1px 0px rgba (255,255,255, 0,35), 0px 1px 1px rgba (0,0,0, 0,2); -webkit-border-radius: 4em; -moz-border-radius: 4em; border-radius: 4em; opacité: 0; filtre: alpha (opacité = 0); -webkit-transition: la plus grande facilité .3s, la facilité d'opacité .3s; -moz-transition: la plus grande facilité .3s, la facilité d'opacité .3s; -o-transition: la plus grande facilité .3s, la facilité d'opacité .3s; -ms-transition: la plus grande facilité .3s, la facilité d'opacité .3s; transition: .3s top-in-in, opacité .3s easy-in; .pink background-image: -webkit-linear-gradient (haut, rgb (247, 130, 151), rgb (244, 102, 119)); image d'arrière-plan: -moz-linear-gradient (haut, rgb (247, 130, 151), rgb (244, 102, 119)); image d'arrière-plan: -o-linear-gradient (haut, rgb (247, 130, 151), rgb (244, 102, 119)); image d'arrière-plan: -ms-linear-gradient (haut, rgb (247, 130, 151), rgb (244, 102, 119)); image d'arrière-plan: gradient linéaire (haut, rgb (247, 130, 151), rgb (244, 102, 119)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f78297', EndColorStr = "# f46677"); bordure: 1px solide # ce4f5e; .yellow background-image: -webkit-linear-gradient (haut, rgb (254, 218, 113), rgb (254, 186, 72)); image d'arrière-plan: -moz-linear-gradient (haut, rgb (254, 218, 113), rgb (254, 186, 72)); image d'arrière-plan: -o-linéaire-gradient (en haut, rgb (254, 218, 113), rgb (254, 186, 72)); image d'arrière-plan: -ms-linear-gradient (haut, rgb (254, 218, 113), rgb (254, 186, 72)); image d'arrière-plan: gradient linéaire (haut, rgb (254, 218, 113), rgb (254, 186, 72)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); bordure: 1px solide # dea94f; .blue background-image: -webkit-linear-gradient (haut, rgb (172, 228, 248), rgb (108, 205, 243)); image d'arrière-plan: -moz-linear-gradient (haut, rgb (172, 228, 248), rgb (108, 205, 243)); image d'arrière-plan: -o-linéaire-gradient (haut, rgb (172, 228, 248), rgb (108, 205, 243)); image d'arrière-plan: -ms-linear-gradient (haut, rgb (172, 228, 248), rgb (108, 205, 243)); image d'arrière-plan: gradient linéaire (haut, rgb (172, 228, 248), rgb (108, 205, 243)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# ace4f8', EndColorStr = "# 6ccdf3"); bordure: solide 1px # 79b5cb; .menu li: survolez une plage top: -1em; opacité: 1; filtre: alpha (opacité = 100);
Maintenant, ciblons plutôt nos attributs de données, nous devrons ajouter quelques règles à notre CSS.
Cela ressemblera beaucoup à ce que nous avons utilisé pour nos éléments de portée. Cette fois cependant, nous allons cibler les pseudo-éléments the: after des balises d'ancrage avec un attribut "data-bubble". Pour ce faire, nous utilisons des sélecteurs d'attributs CSS.
Comme nous utilisons un: après le pseudo (et générant ainsi le contenu), nous devrons y définir du contenu: ". Une fois encore, nous utiliserons notre attribut personnalisé que nous avons créé dans notre code HTML et insérerons celui-ci..
Encore une fois, pour gérer la visibilité de notre bulle, nous lui donnerons une opacité de 1 lorsque le lien sera survolé. Malheureusement, en raison des limitations liées aux sélecteurs d'attributs, nous ne pouvons pas les animer avec CSS lui-même..
.menu li a [bulle de données]: après contenu: attr (bulle de données); position: absolue; en haut: -1,25em; à droite: 0.5em; largeur: 1.5em; hauteur: 1.5em; hauteur de ligne: 1.5em; text-align: center; font-family: "Helvetica Neue"; poids de police: gras; couleur: #fff; texte-ombre: 0px 1px 0px rgba (0,0,0, 0,15); -webkit-box-shadow: encart 0px 1px 0px rgba (255,255,255,35), 0px 1px 1px rgba (0,0,0, 0,2); -moz-box-shadow: encart 0px 1px 0px rgba (255,255,255, 0,35), 0px 1px 1px rgba (0,0,0, 0,2); box-shadow: incrément 0px 1px 0px rgba (255,255,255, 0,35), 0px 1px 1px rgba (0,0,0, 0,2); -webkit-border-radius: 4em; -moz-border-radius: 4em; border-radius: 4em; opacité: 0; filtre: alpha (opacité = 0); .menu li: survolez une [bulle de données]: after opacity: 1; filtre: alpha (opacité = 100);
Enfin, nous devons styliser le contenu généré au sein des différentes classes afin de pouvoir changer facilement les couleurs (exactement comme nous l'avons fait avec les éléments span)..
a.pink [bulle de données]: après image de fond: -webkit-linear-gradient (top, rgb (247, 130, 151), rgb (244, 102, 119)); image d'arrière-plan: -moz-linear-gradient (haut, rgb (247, 130, 151), rgb (244, 102, 119)); image d'arrière-plan: -o-linear-gradient (haut, rgb (247, 130, 151), rgb (244, 102, 119)); image d'arrière-plan: -ms-linear-gradient (haut, rgb (247, 130, 151), rgb (244, 102, 119)); image d'arrière-plan: gradient linéaire (haut, rgb (247, 130, 151), rgb (244, 102, 119)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f78297', EndColorStr = "# f46677"); bordure: 1px solide # ce4f5e; a.yellow [bulle de données]: après image d'arrière-plan: -webkit-linear-gradient (haut, rgb (254, 218, 113), rgb (254, 186, 72)); image d'arrière-plan: -moz-linear-gradient (haut, rgb (254, 218, 113), rgb (254, 186, 72)); image d'arrière-plan: -o-linéaire-gradient (en haut, rgb (254, 218, 113), rgb (254, 186, 72)); image d'arrière-plan: -ms-linear-gradient (haut, rgb (254, 218, 113), rgb (254, 186, 72)); image d'arrière-plan: gradient linéaire (haut, rgb (254, 218, 113), rgb (254, 186, 72)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); bordure: 1px solide # dea94f; a.blue [bulle de données]: after background-image: -webkit-linear-gradient (top, rgb (172, 228, 248), rgb (108, 205, 243)); image d'arrière-plan: -moz-linear-gradient (haut, rgb (172, 228, 248), rgb (108, 205, 243)); image d'arrière-plan: -o-linéaire-gradient (haut, rgb (172, 228, 248), rgb (108, 205, 243)); image d'arrière-plan: -ms-linear-gradient (haut, rgb (172, 228, 248), rgb (108, 205, 243)); image d'arrière-plan: gradient linéaire (haut, rgb (172, 228, 248), rgb (108, 205, 243)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# ace4f8', EndColorStr = "# 6ccdf3"); bordure: solide 1px # 79b5cb;
Nous avons réussi à créer un menu avec quelques bulles de notification soignées et à les animer! Nous sommes même allés plus loin et avons tiré parti des nouvelles techniques de HTML5..
J'espère que vous avez apprécié ce tutoriel, merci d'avoir lu!
Accentsconagua