Curso IT Fundamentos CSS 026_Exibição, Visibilidade, Efeitos

1
Oculta o elemento, tornando-o invisível na página e sem ocupar espaço, sem afetar o layout. O elemento não será exibido na página.

1
    .example{
2
        display: none;
3
    }

1
    <div class="example">Texto de teste</div>ABC123

1
Exibe o elemento como um elemento de bloco. É exibido na página como um bloco, com largura padrão de 100% do contêiner pai.
2
Um elemento de bloco ocupa toda a largura, com quebras de linha antes e depois.

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

1
    <a class="base example" href="">Teste de hiperlink</a>
2
    <br>
3
    <a class="base" href="">Teste de hiperlink</a>

1
Exibe o elemento como um elemento inline. Os elementos são exibidos na mesma linha, não ocupam uma linha inteira, a largura é determinada pelo conteúdo.
2
Elementos inline precisam apenas da largura necessária e não forçam quebras de linha.

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

1
    <p class="base example">Teste de parágrafo</p>
2
    <p class="base">Teste de parágrafo</p>

1
Exibe o elemento como um elemento de bloco inline. Os elementos são exibidos na mesma linha, mas propriedades de elementos de bloco como largura, altura, etc. podem ser definidas.

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">Teste de parágrafo</p>
2
    <p class="example1">Teste de parágrafo</p>
3
    <p class="example2">Teste de parágrafo</p>

1
Define o elemento como visível.

1
  .example{
2
      visibility: visible;
3
  }

1
  <div class="example">Texto de teste</div>ABC123

1
Define o elemento como invisível, mas o elemento oculto ainda ocupa o mesmo espaço de antes. Ou seja, embora o elemento esteja oculto, ele ainda afeta o layout.

1
  .example{
2
      visibility: hidden;
3
  }

1
  <div class="example">Texto de teste</div>ABC123

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.example{
7
    opacity: 0.5;
8
    /* 50% de transparência */
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 deslocamento horizontal, 5px deslocamento vertical, 5px raio de desfoque, cor rgba(243, 40, 40, 0.8) */
4
        font-size: 100px;
5
    }

1
    <div class="example">Texto de teste</div>

1
    .example{
2
        background: linear-gradient(to bottom, red, blue);
3
        /* Gradiente de cima para baixo, de vermelho para azul */
4
        height: 100px;
5
    }

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

1
    .example{
2
        background: radial-gradient(circle, red, blue);
3
        /* Gradiente circular, de vermelho para azul */
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
    /* Mover 50px horizontalmente, 20px verticalmente */
9
}
10
.example2 {
11
  transform: scale(0.5);
12
  /* Escalar o elemento para 0,5 vezes */
13
}
14
.example3 {
15
    transform: rotate(45deg);
16
    /* Rotacionar 45 graus no sentido horário */
17
}
18
.example4 {
19
    transform: skew(50deg, 20deg);
20
    /* Inclinar 50 graus horizontalmente, 20 graus verticalmente */
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>