2,00

Tuto Comment aligner des logos proprement en CSS sans les retoucher ? avec CSS

2,00

  • Une formation vidéo de 18m37s
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Comment aligner des logos proprement en CSS sans les retoucher ?

ajouter ce cours aux favoris retirer ce cours des favoris

Retrouvez cette formation dans le bundle :

Bundle CSS : 10 astuces & exercices pour vous perfectionner

-17% de réduction

voir les détails du bundle


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 !


Formateur : Adrien Gazaix

Adrien Gazaix a publié 138 tutoriels et obtenu une note moyenne de 4,8/5 sur 52 223 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com. Voir les autres formations de Adrien Gazaix

5,0
note moyenne

4
avis laissés
5 étoiles
4
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de marcovientmechercher laissé le 22/03/2021
    C'est simple, rapide concret, parfait !

  • 5
    avis de ericdu13 laissé le 16/03/2021
    Merci Adrien !!! Toujours au top ;)

  • 5
    avis de alphazoom laissé le 10/03/2021
    Top, merci pour ces astuces bien pratiques !

  • 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.
Parcours Developpeur Front End
accédez à plus de 1356 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données