.id-card-wrapper {   hauteur: 100vh;   largeur: 100%;   couleur de fond: # 122023;   affichage: flex; }

Résultat:

Comme vous pouvez le voir, notre div id-card est maintenant centré horizontalement et verticalement. Nous configurons simplement display: flex sur la div id-card-wrapper div. Lorsque vous réglez display: flex sur un élément, cet élément devient un [flex-container] et ses éléments enfants deviennent flex-items . Check out " Concepts de base de Flexbox " sur MDN

D'accord, cela a centré notre élément, mais pourquoi a-t-il perdu sa largeur? Le id-card div est un élément de bloc, et puisque les éléments de bloc sont par défaut 100% de largeur, pourquoi le div a-t-il perdu ce comportement au niveau du bloc lorsqu'il est devenu un élément flexible?

n'a pas perdu son comportement de bloc. Ce qui se passe est que, dès que le div arrive dans le contexte de flexbox, l'algorithme de flexbox note que la div ne possède aucune propriété width (nous lui donnons seulement max-width ), puis il définit la largeur initiale à 0.

Nous pouvons changer ce comportement en définissant explicitement la largeur initiale de l'élément en utilisant la propriété flex-basis comme ceci: [19659006].carte d'identité {
  flex-base: 100%;
  bordure: 2px solide # 0AE0DF;
  largeur maximale: 30em;
  marge: auto;
  couleur: #fff;
  rembourrage: 1em;
}

Et maintenant, le résultat ressemble à ce qui était attendu:

Flexbox imbriqués

Maintenant, notre div id-card est prêt pour le contenu. Créons un div de profil et deux sections dp et desc . Le dp div contiendra la photo de profil de l'Avenger, et desc div contiendra la description de cet Avenger:

    

         

            

                Tester
            
            

                 Test desc
            
        
    

Nous savons que le div id-card est un flex-item, mais le div que nous venons de créer à l'intérieur de id-card (le profile-row div) n'est pas un élément flexible. Oui, seuls les défunts directs des flex-containers deviennent des flex-items, mais pas les petits-enfants.

Donc, profile-row est une div normale, et nous allons en faire un flex-container par réglage affichage: flex à lui. Cela fera ses éléments enfants, dp et desc flex-items:

 .profile-row {
  affichage: flex;
}

Maintenant, nous pouvons utiliser la propriété flex-basis pour faire la div dp 33,3% large et la desc div 66,6% large:

. profile-row .dp {
  flex-basis: 33,3%;
}
.profile-row .desc {
  flex-grow: 66,6%;
}

Voici ce que nous obtenons:

Image de profil

Pour l'image du profil, nous allons utiliser une jolie image de Iron Man pour la carte d'identité de Stark ( téléchargez-la ici ). Inclure l'image en utilisant la balise img dans le div div:

    

         

            

                
            
            

                 Test desc
            
        
    

Et donnez-lui quelques styles:

 .profile-row .dp img {
  largeur maximale: 100%;
  border-radius: 50%;
}
.profile-row .desc {
  rembourrage: 1em;
}

Nous définissons max-width: 100% pour l'élément img car l'élément img affiche par défaut l'image dans sa résolution d'origine.

Si l'image est 500px × 500px, elle sera affichée dans cette dimension. Mais nous ne le voulons pas. Au lieu de cela, nous voulons que l'image soit aussi large que la div dp c'est pourquoi nous avons mis sa largeur maximale à 100%.

] border-radius propriété à 50% . Nous faisons cela pour afficher l'image comme un cercle:

Faire des arcs en CSS

Tony nous rend visite pendant que nous fabriquons cette carte d'identité, et dit que ça n'a pas l'air de la science-fiction.
Pas de problème, faisons-le plus de science-fiction. Nous ferons deux arcs en rotation autour de l'image. Insérez le premier arc dp-arc-inner à l'intérieur de l'élément dp :

    

         

            

                
 
                
            
            

                 Test desc
            
        
    

Positionnez-le en CSS:

 .profile-row .dp {
  flex-basis: 33,3%;
  position: relative;
}
.profile-row .dp img {
  largeur maximale: 100%;
  border-radius: 50%;
  bloc de visualisation;
}
.profile-row .dp .dp-arc-interne {
  position: absolue;
  largeur: 100%;
  hauteur: 100%;
  bordure: 6px solide # 0AE0DF;
  haut: -6px;
  à gauche: -6px;
}

Nous voulons que le div arc se chevauche sur le div dp . Le problème est que les éléments ne se chevauchent pas en HTML.
Toutefois, si nous définissons la position d'un élément comme absolute cet élément est retiré du flux normal du document et nous pouvons définir sa position comme nous le souhaitons.

Positionnement par défaut des éléments HTML est statique . Nous mettons position: absolute le dp-arc-inner pour le rendre absolument positionné. Maintenant nous pouvons utiliser left top bottom et right propriétés pour définir sa position.

left top bottom et right propriétés sont relatives au premier élément parent dans la hiérarchie qui est positionné "relativement". C'est pourquoi nous avons placé la position : relative sur la div dp . Si nous ne le faisons pas, les propriétés gauche supérieure inférieure et droite seront définies respectivement à l'écran, pas l'élément dp

Encore une chose, nous mettons display: block sur l'élément img . Pourquoi? Parce que img éléments sont en ligne-bloc par défaut, et en-bloc-bloc éléments affichent un petit espace sur ses côtés et le fond.

Cela ne cause aucun problème, mais un petit écart autour de l'image dans notre cas va compenser la position de l'arc. Nous avons donc défini l'élément img en tant qu'élément de bloc.

Ensuite, faisons apparaître le div "dp-arc-inner" comme un arc:

 .profile-row .dp .dp-arc -inner {
  position: absolue;
  largeur: 100%;
  hauteur: 100%;
  bordure: 6px solide transparent;
  border-top-color: # 0AE0DF;
  border-radius: 50%;
  haut: -6px;
  à gauche: -6px;
}

Ce que nous faisons est, au lieu de définir la bordure pour tous les côtés avec la couleur # 0AE0DF nous mettons tous les côtés comme transparents, puis nous donnons seulement la bordure supérieure la couleur # 0AE0DF . Ensuite, nous mettons le border-radius: 50% pour le contourner:

Bon, créons un arc de plus, dp-arc-outer :

    

         

            

                
 
                
 
                
            
            

                 Test desc
            
        
    

Et le style de la même manière:

 .profile-row .dp .dp-arc-outer {
  position: absolue;
  largeur: calc (100% + 12px);
  hauteur: calc (100% + 12px);
  bordure: 6px solide transparent;
  border-bottom-color: # 0AE0DF;
  border-radius: 50%;
  haut: -12px;
  à gauche: -12px;
}

Wow, quelle est cette chose calc là-bas?

Calc est une fonction CSS qui calcule l'expression mathématique qui lui est donnée. Regardez, nous avons eu l'arc interne avec la largeur et la hauteur de 100% et une bordure de 6px, non? Cela fait de la largeur totale de l'arc intérieur 6px + 100% + 6px .

Maintenant, si nous voulons que l'arc extérieur soit plus grand que l'arc intérieur, nous devons le faire 100% + 12px de large. C'est ici que la fonction calc () vient à la rescousse.

Notez également que nous utilisons border-bottom-color pour cet arc car nous voulons que l'arc s'affiche

Sortie:

Animation des arcs

Nos arcs sont prêts, faisons-les tourner autour de l'image maintenant. Nous pouvons le faire avec l'aide des animations CSS.

