Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Créer des boutons réutilisables

Testez gratuitement nos 1337 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Ici, vous allez créer les boutons de l'en-tête. Il s'agit de pouvoir les réutiliser à d'autres endroits de votre page.

Transcription

Dans cette vidéo, nous allons nous concentrer sur l'apparence des boutons de notre site. Alors des boutons, j'en ai un petit peu partout dans ma page, j'en ai trois dans l'en-tête, j'en ai également un dans ma zone de navigation, et je pourrais avoir besoin d'autres boutons ailleurs dans ma page. Donc je vais essayer de créer des styles CSS, que je puisse réutiliser un petit peu partout dans ma page, là où j'aurais besoin d'un bouton. Eh bien pour ça, je vais devoir tenir compte d'une différence, entre un bouton utilisé seul, ou des bouton que j'utilise en groupe. Alors un bouton utilisé seul, vous le voyez qu'il a des coins arrondis ici, tout autour du bouton. Tandis que les boutons que j'utilise en groupe, eh bien, les coins arrondis se situent autour du groupe, et non pas autour de chacun des boutons qui composent ce groupe. Donc dans ma feuille de style, eh bien, j'ai défini deux nouvelles notions, la notion de groupe de boutons, que j'ai appelé ici avec cette classe button-group, et puis la notion de bouton, avec une autre classe que j'ai appelé button, et vous voyez que j'ai déjà prévu la possibilité de faire des effets de survols, sur ces boutons. Je vous propose d'arrêter la vidéo quelques instants, et de recopier ces nouvelles classes dans votre propre feuille de styles. Alors une fois que c'est fait, je vais me rendre dans ma page HTML, et je vais définir ici ma balise UL comme étant un button group. Je vais également définir chacun de mes éléments LI, comme étant des boutons, donc class=button ici, sur chacun des éléments LI. Et au niveau du bouton qui se situe dans la zone de navigation, eh bien celui-là il est dans un paragraphe qui est ici, et c'est le paragraphe ici, que je définis avec la classe button. Donc je vais sauvegarder ma page HTML, revenir au niveau de mon navigateur, rafraîchir ma page, et vous voyez donc que ces différentes classes, affectent déjà mes différentes icônes. Alors maintenant, je vais me rendre au niveau de photoshop, parce que j'ai envie de découvrir quels sont les caractéristiques, du caractère qui se trouve dans l'icône, puisqu'il s'agit bien d'un caractère que j'ai été rechercher, au niveau de la police de caractère FontAwesome. Donc pour découvrir ça, je vais prendre l'outil texte de photoshop. Je vais cliquer ici sur l'une de ces icônes et là, j'apprends que ça vient bien de la police de caractère FontAwesome, que la taille de ce caractère est de 30 points, et la couleur de ce caractère est 333, c'est-à-dire mon gris foncé. Donc je vais rapporter ça, évidemment, au niveau de ma feuille de style, donc au niveau de mon bouton. Eh bien la couleur de mon bouton, c'est bien 333, comme ceci. Et puis le Font size, il est bien de 30 points, comme ceci. Je sauvegarde ma feuille de style, je retourne dans mon navigateur. Et voilà donc la taille et la couleur de mes icônes, qui sont correctement mises en place. Maintenant, je vais définir la dimension de ces éléments, donc pour ça je vais reprendre la même technique que tout à l'heure, je vais prendre mon outil de déplacement, cliquer sur l'un de ces boutons, CMD T, ou CTRL T, comme transformation. Et donc ici, au dessus, dans la zone supérieure de Photoshop, eh bien, j'apprends que mon bouton est, en fait, un carré de 60 pixels de côté. N'oubliez pas que si Photoshop vous montre ici des dimensions en pourcents, ou dans d'autres unités de mesure, eh bien, vous faites un clic droit ici au niveau de ces valeurs, pour demander l'unité de mesure que vous désirez, bien-sûr. Je vais annuler les outils de transformation, et donc venir reporter ici, au niveau de ma feuille de style, eh bien, une largeur de 60 pixels, comme ceci. Et, une hauteur de 60 pixels également. Alors, je retourne dans mon navigateur, et là, quand je rafraichis, ça n'a pas l'air de beaucoup fonctionner, pourquoi ? Eh bien parce que quand je retourne dans ma feuille de style, regardez, je m'adresse à un élément A. Or l'élément A, c'est élément de niveau inline, donc il ne répond pas correctement à toutes ces commandes de largeurs et de hauteurs, eh bien qu'à cela tienne, je vais demander au CCS de considérer ces éléments, comme étant des blocs. Je sauvegarde, je reviens au niveau de mon navigateur, et vous allez voir maintenant que la taille de ces icônes est, maintenant, correctement mise en place. Donc, je vais en profiter également pour définir mon effet de survol, vous voyez que pour l'effet de suvol, j'ai besoin de mon bleu clair, donc je reviens dans ma feuille de style, et je définis ici mon background color, eh bien, mon bleu clair que je vais aller chercher ici. Je copie et je recolle ceci au dessus. Je sauvegarde, je reviens dans mon navigateur. Je rafraîchis, regardez, j'ai bien des effets de survol ici, sur mes icônes. Remarquez, également, dans la feuille de style, eh bien que ces boutons ont un bord de radius de 5 pixels. Je suis presque arrivé à la fin de ce que je veux faire avec les boutons, j'ai encore deux choses à faire. Il s'agit de placer correctement ces boutons les uns à côté des autres, et puis de finaliser tout cela, mais pour ça, je vous donne rendez-vous dans la prochaine vidéo.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Passez d’une maquette au format Photoshop vers une page web interactive en HTML5 et CSS. Découvrez des outils et des techniques indispensables dans votre travail d’intégrateur.

3h16 (43 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !