CSS

Qu’est-ce qu’un framework ? Les frameworks CSS sont mieux décrits comme des frameworks frontaux. Ce sont des collections des langages informatiques HTML, CSS et JavaScript qui sont utilisés pour coder diverses applications, principalement des sites Web. Les frameworks rationalisent le développement en créant des mises en page qui peuvent être modifiées rapidement et facilement. Bien que tous les frameworks soient différents, ils utilisent généralement le HTML, le CSS et le JavaScript pour créer et modifier le contenu dans un système de grille. En utilisant un framework, les développeurs ne doivent pas créer un site Web entièrement à partir de zéro. Considérez le site Web comme une maison et le framework comme une fondation. Il est plus facile de construire la maison si les fondations sont déjà en place. 5 frameworks CSS à surveiller en 2022 Bootstrap Bootstrap est l’un des frameworks les plus populaires. Il est souvent considéré comme le meilleur cadre de développement frontal construit avec HTML, CSS et Javascript. Il utilise une grille à 12 colonnes et offre des composants interactifs utiles tels que l’onglet, le carrousel, l’accordéon et la navigation réactive, pour n’en citer que quelques-uns. En raison de sa popularité, Bootstrap dispose d’une communauté massive avec beaucoup de documentation fournissant aux utilisateurs un large éventail de ressources lors du développement. Foundation Foundation est un autre framework frontal utilisé pour créer des conceptions réactives avec une grille à 12 colonnes. Il est très accessible et permet de développer facilement des sites Web complexes. Il n’est pas seulement destiné au développement de sites Web. Foundation dispose d’une version de messagerie qui permet de créer des modèles d’e-mails réactifs, rapidement et facilement. Skeleton Skeleton est un framework simple qui est connu pour ses vitesses de chargement rapides sur tous les appareils. Il a été conçu en tenant compte des appareils mobiles. Avec seulement 400 lignes de code, il a été conçu pour se charger rapidement, sans compilation ni installation nécessaires. Si vous avez un projet simple et que vous recherchez un framework rationalisé sans l’utilité de frameworks plus importants, alors Skeleton pourrait être le framework qu’il vous faut. HTML5 Boilerplate HTML5 Boilerplate a été introduit il y a quelques années, mais aujourd’hui encore, il reste l’un des principaux frameworks. Doté d’outils élémentaires tels que HTML, JS, CSS et images, ce framework permet aux développeurs et aux concepteurs de se mettre au travail sur leur projet en un rien de temps. Il est couramment utilisé comme répertoire racine de site Web afin d’accélérer le processus de développement. Pure.css Pure, à bien des égards, est similaire à Skeleton dans le sens où il est simple et minuscule. Il a été conçu en tenant compte des appareils mobiles. Chaque ligne de CSS a été soigneusement étudiée afin de réduire la taille totale des modules à 3,8 Ko, après les avoir minifiés et compressés. Globalement, cela facilite la conception de sites Web réactifs par rapport à d’autres frameworks. Ne manquez pas d’être à l’affût de ces frameworks cette année. Ils gagnent en popularité et, par conséquent, les sites Web développés avec ces frameworks continuent de croître. De nouveaux frameworks sortent fréquemment, et il ne serait pas surprenant que cette liste soit très différente l’année prochaine.

Dans cet article, je vais aborder quelques cas d’utilisation de REM (Root EM) en CSS. Je commencerai par quelques connaissances de base sur les propriétés et les valeurs CSS, ce qui me semble nécessaire. Ensuite, j’aborderai les différences entre les valeurs de longueur absolues et les valeurs relatives. REM est une valeur de longueur relative. Dans les deux dernières parties, j’expliquerai pourquoi REM est utile en ce qui concerne la taille des polices et comment elle peut contribuer à rendre les pages Web réactives. Passons aux choses sérieuses. Ce que vous devez savoir Dans cette section, je vais d’abord dire quelques mots sur les CSS, en guise d’introduction. Qu’est-ce que CSS ? CSS (acronyme de Cascading Style Sheets) utilise des propriétés et des valeurs pour créer toute la magie esthétique qui se produit dans les pages Web. Imaginons que vous souhaitiez rehausser votre image d’une belle bordure et que vous vouliez que les bords soient une ligne noire unie. Dans ce cas, border serait la propriété à choisir, et solid la valeur. Il s’agit d’un mot-clé dans CSS qui lui ordonne de créer la bordure solide souhaitée. Comme vous l’avez peut-être deviné, il doit y avoir différents types de ces valeurs, car une simple ligne continue en guise de bordure n’est pas un grand ornement. La propriété border accepte en effet des mots-clés, des couleurs et des longueurs. En fait, c’est parce que border est un raccourci pour border-width, border-style et border-color. Ainsi, au lieu de spécifier chacune de ces propriétés, border accepte ces valeurs pour toutes les propriétés à la fois, comme suit : border : 2px solid #ffff00 ;utilisation de la propriété border shorthand Dans l’extrait de code ci-dessus, vous voyez la valeur 2px qui est une valeur de longueur, solid qui est un mot-clé pour le style de la bordure, et la valeur hexagonale RVB #ffff00 de la couleur jaune. Maintenant, c’est une belle bordure (pas vraiment, je sais, mais je me suis fait comprendre). Une dernière chose à propos de ces valeurs avant de passer aux choses sérieuses. Différentes propriétés ont différents types de valeurs qui leur sont applicables. Ces collections de valeurs sont appelées à juste titre des types de valeurs (aussi appelés types de données). Laissez-moi vous donner un dernier exemple : la couleur est un type de valeur, et la valeur hexagonale RVB #ffff00 (qui représente la couleur jaune) est une valeur spécifique de ce type de valeur. Si vous en avez besoin, considérez les types de valeurs comme des types et les valeurs comme des tokens de ces types. Ainsi, si vous avez besoin de savoir quelles sont les valeurs acceptées par une propriété spécifique, il vous suffit de rechercher ses types de valeur, et vous êtes couvert. Qu’est-ce que REM en CSS ? Cet article traite de l’une de ces valeurs, à savoir REM, qui signifie Root EM. REM est une valeur de la valeur/type de données length. Une autre valeur de longueur est notre bon vieux pixel(px). Toute propriété qui accepte les longueurs comme valeur acceptera REM. Parmi celles-ci, citons la marge, le remplissage, etc. Vous vous demandez peut-être pourquoi vous devriez utiliser REM ? Nous allons voir pourquoi dans la section suivante. Valeurs relatives et valeurs de longueur absolues en CSS Il existe deux types de valeurs de longueur en CSS : les valeurs de longueur absolue et les valeurs de longueur relative. Valeurs de longueur absolue Les valeurs de longueur absolue sont, par exemple, les suivantes : px (1/96e de pouce), in (un pouce) ou cm (37,8px ou 25,2/64in). Vous pouvez trouver plus d’informations sur ces valeurs dans le MDN. Lorsque vous utilisez ces valeurs de longueur, vous pouvez être sûr qu’elles auront toujours plus ou moins la même taille. C’est particulièrement utile lorsque vous connaissez les dimensions exactes de la sortie, ce qui est généralement le cas avec les mises en page d’impression. Mais ce n’est pas si utile quand ce n’est pas le cas, comme avec les différentes tailles d’écran. N’oubliez pas non plus les différents paramètres de navigateur que les utilisateurs peuvent utiliser, en raison de leurs préférences ou de leurs besoins en matière d’accessibilité. Valeurs de longueur relative Les valeurs de longueur relative sont définies en fonction d’une autre valeur. Il s’agit, par exemple, de REM, EM et vw. Nous allons discuter en détail de REM ci-dessous, alors discutons brièvement des autres valeurs. EM est définie par rapport à : la taille de la police de l’élément parent lorsque la propriété font-size est concernée, et la taille de la police de l’élément lui-même lorsqu’il s’agit d’autres propriétés comme la hauteur. vw signifie 1% de la largeur de la fenêtre d’affichage. En d’autres termes, si vous définissez la propriété width comme 10vw, l’élément occupera 10 % de la largeur de la fenêtre d’affichage disponible. Il y en a beaucoup d’autres, et vous pouvez les trouver ici. Ces valeurs de longueur relatives présentent un avantage certain par rapport aux valeurs absolues, car elles peuvent contribuer à rendre votre site Web réactif. En d’autres termes, votre site Web s’adapte automatiquement à la taille de l’écran disponible, et ce de manière prévisible. REM et taille de police de base Le REM est défini par rapport à la taille de la police de l’élément racine. L’élément racine est associé à la pseudo-classe :root ou au sélecteur html. 1rem prend donc la valeur qui est donnée à la taille de police de l’élément racine. Cela signifie que 1 REM conserve la même valeur dans l’ensemble de votre code CSS. Si la taille de la police de l’élément racine n’est pas modifiée par l’utilisateur, cette valeur est normalement de 16px. Voici un exemple : html { font-size : 18px ; // la valeur par défaut serait 16 } h1 { font-size : 2rem ; // 2 * 18px = 36px ; } Raisonner à l’envers de 2rem à px n’est pas une tâche difficile. Mais devez-vous avoir une calculatrice à portée de main pour connaître la taille exacte de la … Lire la suite