Toute animation nécessite trois choses de base: l'état de départ de l'animation, l'état final de l'animation et le temps qu'il faut pour passer de l'état initial (vitesse de l'animation).

Nous pouvons fournir ces données en CSS comme ceci:

 .profile-row .dp .dp-arc-inner {
  position: absolue;
  largeur: 100%;
  hauteur: 100%;
  bordure: 6px solide transparent;
  border-top-color: # 0AE0DF;
  border-radius: 50%;
  haut: -6px;
  à gauche: -6px;

  animation-durée: 2s;
  nom-animation: rotation-horloge;
}
@keyframes rotate-clock {
  de {
    transformer: tourner (0deg);
  }
  à {
    transformer: tourner (360deg);
  }
}

Nous utilisons "@keyframes" pour définir l'animation. Les mots clés "from" et "to" sont utilisés pour définir l'état de début et de fin de l'animation.

Dans l'état de départ, nous tournons l'arc de 0 degré en utilisant transform: rotate (0deg) et dans l'état final, nous tournons l'arc à 360 degrés en utilisant la transformation : rotation (360deg) .

Pour utiliser cette animation sur un élément, nous devons donner le nom de l'animation ( rotate-clock dans notre cas) à la propriété nom-animation de cet élément. C'est ce que nous faisons avec animation-name: rotate-clock .

Nous devons aussi dire combien de temps l'animation doit durer. Nous l'avons fait en mettant la propriété "animation-duration" à "2s".

Voir le Pen Avengers ID Card – 1 par Kunal Sarkar ( @supersarkar ) le CodePen .

Vous remarquerez deux problèmes dans la sortie. Un, l'arc est tourné une seule fois, nous voulons qu'il continue à tourner, et deux, l'animation n'est pas linéaire. L'animation est rapide au début et à la fin, nous voulons qu'elle tourne avec la même vitesse tout au long de l'animation.

Pour résoudre ces problèmes, nous utiliserons la propriété animation-itération-count pour continuer l'animation infinie times, et animation-timing-function propriété pour obtenir une animation linéaire:

 .profile-row .dp .dp-arc-inner {
  position: absolue;
  largeur: 100%;
  hauteur: 100%;
  bordure: 6px solide transparent;
  border-top-color: # 0AE0DF;
  border-radius: 50%;
  haut: -6px;
  à gauche: -6px;

  animation-durée: 2s;
  nom-animation: rotation-horloge;
  animation-itération-compte: infini;
  animation-timing-function: linéaire;
}

Voir le stylo Carte d'identité Avengers – 2 par Kunal Sarkar ( @supersarkar ) le CodePen .

Bon, l'arc interne tourne maintenant comme prévu. Maintenant, animons l'arc extérieur de la même façon, mais dans la direction opposée:

 .profile-row .dp {
  flex-basis: 33,3%;
  position: relative;
  marge: 24px;
}
.profile-row .dp .dp-arc-outer {
  position: absolue;
  largeur: calc (100% + 12px);
  hauteur: calc (100% + 12px);
  bordure: 6px solide transparent;
  border-bottom-color: # 0AE0DF;
  border-radius: 50%;
  haut: -12px;
  à gauche: -12px;

  animation-durée: 2s;
  nom-animation: rotate-anticlock;
  animation-itération-compte: infini;
  animation-timing-function: linéaire;
}
@keyframes rotate-anticlock {
  de {
    transformer: tourner (0deg);
  }
  à {
    transformer: tourner (-360deg);
  }
}

Nous avons seulement changé l'état "à" pour l'arc extérieur. Au lieu de le faire tourner à 360 degrés, nous l'avons fait pivoter à 360 degrés pour obtenir une animation dans le sens inverse des aiguilles d'une montre.

Notez que nous avons ajouté 24px de marge au .dp pour qu'il ne soit pas t être trop congestionné. Voici à quoi ressemble notre résultat maintenant:

Voir le stylo Avengers Carte d'identité – 3 par Kunal Sarkar ( @supersarkar ) le CodePen .

Utilisation d'une police Google Sci-Fi

Tony rend visite à nouveau, et cette fois, il est content de l'endroit où nous allons. Une seule chose cependant, il demande d'utiliser une police de science-fiction.

Pas de problème, nous allons utiliser la police Orbitron de Google Fonts. Google Fonts donne une mine de polices gratuitement et cette police particulière correspond à notre exigence ici

Cliquez sur "Sélectionner cette police":

Un survol apparaîtra en bas. Clique dessus. Vous obtiendrez deux codes: le code à copier dans votre code HTML, et le code police-famille à utiliser dans votre CSS:

Copiez le code dans votre fichier HTML juste au-dessus de la ligne où vous incluez votre feuille de style

Maintenant, ajoutons quelques détails d'Iron Man dans la div desc :

    

         

            

                
 
                
 
                
            
            

                 
 Tony Stark 
                
 Force: Costume d'Ironman 
                
 Faiblesse: Aucun (e) 
                
 Connu sous: Iron Man 
            
        
    

Dans notre CSS, nous allons utiliser le code font-family de Google Fonts pour définir la police de "desc" div:

 .profile-row .desc {
  famille de polices: 'Orbitron', sans-serif;
  couleur: # a4f3f2;
}
.profile-row .desc h1 {
  marge: 0px;
}

Attendez une seconde, pourquoi mettons-nous la marge de h1 à 0?

Tous les éléments de titre ( h1 h2 h3 h4 et h5 ) sont affichés avec une certaine marge autour de lui par les navigateurs. Ce n'est généralement pas un problème, mais nous ne voulons pas les lacunes supérieures et inférieures autour des éléments de la rubrique en ce moment. C'est pourquoi nous avons mis à zéro la marge pour l'élément h1 .

Regardons la sortie:

Voir le stylo Avengers ID Card – 4 par Kunal Sarkar ( ] @supersarkar ) le CodePen .

Oh non! Qu'est-ce qui s'est passé?

Ce qui se passe est que la hauteur de la div dp augmente.

Normalement, si le contenu de la div desc est plus haut que la hauteur du dp div alors rien n'arrive au div dp . Cependant, dans la mise en page flexbox, la hauteur de la div dp augmentera aussi avec la hauteur de la div desc

