Cours IT Bases CSS 026_Affichage, Visibilité, Effets

1
Masque l'élément, le rendant invisible sur la page et n'occupant aucun espace, sans affecter la mise en page. L'élément ne sera pas affiché sur la page.

1
    .example{
2
        display: none;
3
    }

1
    <div class="example">Texte de test</div>ABC123

1
Affiche l'élément comme un élément de bloc. Il est affiché sous forme de bloc sur la page, avec une largeur par défaut de 100% du conteneur parent.
2
Un élément de bloc occupe toute la largeur, avec des retours à la ligne avant et après.

1
  .base{
2
      background-color: deepskyblue;
3
  }
4
  .example{
5
    display: block;
6
  }

1
    <a class="base example" href="">Test d'hyperlien</a>
2
    <br>
3
    <a class="base" href="">Test d'hyperlien</a>

1
Affiche l'élément comme un élément en ligne. Les éléments sont affichés sur la même ligne, ne prennent pas une ligne entière, la largeur est déterminée par le contenu.
2
Les éléments en ligne n'ont besoin que de la largeur nécessaire et ne forcent pas de retour à la ligne.

1
  .base{
2
        background-color: aquamarine;
3
  }
4
  .example{
5
    display: inline;
6
  }

1
    <p class="base example">Test de paragraphe</p>
2
    <p class="base">Test de paragraphe</p>

1
Affiche l'élément comme un élément de bloc en ligne. Les éléments sont affichés sur la même ligne, mais les propriétés d'éléments de bloc comme la largeur, la hauteur, etc. peuvent être définies.

1
  .example1{
2
      display: inline-block;
3
      width: 100px;
4
      height: 100px;
5
      background-color: cornflowerblue;
6
  }
7
  .example2{
8
      background-color: cornflowerblue;
9
  }

1
    <p class="example1">Test de paragraphe</p>
2
    <p class="example1">Test de paragraphe</p>
3
    <p class="example2">Test de paragraphe</p>

1
Définit l'élément comme visible.

1
  .example{
2
      visibility: visible;
3
  }

1
  <div class="example">Texte de test</div>ABC123

1
Définit l'élément comme invisible, mais l'élément masqué occupe toujours le même espace qu'avant. C'est-à-dire que bien que l'élément soit masqué, il continue d'affecter la mise en page.

1
  .example{
2
      visibility: hidden;
3
  }

1
  <div class="example">Texte de test</div>ABC123

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.example{
7
    opacity: 0.5;
8
    /* 50% de transparence */
9
}

1
    <div class="base"></div>
2
    <br>
3
    <div class="base example"></div>

1
    .example{
2
        text-shadow: 5px 5px 10px rgba(243, 40, 40, 0.8);
3
        /* 2px décalage horizontal, 5px décalage vertical, 5px rayon de flou, couleur rgba(243, 40, 40, 0.8) */
4
        font-size: 100px;
5
    }

1
    <div class="example">Texte de test</div>

1
    .example{
2
        background: linear-gradient(to bottom, red, blue);
3
        /* Dégradé du haut vers le bas, du rouge au bleu */
4
        height: 100px;
5
    }

1
    <div class="example"></div>

1
    .example{
2
        background: radial-gradient(circle, red, blue);
3
        /* Dégradé circulaire, du rouge au bleu */
4
        height: 100px;
5
    }

1
    <div class="example"></div>

1
.base {
2
    height: 100px;
3
    width: 100px;
4
    background-color: lightblue;
5
}
6
.example1 {
7
    transform: translate(50px, 20px);
8
    /* Déplacer de 50px horizontalement, 20px verticalement */
9
}
10
.example2 {
11
  transform: scale(0.5);
12
  /* Réduire l'élément à 0,5 fois */
13
}
14
.example3 {
15
    transform: rotate(45deg);
16
    /* Rotation de 45 degrés dans le sens horaire */
17
}
18
.example4 {
19
    transform: skew(50deg, 20deg);
20
    /* Incliner de 50 degrés horizontalement, 20 degrés verticalement */
21
}
22
.example5 {
23
    transform: translate(50px, 60px) rotate(45deg) scale(1.5);
24
}

1
    <div class="base example1"></div>
2
    <div class="base example2"></div>
3
    <div class="base example3"></div>
4
    <div class="base example4"></div>
5
    <div class="base example5"></div>