Qu’est-ce que la propriété d’isolation CSS ? En CSS, vous pouvez utiliser la propriété d’isolation pour créer un nouveau contexte d’empilement. Voici à quoi cela ressemble : .container-for-new-stacking-context { isolation : isoler ; } La valeur par défaut de l’isolation est auto, ce qui est un peu plus nuancé car un contexte d’empilement peut être créé – mais cela dépend des propriétés de l’élément et si elles le nécessitent. Vous pouvez également définir la valeur comme suit : inherit, initial, revert, ou unset. L’utilisation de l’isolation : isolate ; est un moyen définitif de créer un nouveau contexte d’empilement. Qu’est-ce que le contexte d’empilement ? En CSS, le contexte d’empilement permet littéralement d’empiler des éléments HTML dont la position de départ est basée sur un élément de base qui fournit le contexte. Les éléments sont placés le long d’une matrice imaginaire avec un axe X et un axe Y. Il existe également un axe Z, dans lequel les éléments peuvent être empilés. Il existe également un axe z, dans lequel les éléments peuvent être placés les uns devant ou derrière les autres. La propriété z-index est généralement utilisée pour placer les éléments le long de l’axe z. N’oubliez pas que lorsque l’élément HTML racine est rendu, il est accompagné d’un contexte d’empilement racine/global. Il existe de nombreuses façons de créer des contextes d’empilement dans le contexte d’empilement global. L’une des plus courantes consiste à utiliser position : relative avec z-index. L’utilisation de position : sticky ou fixed fonctionne, mais fait sortir les éléments de la disposition du flux et nécessite des propriétés supplémentaires pour le placement souhaité. Vous pouvez également utiliser transform, clip-path ou filter pour faciliter l’empilage. Pour voir toutes les façons dont le contexte d’empilement peut être formé, lisez la suite sur MDN Web Docs. Les contextes d’empilement peuvent contenir des contextes d’empilement internes ultérieurs, et continuer à s’imbriquer davantage. C’est peut-être un peu trop « Inception » pour être conceptualisé, alors voyons pourquoi c’est utile. Le trou noir de l’indice Z L’utilisation de l’indice z peut être difficile à maintenir. Vous devez faire très attention à l’endroit où vous l’utilisez et aux valeurs que vous lui attribuez. Les systèmes de conception peuvent aider à résoudre ces problèmes. Il peut être très utile de créer un ensemble de valeurs réutilisables et de documenter les cas dans lesquels elles doivent être utilisées. Par exemple, vous pouvez réserver vos valeurs de variable les plus élevées aux modales et autres éléments qui occuperont toujours la totalité de la page. Mais la plupart du temps, nous essayons simplement de faire en sorte que notre style apparaisse comme nous le souhaitons. Ce qui peut signifier prescrire des valeurs d’index z arbitraires et continuer à augmenter ces valeurs jusqu’à ce qu’elles fonctionnent. J’ai rencontré l’infâme z-index : 999999 ; à de nombreuses reprises. Retrouver ces valeurs aléatoires et créer un nouvel ordre peut devenir ardu. Cela peut conduire à des problèmes difficiles à déboguer. Plus vous commencez à utiliser des nombres élevés, plus vous pouvez vous enfoncer dans le trou noir et plus il est difficile d’en sortir par la suite. Faites simple avec l’isolation Le fait de définir la propriété d’isolation sur isoler est un moyen simple de créer un nouveau contexte d’empilement sans avoir à recourir à l’indice z pour placer les éléments les uns devant les autres. Vous pouvez utiliser l’isolation sur des éléments à positionnement statique et cela n’affectera pas les éléments enfants. C’est un excellent moyen de créer une base isolée dans laquelle vous pouvez placer des éléments enfants. La propriété d’isolation est également largement prise en charge. Pour rappel, voici la syntaxe de cette propriété : .container-for-new-stacking-context { isolation : isolate ; } Pour résumer : La définition de l’isolation : isolate ; créera un nouveau contexte d’empilement pour les éléments enfants lorsqu’elle sera appliquée à un élément de niveau supérieur. Si vous avez trouvé cet article utile, n’hésitez pas à nous contacter sur Twitter @ui_natalie. Bon empilage ! Ressources

