Curso IT Fundamentos CSS 026_Visualización, Visibilidad, Efectos

1
Oculta el elemento, haciéndolo invisible en la página y sin ocupar espacio ni afectar el diseño. El elemento no se mostrará en la página.

1
    .example{
2
        display: none;
3
    }

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

1
Muestra el elemento como un elemento de bloque. Se muestra en la página como un bloque, con un ancho predeterminado del 100% del contenedor padre.
2
Un elemento de bloque ocupa todo el ancho, con saltos de línea antes y después.

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

1
    <a class="base example" href="">Prueba de hipervínculo</a>
2
    <br>
3
    <a class="base" href="">Prueba de hipervínculo</a>

1
Muestra el elemento como un elemento en línea. Los elementos se muestran en la misma línea, no ocupan una línea completa, el ancho está determinado por el contenido.
2
Los elementos en línea solo necesitan el ancho necesario y no fuerzan saltos de línea.

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

1
    <p class="base example">Prueba de párrafo</p>
2
    <p class="base">Prueba de párrafo</p>

1
Muestra el elemento como un elemento de bloque en línea. Los elementos se muestran en la misma línea, pero se pueden establecer propiedades de elementos de bloque como ancho, alto, etc.

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">Prueba de párrafo</p>
2
    <p class="example1">Prueba de párrafo</p>
3
    <p class="example2">Prueba de párrafo</p>

1
Establece que el elemento sea visible.

1
  .example{
2
      visibility: visible;
3
  }

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

1
Establece que el elemento sea invisible, pero el elemento oculto aún ocupa el mismo espacio que antes. Es decir, aunque el elemento está oculto, sigue afectando el diseño.

1
  .example{
2
      visibility: hidden;
3
  }

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

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

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

1
    .example{
2
        background: linear-gradient(to bottom, red, blue);
3
        /* Degradado de arriba a abajo, de rojo a azul */
4
        height: 100px;
5
    }

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

1
    .example{
2
        background: radial-gradient(circle, red, blue);
3
        /* Degradado circular, de rojo a 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 el elemento a 0.5 veces */
13
}
14
.example3 {
15
    transform: rotate(45deg);
16
    /* Rotar 45 grados en sentido horario */
17
}
18
.example4 {
19
    transform: skew(50deg, 20deg);
20
    /* Inclinar 50 grados horizontalmente, 20 grados 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>