$ 12.00

Tuto 12 Animations d'icônes Hamburger avec CSS

$ 12.00

  • Une formation vidéo de 1h12m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

Voici un tuto vidéo pour apprendre à réaliser 12 animations en CSS. Pour apprendre en pratiquant, nous apprendrons à animer des icônes menu hamburger (bien entendu les animations CSS que nous allons apprendre, pourront être employées à autre chose).

Une icône Hamburger, c'est quoi et pourquoi apprendre à l'animer ?

C'est en général ces trois barres les unes au dessus des autres qui signifient que nous sommes en présence d'un menu que l'on peut ouvrir.
Il y en a quasiment obligatoirement une par site, et on peut les animer !

Le but de ce cours en ligne, n'est pas de collectionner les animations d'icônes, même si c'est assez fun à réaliser, mais bien de devenir meilleur en CSS en proposant notamment un effet de surprise pour votre visiteur, au survol d'un élément.
En effet, pour ce tutoriel, nous allons utiliser des transitions, des animations, utilisez les axes, effectuer des rotations, créer des pseudos éléments, ou encore utiliser des sélecteurs avancés qui sont bien pratiques dans certains cas précis !

Les fichiers sources du cours sont fournis, et vous pourrez soumettre vos questions dans le salon d'entraide du cours si vous êtes bloqués à une étape. 
Ça vous tente ? Rendez-vous de l'autre côté pour commencer à coder !
 

Table des matières de cette formation CSS (durée : 1h12m)

  • Introduction
    • Introduction gratuit 00:00:25
    • Code source 00:01:37
  • Construction de notre container à animation
    • Partie HTML gratuit 00:03:13
    • Partie CSS 00:08:29
  • Les Animations
    • Animation 1 : Croix basique 00:06:13
    • Animation 2 : Croix droite 00:02:22
    • Animation 3 : Rapprochement 00:01:24
    • Animation 4 : Caret vers le bas 00:04:31
    • Animation 5 : Multiples anims 00:06:18
    • Animation 6 : Slide 00:01:24
    • Animation 7 00:03:37
    • Animation 8 : Cercle avec pseudo élément 00:09:50
    • Animation 9 : Apparition 00:03:27
    • Animation 10 : Toupie 00:02:11
    • Animation 11 : Pseudo el + multiples anims 00:08:31
    • Animation 12 : Multi barres 00:08:42



Formateur : Enzo Ustariz

Enzo Ustariz a publié 34 tutoriels et obtenu une note moyenne de 4,9/5 sur 649 tutoriels vendus. Voir les autres formations de Enzo Ustariz

5,0
note moyenne

2
avis laissés
5 étoiles
2
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de jc-tottgroup laissé le 01/02/2020
    Excellent tuto !! des videos claires !! des explications claires !!! Franchement cela permet de bien comprendre certaines notions de CSS avec un cas simple comme le menu hamburger. Encore bravo.

  • 5
    avis de membre-3200-4567 laissé le 16/01/2020
    Très bon tuto ! premièrement cela m'a éclairé davantage sur le Cascade and inheritance en css , en suite j'ai beaucoup appris sur , transition chaining, nth-child(even), nth-child(odd), nth-child(1, etc...), ::before et ::after . Cela m'a permis de renforcer mes bases en CSS Un grand bravo ! surtout pour les explications car c'est le plus important merci encore Enzo :)
    "Merci beaucoup pour ce retour, j'ai beaucoup aimé faire ce cours, j'en prévois d'autres bientôt ;)"

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    CSS
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
accédez à plus de 1156 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données