article(s) dans votre panier VOIR

Placer les styles d’une forme sur un élément de liste avec Photoshop CC

  • Vidéo 58 sur 81
  • 6h09 de formation
  • 81 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Placer les styles d’une forme sur un élément de liste pour un menu dans Dreamweaver
00:00 / 04:34
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
49,90€
  • Téléchargement + VOD à vie
  • Exercice / Validation des acquis
  • Accès uniquement à cette formation

Sommaire de la formation

Détails de la formation

Dans ce tuto Photoshop, le formateur va créer le menu dans le bloc de navigation.

Avant de commencer la vidéo, il avait déjà préparé en commentaire le menu dans la balise nav mais lorsqu'il active, le menu prend le formatage par défaut et ne se retrouve pas correctement intégré dans la page. Le menu possède des puces et est aligné verticalement au lieu d'être d'horizontale. Lorsqu'on observe le code, on remarque que chacune des entrées de la liste possède un lien qui possède une classe "lien". Dans la partie CSS du code, il active un formatage CSS qu'il a écrit plus tôt qui permet de réorganiser les liens qui sont à présent alignés horizontalement et de couleurs blanches non soulignées. Le premier style ul permet d'afficher la liste sans puces, le style de li pour liste est indiqué comme alignés et un formatage configure l'aspect des liens. Arzhur Caouissin veut ajouter le style graphique créé sous Photoshop à chacun des liens. Il retourne dans son document Photoshop pour copier le style CSS du premier bouton et il colle dans le style le code provisoirement.

Pour maintenant donner aux boutons la forme graphique, il va récupérer dans le code uniquement le style graphique des boutons créés sous Photoshop et va les coller dans le formatage des liens du menu. Il supprime maintenant le style, enregistre le document et observe le rendu sur l'ordinateur. Il remarque que l'ombre portée est trop forte, il va donc la régler dans la ligne box-shadow l'opacité de l'ombre en mettant rgba et en ajoutant en dernier la valeur de l'opacité.