El lenguaje CSS permite tener un gran control sobre las cajas de los elementos HTML. A la posibilidad que ofrece para modificar su aspecto, como añadir rellenos, modificar los bordes y sus esquinas o colorear el fondo, hay que añadir el control de la visualización de las cajas, ya que es de gran utilidad.
En CSS existen varias propiedades para modificar la visualización de un elemento HTML, y cada propiedad tiene sus campos de uso.
Propiedades de visualización descritas en este artículo:
| Propiedad | Descripción |
|---|---|
display | Controla la forma de visualización de un elemento (bloque, línea, etc), e incluso se puede ocultar. |
visibility | Especifica la visibilidad de un elemento. |
opacity | Especifica la transparencia de un elemento. |
Mediante estas propiedades es posible cambiar el tipo de elemento HTML (bloque, línea…), ocultarlo y/o hacer invisible toda su caja. Estas tres propiedades son de uso imprescindible en efectos avanzados y animaciones. Habitualmente se usan junto con JavaScript para crear diseños interactivos más complejos.
Cuando se trata de ocultar un elemento, las tres propiedades permiten esconderlo a ojos del usuario, pero tienen un comportamiento diferente. En el caso de display, desaparece la caja entera, como si no estuviera en el documento. En cambio, con la propiedad visibility la caja se vuelve invisible. Con opacity se puede indicar un nivel de transparencia sobre el elemento en cuestión.
Veamos un par de ejemplos con cuatro cajas numeradas.
.oculta1 {
display: none;
}
.oculta2 {
visibility: hidden;
}
.oculta3 {
opacity: 0;
}
Ejemplo de ocultación con display: none:
1234
Ejemplo de ocultación con visibility: hidden:
1234
Ejemplo de ocultación con opacity: 0:
1234
Tal y como se puede ver, en el primer ejemplo la ausencia de la caja número 2 ha provocado el desplazamiento de las cajas 2 y 3, por lo que se ha modificado el flujo natural de los elementos. En el segundo ejemplo, la ausencia de la caja 2 ha dejado un hueco invisible; es como si fuera transparente. En cambio, en el último ejemplo, la caja 2 es realmente transparente en su totalidad.
La propiedad ‘display’
La propiedad display se utiliza para controlar la forma en la que se visualiza un elemento HTML. Con esta propiedad puede cambiarse el tipo de elemento: un elemento de bloque puede ser un elemento de línea, y viceversa. También se puede ocultar totalmente un elemento HTML, es decir, que desaparece de la página y provoca que el resto de elementos se reubiquen.
Por defecto, cada elemento HTML tiene un valor de visualización. De hecho, en HTML se clasifica los elementos en dos grupos: los elementos de bloque y los elementos de línea. Por ejemplo, los <div> son de bloque y sería redundante especificar la propiedad display con el valor block. Los <span> son de línea, por lo que es como si tuvieran el valor inline especificado.
Tabla de valores de la propiedad display:
| Valor | Descripción |
|---|---|
block | El elemento genera una caja de elemento de bloque, se apila en vertical y ocupa el ancho máximo posible. |
inline | Valor inicial. El elemento genera una o más cajas de elemento de línea, se colocan en horizontal. El ancho se ajusta a su contenido. Ignora las propiedades width y height. |
inline-block | Es una combinación de inline y block. El elemento se comporta como si fuera de línea (inline), pero ignora las propiedades width y height. |
none | El elemento desaparece por completo y provoca cambios en la posición de los elementos siguientes (si caben). Esta propiedad afecta a todo su contenido. |
flex | El elemento usa el modelo de cajas flexibles (flexbox) y se comporta como un elemento de bloque. |
inline-flex | El elemento usa el modelo de cajas flexibles (flexbox) y se comporta como un elemento de línea. |
grid | El elemento usa el modelo de cuadrículas o rejillas (grid) en bloque, también usado en diseño web responsive. |
inline-grid | El elemento usa el modelo de cuadrículas o rejillas (grid) de línea, por lo que la caja se adapta a su contenido. |
list-item | El elemento se comporta como si fuera un elemento de una lista, es decir, el del elemento <li>. |
table | El elemento se comporta como si fuera una tabla (elemento <table>). Es muy útil para tratar a sus elementos hijos como filas y celdas de una tabla. |
inline-table | El elemento se comporta como si fuera una tabla (elemento <table>) y, además, se comporta como un elemento de línea. |
table-row | El elemento se comporta como si fuera una fila de una tabla (elemento <tr>). |
table-cell | El elemento se comporta como si fuera una celda de datos de una tabla (elementos <th> y <td>). |
table-caption | El elemento se comporta como si fuera el título descriptivo de una tabla (elemento <caption>). |
table-column | El elemento se comporta como si fuera un elemento <col> para especificar propiedades de columnas. |
table-column-group | El elemento se comporta como si fuera un grupo de columnas de una tabla (elemento <colgroup>). |
table-footer-group | El elemento se comporta como si fuera el pie de una tabla (elemento <tfoot>). |
table-header-group | El elemento se comporta como si fuera la cabecera de una tabla (elemento <thead>). |
table-row-group | El elemento se comporta como si fuera el cuerpo de una tabla (elemento <tbody>). |
La propiedad ‘visibility’
La propiedad visibility permite esconder o mostrar un elemento HTML. Cuando un elemento es ocultado mediante esta propiedad, el elemento sigue ocupando su espacio pero se vuelve totalmente invisible. También es habitual que se use esta propiedad junto con JavaScript para crear efectos.
Tabla de valores de la propiedad visibility:
| Valor | Descripción |
|---|---|
visible | Valor por defecto. El elemento es visible. |
hidden | El elemento pasa a ser invisible pero sigue ocupando su posición. |
collapse | Este valor se utiliza para esconder filas o columnas de una tabla. |
Cuando se carga el documento HTML en el navegador, por defecto todos los elementos son visibles, excepto si se indica lo contrario.
La propiedad ‘opacity’
La propiedad opacity permite definir un grado de transparencia que se aplica sobre un elemento HTML, y puede aplicarse sobre cualquier tipo de objeto. Su valor será un número decimal en tanto por uno, es decir, que para aplicar una transparencia del 50% se indicará el valor 0.5.
En el siguiente ejemplo se han aplicado 5 grados de opacidad, partiendo del 20% hasta el 100%. Este es el código CSS:
.op20 {
opacity: 0.20;
}
.op40 {
opacity: 0.40;
}
.op60 {
opacity: 0.60;
}
.op80 {
opacity: 0.80;
}
.op100 {
opacity: 1;
}
Resultado:
12345
Tal y como se puede observar, aparecen cinco cajas con un grado de opacidad que va incrementando desde una quinta parte hasta la totalidad. La transparencia permite que se visualice el fondo por debajo. Esta característica facilita la creación de bonitos efectos cuando se trabaja con imágenes.
