Créez et intégrez un menu blocs 3D en CSS/HTML
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Créez et intégrez un menu blocs 3D en CSS/HTML

David Felix-faure
3,00€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tuto CSS et HTML, vous allez apprendre à créer un menu avec une impression de blocs 3D qui se déplacent lors du passage de la souris. Je vous invite à regarder l?extrait du tuto pour voir le résultat que nous allons obtenir. Les étapes du tuto :

  • Création de la structure HTML de la page.
  • Stylisation de l?environnement du menu en CSS.
  • Création du menu en CSS avec une illusion de blocs 3D.
  • Mise en place de l?impression de 3D lors du passage de la souris (hover).
  • Rajout d?autres aspects du menu (page active, transitions,?)
  • Création de l?effet 3D sur le logo et de l?effet de texte gravé sur le texte des pages grâce à l?effet « text shadow ».
  • Faire en sorte que le menu soit compatible avec tous les navigateurs, y compris Internet Explorer 6 !
  • BONUS : Modification de la feuille de style pour transformer le menu horizontal en menu vertical.

J?ai apporté un grand soin sur la compatibilité de ce menu. Il est compatible avec tous les navigateurs, même Internet Explorer 6. Seul l?effet de transition ne sera pas compatible avec les anciennes versions d?Internet Explorer, mais c?est loin d?être l?aspect le plus important du tuto. De plus, dans le domaine de la compatibilité je vous ferez aussi découvrir quelques sites très utile aux webdesigners.

A la fin de ce tuto vous saurez non seulement créer un menu avec une illusion de blocs 3D mais aussi l?adapter afin de pouvoir créer d?autres types de menus. En effet, j?explique tous les paramètres de style que nous utilisons. Je fournis bien entendu tous les fichiers utilisés dans ce tuto pour que vous n?ayez pas tout à réécrire. J?espère que ce tuto vous plaira!

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Introduction
Leçon 2
Conception du menu
Leçon 3
Compatibilité
Leçon 4
Bonus

Plan détaillé du cours

Leçon 1Introduction
02m
Leçon 2Conception du menu
59m01s
Leçon 3Compatibilité
15m13s
Leçon 4Bonus
03m44s

Aperçus

Avis des apprenants

Détail des avis
87
Apprenants
5
Commentaires
5/5
Note moyenne
5/5
5
4/5
0
3/5
0
2/5
0
1/5
0
Jean Philippe
Jean Philippe
Publié le 12/07/2021
Bonjour, ce tutoriel date un peu, mais il est très bien expliqué et agréable à suivre ...
Jean-Paul Dubuisson
Jean-Paul Dubuisson
Publié le 31/05/2018
Merci pour ce très intéressant tutoriel. Les explications sont précises et claires. Très agréable.
Lepresident
Lepresident
Publié le 23/06/2012
Pas mal du tout ! Superbe résultat;) On comprend tous ce que l'on fait et ça c'est cool !

Payer plus tard

Prix d'achat : 3,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1359 tutos gratuits

Notre politique de protection des données