Ejemplo de utilización de propiedades CSS avanzadas

Allgunos ejemplos de utilización de las propiedades CSS avanzadas "content", "counter-reset" y "counter-increment".

Ya hemos visto una descripción de las propiedades “content”, “counter-reset” y “counter-increment”, con algunos ejemplos elementales de la utilización de estas propiedades. Sin embargo, estos ejemplos básicos solo nos muestra una parte de las posibilidades de estas poderosas herramientas CSS. Es por ello que en el presente artículo mostraremos algunos ejemplos más avanzados de estas propiedades CSS.

Utilización de imágenes como contenido

Para incluir una imagen como contenido de la propiedad “content”, solo es necesario incluir una URL dirigida a una imagen para que ella se incluya antes o después del contenido de la etiqueta HTML. En el ejemplo que hemos seleccionado, incluiremos una imagen en el inicio de los párrafos. Los códigos empleados para este ejemplo son los siguientes:

<p class="img">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In purus nibh, elementum quis mollis ac, dapibus sit amet turpis. Phasellus mauris ligula, suscipit quis lacinia iaculis, consequat at ipsum. Maecenas aliquet dapibus felis eget faucibus. Pellentesque eget eros tristique nunc tristique aliquet.</p>
<p class="img">Donec fringilla elit dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean euismod euismod elit eu semper. Aliquam erat volutpat. Maecenas sed libero sed nulla mattis placerat quis ut tortor. Nam fringilla nulla volutpat felis molestie accumsan. Nulla lacinia iaculis varius.</p>

p.img:before {
  content: url(imagenes/boton1.jpg) " ";
  }

Como puede verse, la propiedad “content” tiene como valor una URL que está dirigida a una imagen. Luego de la URL, se ha establecido un espacio en blanco (entre comillas), para que la imagen aparezca separada del contenido de la etiqueta <p>. Tengan en cuenta que, para diferenciar aquellos párrafos que se mostrarán con la propiedad “content” de los demás párrafos, es conveniente utilizar una clase.

El resultado es el siguiente:

División de textos en capítulos

Una de las utilizaciones más corrientes de las propiedades “counter-reset” y “counter-increment”, es la división de textos en capítulos, secciones, etc., como mostraremos en el ejemplo que continúa:

body  {
  counter-reset: capitulo 0;
  }
  
h2  {
  font: normal 16px tahoma, verdana, sans-serif;
  color: #f60;
  }
  
h2:before  {
  content: "Capítulo " counter(capitulo) " - ";
  counter-increment: capitulo 1;
  color: #06f;
  }

<h2>Título de sección</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In purus nibh, elementum quis mollis ac, dapibus sit amet turpis. Phasellus mauris ligula, suscipit quis lacinia iaculis, consequat at ipsum. Maecenas aliquet dapibus felis eget faucibus. Pellentesque eget eros tristique nunc tristique aliquet. Donec ac dui lorem, vel posuere turpis.</p>
  <h2>Segundo título de sección</h2>
  <p>Donec fringilla elit dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean euismod euismod elit eu semper. Aliquam erat volutpat. Maecenas sed libero sed nulla mattis placerat quis ut tortor. Nam fringilla nulla volutpat felis molestie accumsan. Nulla lacinia iaculis varius. Etiam mollis metus vel velit molestie quis convallis nisl vehicula.</p>

En el ejemplo, vemos como ante cada título <h2> se antepone un contenido que comienza con la palabra Capítulo, seguida de un espacio en blanco, para finalizar con un número, que se presentará en forma incremental en cada uno de los títulos. Para una mejor visualización del ejemplo, hemos dado un color diferente a los elementos incluidos en la propiedad “content”, de forma tal que se diferencie del resto del texto de la etiqueta HTML, aunque esto no es absolutamente necesario.

Creación de un índice de tres niveles

Una de las formas más avanzadas de la utilización de estas propiedades, es la creación de numeraciones con varios niveles. Para llevar adelante este tipo de numeraciones, es necesario que se utilice la función “counters” en lugar de la función “counter” en la propiedad “content”.