Nous ne voulons pas la dp div pour augmenter en hauteur avec le desc div, et nous pouvons le faire en utilisant [align-self] (https://developer.mozilla.org/en-US/docs/Web/CSS/align -self) sous-propriété de flexbox:

 .profile-row .dp {
  flex-basis: 33,3%;
  align-self: centre;
  position: relative;
  marge: 24px;
}

Voir le stylo Carte d'identité Avengers – 5 par Kunal Sarkar ( @supersarkar ) le CodePen .

Le align-self: center rend le dp div au centre en gardant sa hauteur identique.

Ajout de Glow

Ajoutons un peu de lueur.

Mais attendez, CSS n'a aucune propriété de lueur.

Aucun problème, il possède la propriété [text-shadow] (https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) . Si nous donnons une couleur vive à l'ombre, l'ombre aura l'air brillante:

 .profile-row .desc {
  famille de polices: 'Orbitron', sans-serif;
  couleur: # d3f8f7;
  texte-ombre: 0px 0px 4px # 12a0a0;
  espacement des lettres: 1px;
}

Dans la propriété texte-ombre la première valeur, 0px correspond au décalage x, à quel point l'ombre est éloignée du texte dans la direction x. La deuxième valeur, 0px est le décalage y, nous indiquant à quel point l'ombre est éloignée du texte dans la direction y. La troisième valeur, 4px est la quantité de flou que vous voulez donner à l'ombre. La quatrième valeur, # 12a0a0 est la couleur de l'ombre.

Notez que nous avons également ajouté un espace 1px entre les lettres du texte en utilisant [letter-spacing] (https: //developer.mozilla. org / en-US / docs / Web / CSS / letter-spacing) propriété parce que le texte semblait un peu encombré.

Ensuite, ajoutons un peu d'ombre à la carte d'identité et à l'image:

. carte d'identité {
  flex-base: 100%;
  largeur maximale: 30em;
  bordure: 1px solide rgb (97, 245, 245);
  marge: auto;
  couleur: #fff;
  rembourrage: 1em;
  couleur de fond: # 0D2C36;
  boîte-ombre: 0px 0px 3px 1px # 12a0a0, encart 0px 0px 3px 1px # 12a0a0;
}
.profile-row .dp img {
  largeur maximale: 100%;
  border-radius: 50%;
  bloc de visualisation;
  box-shadow: 0px 0px 4px 3px # 12a0a0;
}

La propriété texte-ombre donne l'ombre au texte, et la [box-shadow] (https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) propriété donne l'ombre aux éléments.

Les trois premières valeurs pour box-shadow sont les mêmes que text-shadow : x-offset, y-offset, et brouiller. La quatrième valeur est combien vous voulez que l'ombre se propage, et la cinquième valeur est la couleur de l'ombre.

Remarquez comment nous donnons deux ombres, extérieure et intérieure, à la carte d'identité div dans une seule ligne:

 boîte-ombre: 0px 0px 3px 1px # 12a0a0, encart 0px 0px 3px 1px # 12a0a0;

Les cinq premières valeurs créent une ombre extérieure. Ensuite, le mot-clé "inset" spécifie que les cinq valeurs suivantes sont pour l'ombre interne. Nous séparons les deux avec un .

Voir le stylo Avengers Carte d'identité par Kunal Sarkar ( @supersarkar ) le CodePen .

La carte d'identité Avengers est prête. Yay!

Wrapping Up

Dans ce tutoriel, nous avons appris comment créer un arrière-plan pleine page et centrer les éléments avec Flexbox et les marges automatiques. Nous avons vu l'utilisation basique de Flexbox et des Flexbox imbriqués pour faire des mises en page à une seule dimension.

Si vous voulez approfondir Flexbox, consultez " Un guide complet de Flexbox " de Chris Coyier sur CSS-Tricks . Si vous êtes plus un apprenant vidéo, alors vous apprécierez le cours gratuit de 20 vidéos par Web Bos à Flexbox.io .

Nous avons également utilisé des animations CSS et la rotation pour transformer des arcs animés, cependant , nous avons utilisé un nombre limité de propriétés et de valeurs CSS. Si vous voulez en savoir plus sur les animations CSS, vous allez adorer ce guide détaillé MDN .

Enfin, les éléments lumineux ont donné à notre carte d'identité un look de science-fiction unique. Nous avons utilisé la propriété "box-shadow" pour donner de l'éclat à nos éléments. Parfois, définir manuellement les valeurs de la propriété "box-shadow" devient fastidieux. Utilisez Box Shadow CSS Generator de CSSmatic pour générer facilement des ombres de boîte.

(rb, ra, il)