Icônes graphiques Css pour barres de menu

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Icônes graphiques Css

Avec cette nouvelle astuce sur les styles Css, nous allons découvrir comment enrichir graphiquement les pages des sites Web. Il s'agit de jeux d'icônes issus d'une Api Google. Et l'intérêt majeur est que ces icônes sont des polices, soit des formes vectorielles. En d'autres termes, vous pouvez créer des pages Html intégralement graphiques mais qui ne pèsent rien, donc qui se chargent vite.



Dans l'exemple finalisé illustré par la capture, nous simulons une petite barre de menu. Chaque catégorie est illustrée explicitement par une icône graphique représentative. Au passage de la souris, l'icône change de couleur et s'abaisse quelque peu. Et comme nous l'avons évoqué, pour cette réalisation, aucune image n'est nécessaire.

Page Web au téléchargement
Pour la mise en place de cette astuce, nous suggérons de débuter à partir d'une page Web offrant déjà de nombreux attributs.

• Télécharger le fichier compressé icones-graphiques-css.rar en cliquant sur ce lien,
• Le décompresser dans le dossier de votre choix,

Le fichier de la page Web est nommé index.htm. Il est accompagné de deux fichiers de type texte et de ses ressources dans les sous dossiers. Ces fichiers de textes hébergent respectivement une référence et un style Css fondamentaux pour l'accomplissement de cette solution.

• Double cliquer sur le fichier index.htm pour l'exécuter dans le navigateur Web pas défaut,

Au premier chargement, la surprise est de taille. Certes, la barre demenu est présente. Mais en lieu et place des icônes graphiques, ce sont des termes qui trônent. Et cette indication est plutôt rassurante. Elle signifie qu'à eux seuls, ils doivent représenter les icônes destinées à les remplacer. Mais pour cela, il faut connaître la technique par les styles Css.

• A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
• Dans le menu contextuel qui surgit, choisir de l'ouvrir avec un éditeur comme le Notepad ++,

En haut de la structure Html, vous notez la référence aux feuilles de styles :

...
<link rel="stylesheet" href="css/mes-styles.css">
<link rel="stylesheet" href="css/les-styles.css">
...

La première gère l'organisation globale de la page. Nous allons exploiter la seconde pour donner vie à ces icônes graphiques.

Plus bas dans le code Html et plus spécifiquement dans le calque d'identifiant bMenu, vous notez l'énumération de ces termes représentatifs. Ils sont inscrits dans une balise Html on ne peut plus classique.

...
<div id="auCentre">
<!--
Implémentation
-->
<div id="bMenu">
<i class="materiel icone">home</i>
<i class="materiel icone">search</i>
<i class="materiel icone">cloud</i>
<i class="materiel icone">delete</i>
<i class="materiel icone">menu</i>
<i class="materiel icone">mouse</i>
<i class="materiel icone">person</i>
<i class="materiel icone">close</i>
<i class="materiel icone">refresh</i>
<i class="materiel icone">arrow_back</i>
<i class="materiel icone">arrow_forward</i>
<i class="materiel icone">directions_car</i>
<i class="materiel icone">local_shipping</i>
<i class="materiel icone">local_airport</i>
</div>
 
</div>
...

Chacune de ces balises est associée à deux styles. Le style materiel doit faire référence à l'Api Google pour transformer ces mots clés en icônes, tout en leur attribuant certains réglages. Puis, nous implémenterons le style icone pour faire réagir ces éléments graphiques au passage de la souris.

• A la racine du dossier de décompression, double cliquer sur le sous dossier Css,
• Dès lors, cliquer droit sur la feuille de styles les-styles.css,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad ++,

Deux styles sont déjà présents, bMenu et icone. Ils se chargent de réglages de base.

Référence à l'API des icônes
Maintenant, par le biais d'une règle Css, nous devons pointer en ligne sur la librairie archivant ces icônes représentées par ces mots clés.

• A la racine du dossier de décompression, double cliquer sur le fichier reference-api.txt,
• Dès lors, réaliser le raccourci CTRL + A pour sélectionner toute la règle,
• La copier à l'aide du raccourci clavier CTRL + C,
• Revenir dans l'éditeur Notepad ++ sur la feuille de styles,
• Coller la règle par exemple entre le style bMenu et le style icone,

@font-face
{
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons...) format('woff2');
}

Les attributs font-family et src retiennent notre attention. Le premier définit le nom de la galerie souhaitée (Material Icons) pour créer ces icônes. Le deuxième indique l'emplacement de la source hébergeant cette galerie. Avec quelques recherches sur le Web, nous pouvons très vite connaître les autres noms de librairies à disposition.

Bien sûr, cette règle sert de référence à exploiter, ce qui n'est pas encore le cas. C'est la raison pour laquelle, aucune différence ne serait à observer sur la page Web, si d'aventure vous actualisiez le cache du navigateur.

