Dans ce tuto CSS, apprenez à créer une barre sociale (également appelé signet ou bookmark) facilement en CSS3.
Dans un premier temps, nous verrons la mise en place générale de notre menu puis nous appliquerons dans un cas concret les nouvelles propriétés CSS3. Notions abordées dans ce tutorial :
- Les listes non-ordonnées
- propriété z-index
- propriété opacity
- propriété transition
- ...
Je répondrai rapidement à toutes vos questions. Bon tuto!
- Fichiers sourcestélécharger
- Certificat
Formateur : Jérémy Dumoulin
-
Un peu de tatonnement et de désordre mais on arrive à un final opérationnel. Ce tuto doit dater ou bien le doctype et le meta charset ne sont pas bon. <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Translation//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> ------------------- Il aurait fallu mettre simplement : <!DOCTYPE HTML> <html lang="fr"> <head> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css" type="text/css" /> </head> Hormis ce détail, j'aime bien le mouvement "caché-montré" des icones. Hélas comme les autres l'ont signalé, la transition ne fonctionne pas. On peut aussi (à l'heure actuelle du html5) éviter les images et les remplacer par des fontawesome (https://fontawesome.com/) qui fonctionne avec des class. En tout cas merci pour ce tuto,
-
Super tuto par contre l'animation en transition ease ne fonctionne pas. dommage.
-
Exactement ce que je cherchais.
note moyenne
avis laissés