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

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é.