Liaison avec la librairie des icônes
C'est le style materiel affecté aux éléments Html des mots clés qui doit maintenant se charger d'exploiter cette règle pour profiter de la transformation graphique.

• A la racine du dossier de décompression, double cliquer sur le fichier style-materiel.txt,
• Sélectionner l'intégralité du style avec le raccourci clavier CTRL + A,
• Le copier avec le raccourci clavier CTRL + C,
• Revenir sur la feuille de styles et le coller après la règle, juste avant le style icone,

.materiel
{
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 40px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
}

Tout d'abord, vous notez que le lien est établi avec la règle par l'attribut font-family. Il désigne la librairie précédemment déclarée à exploiter. C'est un peu comme le principe de l'instanciation de classe en programmation orientée objets. Et comme vous pouvez le voir, la majorité des réglages s'opère sur le texte, notamment par le biais d'attributs de police. C'est ce que nous annoncions, ces icônes bien que graphiques en apparence, sont ni plus ni moins que des éléments de texte spécifiques. C'est la raison pour laquelle elles sont précieuses pour enrichir les pages Web tout en optimisant les ressources dont notamment les temps de téléchargement. Mais il nous reste encore à constater l'impact.

• Enregistrer les modifications (CTRL + S) et revenir sur le navigateur Web,
• Actualiser son cache avec le raccourci clavier CTRL + F5,

Comme vous pouvez l'apprécier, le résultat est plutôt magique. Une règle et un style ont suffi à complètement métamorphoser la présentation. Et encore, de nombreux attributs ne sont pas nécessaires dans le style que nous avons collé.

Tout en bas du style, les attributs direction, word-wrap et white-space peuvent être supprimés. Il s'agit de réglages de police comme la direction du texte, du gauche à droite par exemple et de suppression des sauts de ligne et des blancs. Avec les icônes, ces paramétrages ne sont plus d'actualité. De même, au-dessus de l'attribut display, les attributs text-transform et letter-spacing peuvent être éliminés. En effet, l'espacement entre les caractères ou encore la décoration du texte n'importe plus. Enfin, l'attribut font-weight pour le style gras peut être effacé. Il en va de même pour les attributs font-style et font-weight dans la règle. Il en résulte une construction largement épurée et une fois encore la preuve que grâce à ces librairies, la transformation en pages graphiques est un jeu d'enfants :

@font-face
{
font-family: 'Material Icons';
src: url(https://fonts.gstatic.com/s/materialicons/...) format('woff2');
}

.materiel
{
font-family: 'Material Icons';
font-style: normal;
font-size: 40px;
line-height: 1;
display: inline-block;
}

Pour information, nous avons conservé l'attribut display réglé sur la valeur inline-block afin de conserver les éléments graphiques les uns à côté des autres. Si vous actualisez la page Web, vous constatez qu'aucune différence n'est à observer.

Animation des icônes
Désormais, nous souhaitons faire réagir ces icônes au passage de la souris. Elles doivent se parer de rouge et abaisser leurs positions. Mais nous souhaitons que le changement de couleur se fasse progressivement. Nous avons donc besoin de gérer une transition Css comme nous l'avons appris dans les volets précédents. Et c'est le second style nommé icone qui est concerné. Il contribue déjà à déterminer l'état au départ. Avec l'attribut hover en style dérivé, il doit définir l'état de fin.

• A la fin du style icone, ajouter l'instruction Css suivante :

.icone
{
margin:5px;
cursor:pointer;
transition:color 1s;
}

Nous indiquons donc que la transition doit s'opérer sur une durée d'une seconde et doit concerner le changement de couleur (color). Il nous reste donc à définir l'état de chaque icône après le passage de la souris.

• Créer le style dérivé suivant :

.icone:hover
{

}

hover est un gestionnaire d'événements. C'est lui qui va détecter le survol de la souris et déclencher les réglages que nous devons opérer dans ce nouveau style.

• Entre les bornes de ce nouveau style, ajouter les instructions Css suivantes :

.icone:hover
{
color:red;
position:relative;
top:10px;
}

Nous changeons la couleur pour un rouge. Nous modifions l'attribut position pour pouvoir déplacer l'icône. De fait, nous l'abaissons de 10 pixels au passage de la souris grâce à l'attribut top.

• Enregistrer les modifications et revenir sur le navigateur Web,
• Actualiser son cache avec le raccourci clavier CTRL + F5,
• Puis, passer la souris sur plusieurs icônes,

Comme vous pouvez le voir, les icônes réagissent parfaitement au passage de la souris. En même temps qu'elles s'abaissent, leur changement de couleur est opéré progressivement sur une durée d'une seconde. Elles sont donc explicitement mises en valeur. Il ne resterait plus qu'à créer les liens des pages concernées et à définir des info-bulles explicatives.