Comment aligner des logos proprement en CSS sans les retoucher ?
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Comment aligner des logos proprement en CSS sans les retoucher ?

Adrien Gazaix
1,99€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tuto CSS en vidéo, nous allons voir ensemble comment aligner des logos proprement grâce à la puissance du CSS.

Pour cela, nous prendrons pour exemple plusieurs logos de tailles et hauteurs différentes et de formats différents pour essayer de palier au plus de cas possibles.
Cette astuce vous permettra de contrôler l'affichage des logos sur votre site web, par exemple sur une partie "partenaires" qui serait administrable depuis un back office et où vous ne savez pas quels types de logos vont être envoyés par le client.

Au programme de ce tuto comment aligner proprement des logos en CSS?

Voici les notions que nous allons parcourir dans le cours : 

  • Faire le tour des fichiers sources,
  • Créer la structure HTML pour afficher les logos,
  • Utiliser la propriété "flex" pour les aligner cote à cote,
  • Choisir une largeur fixe,
  • Faire en sorte de garder le bon ratio hauteur/largeur quoi qu'il arrive,
  • Gérer le cas particulier des .jpg pour avoir une hauteur automatique,
  • Encadrer chaque logo d'une box & les espacer les uns des autres,
  • Rendre le tout responsive sur mobile/tablette,
  • Cibler uniquement les fichiers de type .jpg en CSS,
  • Supprimer le fond blanc des fichiers .jpg sans retoucher l'image dans un logiciel graphique,
  • Inverser la couleur d'un SVG en appliquant un filtre CSS.

Je vous invite à regarder l'extrait vidéo pour vous rendre compte du résultat final.

Les fichiers sources contenant les fichiers de départ ainsi que les fichiers finaux sont inclus avec le tuto.
N'hésitez pas à me soumettre des questions dans le salon d'entraide si vous rencontrer des difficultés pendant ou après le visionnage de la vidéo.

Bon tuto !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Aligner des logos proprement en CSS

Plan détaillé du cours

Leçon 1Aligner des logos proprement en CSS
18m37

Avis des apprenants

Détail des avis
98
Apprenants
4
Commentaires
5/5
Note moyenne
5/5
4
4/5
0
3/5
0
2/5
0
1/5
0
Marc Molon
Marc Molon
Publié le 22/03/2021
C'est simple, rapide concret, parfait !
Eric Reynaud
Eric Reynaud
Publié le 16/03/2021
Merci Adrien !!! Toujours au top ;)
Eric Perren
Eric Perren
Publié le 10/03/2021
Top, merci pour ces astuces bien pratiques !

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

CSS

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Fichiers de départ & Fichiers finaux.

Payer plus tard

Prix d'achat : 1,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 1426 tutos gratuits

Notre politique de protection des données