Et si je vous disais que les pages web sont des animations interactives reproduites par votre navigateur web ? Nous observons différents mouvements chaque fois que nous sommes sur une page web. Et je ne parle pas seulement des animations JavaScript ou CSS. Le défilement, le zoom par pincement, la sélection de texte et même le survol d’un bouton sont techniquement des animations et fonctionnent de la même manière. En fait, il s’agit d’images séquentielles affichées rapidement pour nous donner une perception de mouvement ou simplement refléter un changement. Chaque fois que le code JavaScript modifie la page, une zone de l’image précédente est invalidée et le navigateur en dessine une nouvelle. Ces changements peuvent être aussi simples que l’ajout ou la suppression d’une ou de modifier le style d’un bouton. Nous appelons ces images des cadres. Selon les directives du W3C en matière de synchronisation des images, le navigateur Web doit être capable d’afficher soixante images par seconde (60 fps). Bien entendu, une image reste à l’écran si elle ne change pas. Et si je vous montrais quelques exemples ? Lorsque vous faites défiler une page, le navigateur affiche des zones hors écran du document au fur et à mesure que vous faites défiler la page vers le bas (ou vers le haut). L’image ci-dessous montre les trames séquentielles produites et affichées pendant quelques secondes de défilement. Cadres générés pendant quelques secondes de défilement Et comme vous pouvez le constater, chaque image a été affichée pendant 16,7 ms (60 fps). J’ai utilisé Google Chrome DevTools pour créer l’enregistrement ci-dessus. Vous pouvez le reproduire si vous le souhaitez. Dans DevTools, allez dans le panneau Performance, et cliquez sur le bouton d’enregistrement. Ensuite, faites défiler la page pendant quelques secondes, et arrêtez l’enregistrement. Vous verrez un aperçu comme celui ci-dessus. Même lorsque vous sélectionnez un morceau de texte, de nouvelles trames s’affichent à mesure que vous sélectionnez d’autres lettres et lignes. Dans l’enregistrement ci-dessous, je déplace la souris sur le cadre temporel pour rejouer la sélection de texte : Pourquoi ai-je besoin de savoir cela ? vous vous demandez peut-être. Lorsqu’une page ne répond pas rapidement aux interactions de l’utilisateur ou présente des mouvements saccadés, quelque chose doit clocher. C’est généralement dû au fait que le fil d’exécution principal du navigateur est tellement occupé qu’il ne peut pas délivrer les images à temps (voir ci-dessous). Dans ce guide, je vais vous expliquer comment les navigateurs transforment le code en pixels et comment nous pouvons travailler avec eux pour offrir une expérience utilisateur agréable. Je me concentrerai sur Google Chrome pour cet article. Toutefois, les concepts de haut niveau sont les mêmes pour tous les navigateurs. Il y a beaucoup de théories à couvrir ici, et j’espère que cela ne vous dérange pas. Michael Jordan a dit : « Gardez les principes de base, et le niveau de tout ce que vous faites s’élèvera. » Croyez-moi, connaître ces théories ne sera pas sans récompense ! Vous aurez une nouvelle perspective sur la façon dont les pages Web changent. Et on finira par passer à beaucoup d’actions. Fréquence de rafraîchissement ou fréquence d’images ? Un dispositif d’affichage moyen rafraîchit l’écran soixante fois par seconde (60 Hz). Pour l’œil humain, toute fréquence supérieure à 12 Hz est perçue comme un mouvement. Cet article de Paul Bakaus l’explique très bien. Cheval animé (12 dessins par seconde) par Janke, sous licence CC BY-SA 2.5 Il existe des écrans avec des fréquences de rafraîchissement plus élevées comme 120Hz ou 144Hz, mais 60Hz est la norme pour la plupart des dispositifs d’affichage. Le taux de rafraîchissement est différent du taux d’images, cependant. Le taux de rafraîchissement est le nombre de fois qu’un dispositif d’affichage rafraîchit une image en une seconde. La fréquence d’images est un nombre arbitraire d’images (dans un système cinématographique), capturées ou dessinées en une seconde. Par exemple, la fréquence standard pour l’enregistrement de films est de 24 images par seconde, même si ce n’est pas la fréquence de rafraîchissement maximale d’un téléviseur moderne. Dans ce cas, les dispositifs d’affichage utilisent un algorithme pour répéter des images spécifiques afin de rendre la fréquence d’images compatible avec leur fréquence de rafraîchissement. Cela signifie que vous pouvez regarder un film à 24 fps sur un téléviseur 144Hz à la fréquence originale de 24 fps. Pourquoi la fréquence d’images est-elle importante pour les pages Web, me direz-vous ? Un utilisateur qui joue à des jeux à 120 fps remarquerait un défilement lent des pages sur le même ordinateur. Il n’appréciera pas non plus les animations Web à une vitesse inférieure à 60 images par seconde. Êtes-vous déjà tombé sur ces sites Web qui regorgent de publicités et de GIFs ? En général, je quitte rapidement ces pages car je sais que trouver un autre site me ferait gagner du temps ! Il y a une date limite pour produire chaque image Il faut du temps au navigateur pour dessiner une nouvelle image. L’affichage de soixante images par seconde signifie que chaque image doit être prête à l’écran en 16,7 ms (1 sec ÷ 60). Sinon, la trame est retardée ou abandonnée. Ce problème est souvent appelé  » jank » sur une page Web. Une animation avec des chutes et des retards d’images Notre priorité absolue est donc claire : nous devons faire en sorte que nos pages soient exemptes de jank 👆. Mais d’abord, nous devons savoir comment tout fonctionne. Comment un cadre est produit Le navigateur Web génère un nouveau cadre parce que quelque chose a changé sur la page. Et il doit refléter ce changement. Une page Web change lorsque : L’utilisateur interagit avec la page. Il fait défiler, pince le zoom, clique, sélectionne un élément de texte, etc. Un morceau de code JavaScript modifie la page. Par exemple, il ajoute un ou modifie un style CSS. Chaque modification déclenche une séquence de tâches, qui aboutit à une image unique. Cette séquence de tâches est connue sous le nom de pixel pipeline, rendering waterfall ou rendering pipeline. Et voici … Lire la suite