La función “counters” puede incluir más de un elemento, como puede verse en el código del ejemplo, en el que luego del nombre del contador que se utilizará, aparece encerrado en comillas simples un punto, el que se utilizará como separador de los diferentes números de los contadores. El código de ejemplo es el siguiente:

<ol class="lista">
    <li>Elemento de índice</li>
    <li>Elemento de índice</li>
    <li>Elemento de índice</li>
      <ol class="lista">
        <li>Elemento de índice</li>
        <li>Elemento de índice</li>
          <ol class="lista">
            <li>Elemento de índice</li>
            <li>Elemento de índice</li>
            <li>Elemento de índice</li>
          </ol>
        </li>
        <li>Elemento de índice</li>
      </ol>
    </li>
    <li>Elemento de índice</li>
  </ol>

ol.lista  {
  counter-reset: lista 0;
  list-style: none;
  clear: both;
  padding: 10px 30px;
  }

ol.lista li {
  padding: 2px 10px;
  width: 200px;
  font: normal 12px tahoma, verdana, sans-serif;
  color: black;
  }
  
ol.lista ol.lista li {
  color: blue;
  }
  
ol.lista ol.lista ol.lista li {
  color: red;
  }
  
ol.lista li:before {
  content: "Capítulo " counters(lista, '.') " - ";
  counter-increment: lista 1;
  }

Para el ejemplo se han utilizado listas, pero pueden utilizarse otras etiquetas que puedan anidarse, como es el caso de los <div>, dentro de los cuales se deben utilizar párrafos para que lleven la numeración generada por los contadores.

El ejemplo que vemos en el código, se verá de la siguiente forma:

Creación de listas con numeración corrida

El ejemplo que sigue a continuación muestra como se pueden utilizar listas ordenadas para generar tres listas flotantes que tengan numeración corrida, es decir, que el primer elemento de la segunda lista tendrá el número siguiente al último elemento de la primera lista.

  <ol class="flotante1">
    <li>Elemento</li>
    <li>Elemento</li>
    <li>Elemento</li>
    <li>Elemento</li>
    <li>Elemento</li>
  </ol>
  <ol class="flotante2">
    <li>Elemento</li>
    <li>Elemento</li>
    <li>Elemento</li>
    <li>Elemento</li>
  </ol>
  <ol class="flotante3">
    <li>Elemento</li>
    <li>Elemento</li>
    <li>Elemento</li>
    <li>Elemento</li>
    <li>Elemento</li>
  </ol>

.flotante1, .flotante2, .flotante3  {
  float: left;
  width: 29%;
  padding: 1%;
  border: solid 1px #aaa;
  margin-left: 1%;
  list-style: none;
  }
  
.flotante1 li, .flotante2 li, .flotante3 li  {
  background: #eee;
  border: solid 1px #fff;
  padding: 1px 10px;
  }
  
ol.flotante1  {
  counter-reset: uno 0;
  }

ol.flotante1 li:after  {
  content: " " counter(uno);
  counter-increment: uno 1;
  }
  
ol.flotante2 li:after  {
  content: " " counter(uno);
  counter-increment: uno 1;
  }
  
ol.flotante3 li:after  {
  content: " " counter(uno);
  counter-increment: uno 1;
  }

En el código vemos que se ha creado una clase diferente para cada una de las listas ordenadas, de forma tal de poder establecer la numeración de inicio de cada uno de los contadores. El ejemplo que vemos en este caso, se verá de esta forma:

Conclusión

Por supuesto que estos son solo algunos ejemplos de las muchas posibilidades que ofrece la utilización de estas propiedades. En definitiva, además de la aplicación de los ejemplos concretos que se puedan encontrar, siempre la imaginación propia es la mejor forma de encontrar todas las utilidades posibles para cualquier tipo de propiedad CSS, a lo que debemos agregar mucha práctica.