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!
Table des matières de cette formation CSS (durée : 1h19m)
-
- Introduction 00:02:00
- Conception du menu 00:59:01
- Compatibilité 00:15:13
- Bonus 00:03:44
- Fichiers sourcestélécharger
- Certificat
Formateur : David Felix-faure
-
Bonjour, ce tutoriel date un peu, mais il est très bien expliqué et agréable à suivre ...
-
Merci pour ce très intéressant tutoriel. Les explications sont précises et claires. Très agréable.
-
Pas mal du tout ! Superbe résultat;) On comprend tous ce que l'on fait et ça c'est cool !
note moyenne
avis laissés