C’est toujours agréable d’avoir un séparateur de section fantaisie sur son site Web. Et c’est encore mieux si on peut les rendre réactifs et faciles à ajuster. C’est ce que vous allez apprendre dans cet article. Nous allons explorer différents séparateurs de section réalisés uniquement à l’aide de CSS et d’un code optimisé facile à manipuler. Voici un exemple de séparateurs de section en action : Aperçu des diviseurs à 2 sections appliqués à l’en-tête du FreeCodeCamp Avant d’entrer dans la partie technique, j’ai créé un générateur en ligne de séparateurs de section. Tout ce que vous avez à faire est de sélectionner votre configuration et d’obtenir le code CSS en un rien de temps. D’accord, je peux entendre dire : « Pourquoi un tutoriel ennuyeux ? Je vais simplement utiliser le générateur chaque fois que j’en aurai besoin ! » Bien sûr, vous pouvez le faire – mais il est toujours bon de savoir ce qui se passe sous le capot afin de comprendre le code que vous utilisez et d’être en mesure de l’ajuster manuellement. Ensuite, vous serez en mesure de créer votre propre séparateur personnalisé après avoir compris ceux que j’ai faits ! Alors plongeons et apprenons comment c’est fait. Comment créer un séparateur incliné pour votre site Web Illustration d’un séparateur incliné Dans la figure ci-dessus, nous avons deux éléments séparés par un espace incliné. Pour obtenir cet effet, nous allons couper une partie de chacun d’eux. Regardons une illustration étape par étape pour mieux comprendre. Une illustration étape par étape pour créer un séparateur incliné Au départ, nous avons deux éléments placés l’un au-dessus de l’autre. Nous commençons par couper la partie inférieure de l’élément supérieur (étape (2)) en utilisant le clip-path comme ci-dessous : clip-path : polygone(0 0,100% 0,100% 100%,0 calc(100% – 50px)) ; Nous avons un chemin de quatre points où nous rendons la partie inférieure gauche un peu plus haute pour créer l’effet de coupe. Vous pouvez remarquer l’utilisation de calc(100% – 50px) au lieu de 100%. Nous faisons la même chose pour le deuxième élément dans l’étape (3) en utilisant : clip-path : polygone(0 0,100% 50px,100% 100% 100%,0 100%) ; Cette fois, nous abaissons le coin supérieur droit de la même quantité de pixels(50px au lieu de 0). Si vous n’êtes pas familier avec le clip-path, voici une figure pour mieux voir les points. Illustration des points du clip-path Les points ne sont rien d’autre que des coordonnées x,y dans un espace 2D avec l’intervalle [0 100%]. Vous pouvez facilement identifier les quatre coins, et à partir de là, nous pouvons trouver tous les autres points. Enfin, nous ajoutons un margin-top négatif au deuxième élément pour réduire l’espace et obtenir un écart égal à 10px. Le code final sera : .top { clip-path : polygone(0 0,100% 0,100% 100% 100%,0 calc(100% – 50px)) ; } .bottom { clip-path : polygone(0 0,100% 50px,100% 100% 100%,0 100%) ; margin-top : -40px ; } C’est le code que vous obtiendrez à partir du générateur en ligne que j’ai créé. Nous pouvons l’améliorer en introduisant des variables CSS : :root { –size : 50px ; /* la taille de la coupe */ –gap : 10px ; /* l’écart */ } .top { clip-path : polygon(0 0,100% 0,100% 100%,0 calc(100% – var(–size))) ; } .bottom { clip-path : polygone(0 0,100% var(–size),100% 100%,0 100%) ; margin-top : calc(var(–gap) – var(–size)) ; } Comme je l’ai dit dans l’introduction, nous avons un code simple et facile à ajuster qui produit un séparateur de section réactif. Comment créer un séparateur fléché pleine largeur pour votre site Web Illustration du séparateur à flèche pleine largeur Celui-ci est assez similaire au séparateur précédent. Nous allons simplement traiter un plus grand nombre de points de clip-path. Une illustration étape par étape pour créer un séparateur en forme de flèche pleine largeur Je pense que vous avez probablement compris l’idée maintenant. Nous suivons les mêmes étapes et nous terminons avec le code suivant : .top { clip-path : polygon(0 0,100% 0,100% calc(100% – 50px),50% 100%,0 calc(100% – 50px)) ; } .bottom { clip-path : polygone(0 0,50% 50px,100% 0,100% 100%,0 100%) ; margin-top : -40px ; } Et ci-dessous, une autre illustration pour comprendre les nouveaux points que nous utilisons pour ce séparateur de section. Illustration des points du clip-path À première vue, cela peut sembler difficile, mais c’est en fait assez simple. Nous créons des formes en reliant différents points dans l’espace 2D de notre élément. L’astuce consiste à créer 2 « formes de puzzle » (je viens d’inventer ce terme) pour créer l’illusion d’un séparateur de section. Avec un peu de pratique, vous pouvez facilement créer votre séparateur en suivant la même logique. Avant de passer à la suite, voici le code utilisant les variables CSS : :root { –size : 50px ; /* taille de la coupe */ –gap : 10px ; /* l’écart */ } .top { clip-path : polygon(0 0,100% 0,100% calc(100% – var(–size)),50% 100%,0 calc(100% – var(–size))) ; } .bottom { clip-path : polygone(0 0,50% var(–size),100% 0,100% 100%,0 100%) ; margin-top : calc(var(–gap) – var(–size)) ; } Vous pouvez déjà voir un modèle dans le code de nos séparateurs puisque nous utilisons la même technique. Deux clip-path, une margin-top négative, et deux variables CSS. Aussi simple que cela ! Comment créer un séparateur en forme de flèche pour votre site Web ? Illustration de la flèche de séparation Ce séparateur est un peu plus délicat que les précédents car je vais ajouter une autre variable qui est l’angle de la flèche. La technique reste la même mais nous aurons plus de maths pour calculer les coordonnées des points. Pour celui-ci, mon générateur en ligne sera très utile (surtout si vous n’êtes pas à l’aise avec les formules mathématiques) afin que vous puissiez obtenir les valeurs finales sans problème. Pour les curieux, voici le code générique : :root { –size : 50px ; /* taille de la coupe */ –gap : 10px ; /* l’écart */ –angle : 90deg ; /* angle de … Lire la suite

Dans ce tutoriel, nous allons parler d’une propriété CSS importante : la propriété overflow. Elle nous aide à contrôler ce qui se passe lorsque le contenu d’un élément est trop grand pour tenir dans une zone. Dans ce cas, le contenu déborde dans une autre zone, soit horizontalement (axe X), soit verticalement (axe Y). Nous allons examiner les valeurs suivantes de la propriété overflow et voir comment elles fonctionnent : Comment utiliser la valeur visible Il s’agit de la valeur par défaut que prend la propriété overflow si aucune valeur n’est spécifiée. Grâce à cette propriété, nous pouvons voir clairement notre contenu lorsqu’il déborde sur une autre zone. Prenons les exemples suivants : Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas repellendus reprehenderit libero labore dolor omnis ! Obcaecati ipsam est accusantium quis quos minus veniam eaque ? Modi expedita mollitia et qui ! corps{ arrière-plan : noir ; } div{ hauteur : 200px ; largeur : 200px ; fond : blanc ; } p{ couleur : vert ; } C’est assez basique. Nous avons donné à notre page une couleur de fond noire. Nous avons défini la couleur d’arrière-plan de notre élément div, qui fait office de conteneur, comme étant blanche. Il a une hauteur et une largeur de 200px chacune. Nous avons ensuite donné une couleur verte au texte de notre paragraphe. Voici à quoi cela ressemble : Le texte s’insère confortablement dans le conteneur blanc sans en franchir les limites sur les deux axes. Mais ce n’est pas toujours le cas. Vous pouvez être en train de travailler sur un projet et vous rendre compte qu’un morceau de texte traverse la frontière. C’est le cas ici : Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas repellendus reprehenderit libero labore dolor omnis ! Obcaecati ipsam est accusantium quis quos minus veniam eaque ? Modi expedita mollitia et qui ! Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas repellendus reprehenderit libero labore dolor omnis ! Obcaecati ipsam est accusantium quis quos minus veniam eaque ? Modi expedita mollitia et qui ! Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas repellendus reprehenderit libero labore dolor omnis ! Obcaecati ipsam est accusantium quis quos minus veniam eaque ? Modi expedita mollitia et qui ! Les styles CSS restent les mêmes. Regardez maintenant ce qui se passe avec le conteneur et le texte : Le texte ne peut pas tenir dans le conteneur blanc, il déborde donc et traverse la bordure du conteneur. Dans un projet réel, ce serait encore plus ennuyeux car le texte se superposerait à d’autres éléments de la page. Nous sommes en mesure de voir le texte déborder dans une autre zone car la valeur par défaut ici est visible, même si nous ne l’avons pas spécifié. Continuons et ajoutons cela à notre CSS afin de voir la propriété de débordement appliquée : body{ arrière-plan : noir ; } div{ hauteur : 200px ; largeur : 200px ; fond : blanc ; overflow : visible ; } p{ couleur : vert ; } Nous avons ajouté overflow : visible ; à la div. Le résultat reste le même : notre texte déborde dans une autre zone. Dans la prochaine section, nous verrons les différentes valeurs qui peuvent nous aider à contrôler ce qui se passe lorsque le contenu déborde. Comment utiliser la valeur cachée Avec la valeur cachée, la partie du texte qui a débordé sera coupée – elle sera « invisible ». Vous n’avez pas à vous soucier de l’espace que le débordement occupait. Une fois que le contenu a été découpé, il ne se trouve plus dans la zone où il a débordé. Nous allons examiner un exemple avant d’expliquer pourquoi ce n’est pas la meilleure solution. Ajoutons la valeur cachée: body{ arrière-plan : noir ; } div{ hauteur : 200px ; largeur : 200px ; fond : blanc ; overflow : hidden ; } p{ couleur : vert ; } Voici ce qui arrive au texte dans le conteneur : Comme vous pouvez le constater, nous ne pouvons plus voir la partie du texte qui traverse la frontière du conteneur. Cela résout le problème de la présence de contenu dans une zone où il n’est pas censé se trouver, mais ne permet pas d’accéder au contenu qui a été coupé. Nous aborderons donc ce point dans la prochaine section. Nous savons donc déjà que la valeur hidden coupe le texte et le cache. Mais la valeur scroll coupe également le texte et fournit une barre de défilement pour que nous puissions faire défiler et voir la partie du texte qui a été coupée. Voyons cela : body{ arrière-plan : noir ; } div{ hauteur : 200px ; largeur : 200px ; fond : blanc ; overflow : scroll ; } p{ couleur : vert ; } Nous avons maintenant des barres de défilement sur les deux axes. La barre de défilement horizontale n’est pas pertinente pour nous car nous n’avons pas de contenu débordant dans cette direction. Nous allons régler ce problème dans la section suivante. Comment utiliser la valeur auto body{ arrière-plan : noir ; } div{ hauteur : 200px ; largeur : 200px ; fond : blanc ; overflow : auto ; } p{ couleur : vert ; } La barre de défilement n’apparaît plus que verticalement. La valeur auto détecte où le débordement se produit et ajoute une barre de défilement dans cette direction. Aucune barre de défilement n’a été ajoutée horizontalement parce que nous n’avons pas de débordement de contenu sur cet axe. De même, si nous n’avons pas de débordement sur les deux axes, aucune barre de défilement ne sera ajoutée. propriétésoverflow-x et overflow-y Dans les exemples utilisés dans les sections précédentes, nous avons utilisé la propriété overflow. Celle-ci s’applique à l’axe horizontal et à l’axe vertical. Si vous préférez vérifier le débordement séparément, vous pouvez utiliser ces propriétés : overflow-x indique ce qui se passe lorsque le contenu déborde horizontalement (de gauche … Lire la suite

Dans cet article, vous verrez comment styliser un bouton à l’aide de CSS. Mon objectif ici est surtout de montrer comment les différentes règles et styles CSS sont appliqués et utilisés. Nous ne verrons pas beaucoup d’inspiration en matière de design et nous ne discuterons pas d’idées de style. Il s’agit plutôt d’un aperçu du fonctionnement des styles, des propriétés les plus utilisées et de la façon dont ils peuvent être combinés. Vous verrez d’abord comment créer un bouton en HTML. Ensuite, vous apprendrez à remplacer les styles par défaut des boutons. Enfin, vous aurez un aperçu de la manière de styliser les boutons pour leurs trois états différents. Créer un bouton en HTML Modifier le style par défaut des boutons Modifier la couleur de l’arrière-plan Modifier la couleur du texte Modifier le style de la bordure Modifier la taille Modifier l’état des boutons Style de l’état du survol État du focus du style État du style actif Conclusion C’est parti ! Comment créer un bouton en HTML Pour créer un bouton, utilisez l’ élément . Il s’agit d’une option plus accessible et sémantique que l’utilisation d’un conteneur générique créé avec l’élément qui est créé avec l’élément Dans le fichier index.html ci-dessous, j’ai créé la structure de base d’une page Web et ajouté un seul bouton : Style des boutons CSS Cliquez-moi ! Décomposons la ligne Cliquez-moi !: Vous ajoutez d’abord l’élément bouton, qui consiste en une balise ouvrante et une balisefermante . L’attribut type= »button » de labaliseouvrante crée explicitement un bouton cliquable. Comme ce bouton particulier n’est pas utilisé pour soumettre un formulaire, il est utile, pour des raisons sémantiques, de l’ajouter afin de rendre le code plus clair et de ne pas déclencher d’actions indésirables. L’attribut class= »button » sera utilisé pour styliser le bouton dans un fichier CSS distinct. La valeur button pourrait être n’importe quel autre nom de votre choix. Par exemple, vous auriez pu utiliser class= »btn ». Le texte Cliquez-moi ! est le texte visible à l’intérieur du bouton. Tous les styles qui seront appliqués au bouton iront à l’intérieur d’un fichier spearate style.css. Vous pouvez appliquer les styles au contenu HTML en reliant les deux fichiers entre eux. Pour ce faire, vous utilisez la balise qui a été utilisée dans index.html. Dans le fichier style.css, j’ai ajouté un style qui centre uniquement le bouton au milieu de la fenêtre du navigateur. Remarquez que la balise class= »button » est utilisée avec le sélecteur .button. Il s’agit d’un moyen d’appliquer des styles directement au bouton. * { box-sizing : border-box ; } body { display:flex ; justify-content : center ; align-items : center ; margin:50px auto ; } .button { position : absolute ; top:50 } Le code ci-dessus donnera le résultat suivant : Le style par défaut des boutons varie en fonction du navigateur que vous utilisez. Voici un exemple de l’aspect des styles natifs des boutons dans le navigateur Google Chrome. Comment modifier le style par défaut des boutons ? Comment modifier la couleur d’arrière-plan des boutons Pour modifier la couleur d’arrière-plan du bouton, utilisez la propriété CSS background-color et donnez-lui la valeur d’une couleur de votre choix. Dans le sélecteur .button, vous utilisez background-color:#0a0a23 ; pour modifier la couleur d’arrière-plan du bouton. .button { position : absolute ; top:50% ; background-color:#0a0a23 ; } Comment modifier la couleur du texte des boutons La couleur par défaut du texte est le noir. Ainsi, lorsque vous ajoutez une couleur d’arrière-plan sombre, vous remarquerez que le texte a disparu. Il faut également veiller à ce que le contraste soit suffisant entre la couleur d’arrière-plan et la couleur du texte du bouton. Cela permet de rendre le texte plus lisible et plus agréable pour les yeux. Ensuite, utilisez la propriété color pour modifier la couleur du texte : .button { position : absolute ; top:50% ; background-color:#0a0a23 ; couleur : #fff ; } Comment modifier le style de bordure des boutons ? Vous remarquez le gris autour des bords du bouton ? Il s’agit de la couleur par défaut des bordures du bouton. Une façon de corriger cela est d’utiliser la propriété border-color. Vous définissez la valeur pour qu’elle soit identique à la valeur de background-color. Ainsi, les bordures sont de la même couleur que l’arrière-plan du bouton. Une autre solution consiste à supprimer entièrement la bordure du bouton en utilisant border:none ;. .button { position : absolute ; top:50% ; background-color:#0a0a23 ; couleur : #fff ; border:none ; } Ensuite, vous pouvez également arrondir les bords du bouton en utilisant la propriété border-radius, comme suit : .button { position : absolute ; haut:50% ; background-color:#0a0a23 ; couleur : #fff ; border:none ; border-radius:10px ; } Vous pouvez également ajouter un léger effet d’ombre autour du bouton en utilisant la propriété box-shadow: position : absolute ; haut : 50% ; background-color:#0a0a23 ; couleur : #fff ; border:none ; border-radius:10px ; box-shadow : 0px 0px 2px 2px rgb(0,0,0) ; Comment modifier la taille des boutons La façon de créer plus d’espace à l’intérieur des bordures du bouton est d’augmenter le padding du bouton. Ci-dessous, j’ai ajouté une valeur de 15px pour le remplissage en haut, en bas, à droite et à gauche du bouton. J’ai également défini une hauteur et une largeur minimales, avec les propriétés min-height et min-width respectivement. Les boutons doivent être suffisamment grands pour tous les types d’appareils. .button { position : absolute ; top:50% ; background-color:#0a0a23 ; color : #fff ; border:none border-radius:10px padding:15px ; min-hauteur:30px min-width : 120px ; } Comment styliser les états des boutons Les boutons ont trois états différents : Il est préférable que les trois états soient stylisés différemment et ne partagent pas les mêmes styles. Dans les sections suivantes, je vais vous expliquer brièvement la signification de chacun de ces états et ce qui les déclenche. Vous verrez également comment vous pouvez styliser le bouton pour chaque état distinct. Comment styliser les états :hover L’état :hover est présent lorsqu’un utilisateur survole un bouton, en plaçant sa souris ou son trackpad dessus, sans le … Lire la suite

Si vous êtes un développeur web, vous appréciez probablement un site web bien conçu et attrayant. Il se peut qu’un site Web vous propose un jeu de couleurs ou une police que vous souhaitez intégrer à votre blog ou à votre application Web. Mais vous aurez besoin d’une extension de navigateur pour voir la palette de couleurs et les autres caractéristiques CSS du site. La fonction d’aperçu CSS dans Chrome Dev Tools vous permet de voir ces propriétés CSS. Dans cet article, nous allons voir comment utiliser la fonction de synthèse CSS dans Chrome Developer Tools. Nous apprendrons également comment utiliser la vue d’ensemble des feuilles de style en cascade pour obtenir les couleurs et les autres propriétés CSS que vous souhaitez utiliser pour créer une page Web. Commençons . 💃 Qu’est-ce que le panneau de synthèse CSS ? Le panneau d’aperçu CSS est l’une des plus récentes fonctionnalités des outils de développement de Chrome. Il sert d’outil de prévisualisation qui vous permet de voir les différentes propriétés CSS utilisées dans la création d’une page Web. Il affiche les propriétés CSS telles que : Les couleurs utilisées sur une page Web. La hauteur de ligne de chaque élément utilisé sur une page Web. La taille de la police de chaque élément utilisé sur une page Web Les familles de polices de chaque élément d’une page Web. Le poids des polices de chaque élément utilisé sur une page Web. Chrome Developer Tools est également connu sous le nom de Chrome Dev Tools. Il s’agit d’une suite d’outils de développement Web préinstallés dans le navigateur Chrome. Voici quelques-uns des avantages de l’utilisation de Chrome Dev Tools: Il vous permet de créer de meilleurs sites Web en un temps plus court. Il vous permet d’apporter des modifications à votre code, de le tester et de l’inspecter. Chrome Dev Tools permet aux développeurs de mieux contrôler leurs applications Web et leurs navigateurs. Ils vous permettent d’évaluer les performances générales d’un site Web. Vous pouvez accéder aux outils de développement de Chrome de trois façons différentes : Menu de Chrome: Cliquez sur les trois points verticaux situés dans le coin supérieur droit de votre navigateur Chrome. Cela fera apparaître un menu déroulant avec plus d’outils en bas de l’écran. Cliquez sur plus d’outils. Cliquez sur outils de développement. Inspecter : Raccourcis : Une fois que vous avez cliqué sur les touches de raccourci, les outils de développement s’ouvrent. Lorsque vous appuyez sur CTRL + Shift + I, cela affiche le dernier panneau que vous avez ouvert par défaut. Il affiche le panneau des éléments, de la console, du réseau ou des performances, entre autres. CTRL + Shift + C ouvre d’abord le panneau élément par défaut. Les étapes ci-dessous vous expliquent comment utiliser la fonction de synthèse CSS pour obtenir les propriétés CSS utilisées sur une page Web. Nous avons déjà abordé les différentes méthodes d’accès aux outils de développement de Chrome. Vous devriez maintenant les connaître. Pour rappel, vous pouvez ouvrir les outils de développement de Chrome en appuyant sur Ctrl + Shift + I sous Windows et Linux. Sur Mac, utilisez CMD + Option + I. Cliquez sur les trois points verticaux situés en haut à droite de Chrome dev tools. Sélectionnez « Plus d’outils » dans le menu déroulant. Vous découvrirez une variété d’options lorsque vous cliquez sur « Plus d’outils » Parmi les différentes options, sélectionnez la fonction de synthèse CSS. Étape 3 – Cliquez sur Aperçu de capture Lorsque vous cliquez sur Aperçu CSS, vous verrez une liste de ses fonctions. Des fonctions telles que : Capturez une vue d’ensemble du CSS de votre page. Identifiez les améliorations potentielles du CSS. Localisez les éléments concernés dans le panneau des éléments. Cliquez sur le bouton Aperçu de la capture. Un menu comportant cinq sections apparaît après avoir cliqué sur le bouton Aperçu de la capture. Les cinq sections sont les suivantes : Résumé de l’aperçu Couleurs Infos sur les polices Déclarations inutilisées Requêtes média Passons en revue chacune des cinq sections une par une pour voir comment elles fonctionnent. Résumé de la synthèse CSS Le résumé de la vue d’ensemble contient une liste des éléments CSS utilisés pour construire la page Web. Le résumé général affiche un résumé du CSS de votre site Web, par exemple : Le nombre d’éléments utilisés sur la page Web. Les différents types de sélecteurs utilisés pour créer la page Web. Le nombre d’éléments de style en ligne utilisés sur la page Web. Le nombre de feuilles de style externes utilisées sur la page Web. Une illustration du sommaire d’aperçu. L’exemple ci-dessus montre les différents éléments CSS utilisés pour construire la page Web. Couleurs Le panneau des couleurs affiche toutes les couleurs utilisées pour créer la page Web. Il comporte une palette de couleurs pour l’arrière-plan, le texte, le remplissage et les bordures. Il met également en évidence les problèmes de textes à faible contraste sur la page Web. Une illustration du panneau de couleurs. L’image ci-dessus vous montre les différentes couleurs utilisées dans la création de la page Web. La beauté du panneau Couleur est que chaque couleur est cliquable. Si vous cliquez sur une couleur particulière dans le panneau Couleur, une liste des éléments qui utilisent cette couleur apparaît. Lorsque vous cliquez sur chaque élément, vous accédez au panneau des éléments à inspecter. J’ai cliqué sur la couleur #49FCD4 dans l’image ci-dessus, et une liste d’éléments utilisant cette couleur s’est affichée. Vous pouvez également survoler un élément dans les listes d’éléments affichées. Lorsque vous déplacez votre curseur sur l’élément, celui-ci est mis en évidence sur la page Web. Lorsque je passe ma souris sur l’élément d’en-tête dans l’image ci-dessus, l’en-tête de la page Web est mis en évidence. Petite remarque : le survol consiste à déplacer le curseur sur n’importe quoi. Cela signifie placer un curseur sur du texte, une image ou d’autres objets à l’écran sans cliquer dessus. Infos sur les polices Le panneau d’information sur les polices affiche les polices de caractères utilisées pour le … Lire la suite

Si vous travaillez sur un projet de développement Web, la définition d’une belle couleur d’arrière-plan peut donner au site Web un aspect plus attrayant. Pour définir une couleur d’arrière-plan pour un div ou un élément connexe en CSS, vous utilisez la propriété background-color. Lorsque vous définissez cette couleur d’arrière-plan, votre créativité est votre limite pour aller jusqu’au bout. Dans cet article, je vais donc vous montrer comment vous pouvez définir cette couleur d’arrière-plan. Comment définir la couleur d’arrière-plan avec des couleurs nommées Avec les couleurs nommées, vous pouvez définir la couleur d’arrière-plan en faisant intervenir la propriété background-color et en lui attribuant une valeur exprimée par un nom de couleur comme rouge, vert, bleu, etc. div { fond : vert ; } Vous pouvez utiliser les styles suivants pour améliorer l’apparence de la page Web. Il suffit de définir une largeur et une hauteur pour la division, afin que la couleur d’arrière-plan prenne effet : body { display : flex ; align-items : center ; justify-content : center ; hauteur : 100vh ; background-color : #d3d3d3 ; } div { background : green ; } Les navigateurs modernes reconnaissent environ 147 couleurs, vous êtes donc encore un peu limité. Comment définir la couleur d’arrière-plan avec des couleurs hexadécimales ? Avec les valeurs hexadécimales, vous pouvez définir une couleur d’arrière-plan pour un div ou tout autre élément avec un total de 6 caractères. Les couleurs hexadécimales commencent par le signe dièse (#), un nombre quelconque de 0 à 9, et enfin une lettre quelconque de A à F. Les deux premières valeurs représentent le rouge, les deux suivantes le vert et les deux dernières le bleu. Avec les valeurs hexadécimales, vous pouvez vous plonger dans la roue des couleurs et même utiliser des couleurs que personne n’a jamais utilisées. div { background : #2ecc71 ; } Vous pouvez en savoir plus sur les couleurs hexagonales ici. Comment définir la couleur d’arrière-plan avec les couleurs RVB RVB signifie rouge, vert et bleu. Pour définir la couleur d’arrière-plan avec RGB, vous spécifiez la quantité de rouge, de vert et de bleu que vous souhaitez avec des nombres compris entre 0 et 255. div { background : rgb(220, 20, 60) ; } RGB a également une variante appelée RGBA. Le dernier A signifie alpha et vous permet de déterminer le degré d’opacité de la couleur. L’alpha prend une valeur comprise entre 0,0 et 1,0. 0.0 signifie une opacité de 0 %, 0,5 une opacité de 50 % et 1,0 une opacité de 100 %. div { background : rgb(220, 20, 60, 0.6) ; } Vous pouvez en savoir plus sur les couleurs RVB ici. Comment définir la couleur d’arrière-plan avec les couleurs HSL HSL est l’abréviation de Hue, Saturation et Lightness. Il s’agit de la méthode la plus dynamique pour définir une couleur d’arrière-plan pour une division ou d’autres éléments. Lateinte représente la roue des couleurs sur 360°. 0° correspond au rouge, 120° au vert et 240° au bleu Lasaturation est la quantité de gris dans la couleur exprimée en pourcentages. 0% est la nuance de gris et 100% est la couleur elle-même. Comme son nom l’indique, la clarté est la quantité d’obscurité et de clarté dans la couleur exprimée en pourcentage. 0% est le noir et 100% le blanc. div { background : hsl(16, 100%, 50%) ; } Conclusion Puisque vous pouvez appliquer des couleurs de 4 manières différentes, vous devez vous demander laquelle vous devez utiliser. Lorsque vous utilisez des couleurs nommées, vous êtes en quelque sorte limité dans l’application de différentes nuances de couleurs. Chaque couleur comme le rouge, le vert, le bleu, le jaune ou toute autre couleur a beaucoup de variations auxquelles vous n’aurez pas accès avec les couleurs nommées. Vous ne pouvez accéder qu’à environ 147 couleurs prédéfinies reconnues par les navigateurs. Les couleurs hexadécimales, en revanche, sont très dynamiques. Elles sont surtout utilisées par les développeurs, et la créativité est la limite. Ces couleurs hexadécimales vous permettent d’utiliser différentes nuances d’une même couleur. Les couleurs RVB sont aussi dynamiques que les couleurs hexadécimales. Vous pouvez spécifier la quantité de rouge, de vert et de bleu de 0 à 255, et vous pouvez également utiliser la valeur alpha ajoutée pour spécifier la transparence de la couleur. HSL est le plus dynamique de tous. Vous pouvez spécifier exactement la couleur de 0 à 360 degrés dans la roue chromatique, définir la saturation et l’obscurité en pourcentage, et définir l’opacité à n’importe quelle valeur entre 0,0 et 1,0. Le choix entre les couleurs nommées, hexagonales, RVB et LSH dépend donc de vous, de votre créativité et des besoins de votre projet. Merci de votre lecture.

Lorsque vous travaillez sur la création de sites Web, il est essentiel de savoir comment centrer une image en css. Cette compétence vous permet de donner une apparence professionnelle et soignée à vos pages. Il existe plusieurs méthodes pour centrer une image css, et choisir la bonne méthode peut dépendre de la structure de votre page et de vos préférences personnelles en matière de code. Une des techniques les plus courantes pour css centrer une image est d’utiliser la propriété text-align sur un élément conteneur. Alternativement, vous pouvez utiliser Flexbox ou CSS Grid, qui offrent des solutions plus flexibles pour centrer image css. Ces méthodes modernes sont particulièrement utiles lorsque vous devez centrer des éléments à la fois horizontalement et verticalement. Parfois, une approche plus simple comme l’utilisation de marges automatiques peut être suffisante pour css centrer image. En définissant le display de l’image sur block et en appliquant des marges automatiques, vous pouvez obtenir un centrage efficace sans trop d’efforts. Quelle que soit la méthode que vous choisissez, maîtriser ces techniques vous permettra de créer des mises en page équilibrées et esthétiquement plaisantes. Centrer une image avec la propriété d’alignement du texte Vous pouvez centrer une image avec la propriété d’alignement du texte. Il faut savoir que la balise d’insertion des images – img – est un élément en ligne. Le centrage à l’aide de la propriété text-align fonctionne uniquement pour les éléments de niveau bloc. Alors comment centrer une image avec la propriété text-align ? Il suffit d’envelopper l’image dans un élément de niveau bloc comme un div et de donner à ce div un text-align de center. div { text-align : center ; } Comment centrer une image avec Flexbox Avec l’introduction de CSS Flexbox, il est devenu plus facile de centrer n’importe quoi. Flexbox fonctionne en plaçant ce que vous voulez centrer dans un conteneur et en donnant au conteneur un affichage de flex. Il définit ensuite justify-content sur center, comme le montre l’extrait de code ci-dessous : div { display : flex ; justify-content : center ; } P.S. : Une propriété justify-content définie sur center centre une image horizontalement. Pour centrer l’image verticalement également, vous devez définir align-items sur center. Comment centrer une image avec CSS Grid CSS Grid fonctionne comme Flexbox, avec l’avantage supplémentaire que Grid est multidimensionnel, par opposition à Flexbox qui est bidimensionnel. Pour centrer une image à l’aide de CSS Grid, enveloppez l’image dans un élément div de type conteneur et donnez-lui un affichage de type grille. Définissez ensuite la propriété place-items sur center. div { display : grid ; place-items : center ; } P.S.:place-items avec une valeur de centre centre tout horizontalement et verticalement. Comment centrer une image avec la propriété Margin ? Vous pouvez également centrer une image en lui attribuant une marge gauche et droite de type auto. Mais tout comme la propriété text-align, margin ne fonctionne que pour les éléments de niveau bloc. Vous devez donc commencer par convertir l’image en un élément de niveau bloc en lui attribuant un affichage de type bloc. img { display : block ; margin : 0 auto ; } Ces deux propriétés pourraient suffire. Mais parfois, vous devez définir une largeur pour l’image, de sorte que les marges gauche et droite de auto auraient des espaces à prendre. img { display : block ; margin : 0 auto ; width : 40% ; } P.S. :Il se peut que vous n’ayez pas à descendre jusqu’à 40% pour la largeur. L’image était déformée à un pourcentage de 60+, c’est pourquoi je suis descendu jusqu’à 40%. Pour les développeurs qui cherchent à centrer une image en css, il existe plusieurs méthodes efficaces. Par exemple, vous pouvez utiliser la propriété text-align pour centrer image html en enveloppant l’image dans un élément de niveau bloc. Une autre méthode consiste à utiliser Flexbox ou CSS Grid pour mettre une image au centre css. Ces techniques permettent de centrer facilement les éléments, tant horizontalement que verticalement. Si vous vous demandez comment centrer une image css, il est également possible d’utiliser la propriété margin en définissant des marges automatiques après avoir converti l’image en un élément de type bloc. En résumé, que vous ayez besoin de centrer une image html ou de comprendre les différentes approches de CSS, ces méthodes vous fourniront les outils nécessaires pour atteindre vos objectifs de design.