Recopilación de tips CSS

En este artículo te voy a mostrar una breve lista de maneras de aplicar CSS que he tenido que utilizar tanto en proyectos profesionales como personales. Es una lista personal con algunos de los problemas a los me he enfrentado. Se trata de una serie de estilos que se aplican comúnmente en una página o aplicación web, y que siempre acabo buscando en Internet.

1. Cambiar el estilo de la fuente de la lista, pero no el texto.

En muchas ocasiones he necesitado implementar esta característica: cambiar el estilo de “bullet” de una lista pero manteniendo la fuente del texto de la misma. Hemos de tener en cuenta que el código del ejemplo se aplica a listas ordenadas, es decir, cuyas bullets sean letras, números o símbolos. Es un problema sencillo de resolver de la siguiente manera:

ol.my-list {
    // aplicamos el estilo a toda la lista
    font-family: Consolas;
    color: blue;
}

ol.my-list span {
    // aplicamos el estilo sólo al texto de la lista
    font-family:  Helvetica;
    color: black;
}

Pero para esto, tendríamos que tener una estructura HTML como la siguiente:

1. First Item

Si queremos omitir utilizar una etiqueta HTML adicional (en este caso, ), hemos de configurar el comportamiento de la lista utilizando CSS y añadir el estilo que queramos aplicar. Para ello, se necesitan utilizar tres conceptos clave: los pseudo-elementos (:before, :after), cómo implementar el “contador” (item, sección, capítulo) y los tipos que puede tener una lista (números, letras, números romanos, letras en mayúscula…).

ol.my-list {
    // añadimos un padding para separar el texto del símbolo
    padding-left: 1.5em;
}

ol.my-list li {
    list-style-type: none;
    counter-increment: item;
}

ol.my-list li:before {
    // cambiamos el estilo que queramos, y añadimos un padding para separar el texto
    font-weight: bold;
    color: blue;
    padding-right: .5em;
    content: counter(item, lower-alpha);
}

En este caso, veremos la lista así:

a Primer Elemento
b Segundo Elemento
c Tercer Elemento

Para utilizar un formato ‘a.’, bastaría con modificar el atributo ‘content’ del pseudo-elemento :before.

content: counter(item, lower-alpha) ‘.’;

2. Cambiar los “bullets” de una lista por iconos

Siguiendo la línea del punto anterior, usaremos los pseudo-elementos para cambiar los símbolos usuales de una lista por iconos personalizados.

ul.my-list li:before {
    font-weight: bold;
    color: blue;
    padding-right: .5em;
    font-family: “My Font With Icons”;
    content: ‘\f004’;
}

En el atributo “content”, como podéis ver, hay una cadena de texto que identifica un icono. Personalmente, esto hace que pierda legibilidad, ¿qué icono se está representando?. Normalmente, ya que suelo utilizar un pre-procesador CSS, la solución más fácil es identificar los iconos con variables

content: $heart-icon;

También podemos hacer uso del soporte de variables CSS (http://caniuse.com/#feat=css-variables), como muestro en el siguiente ejemplo:

ul.my-list {
    --heart-icon: ‘‘\f004’;
}

ul.my-list li:before {
    content: var(--heart-icon);
} 

3. Imagen de fondo que ocupe todo el contenedor

No sé vosotros, pero hacer que la imagen de fondo ocupe toda la etiqueta contenedora es algo que por alguna razón no se clava a fuego en mi mente y siempre acabo buscando cómo se hace. Para que no se me olvide, lo tengo en un post-it. Por esta razón, a pesar de la sencillez de esta solución, tenía la necesidad de incluirlo en esta lista :)

.my-container {
    background: url(assets/images/bg.png) no-repeat center center fixed;
    background-size: cover;
}

4. Poner el fondo borroso al mostrar un modal

Esto se usa para que la atención se centre en el modal, por lo que el contenido de éste aparece nítido mientras que el resto de la página se ve con un filtro borroso.

.pagina-modal-abierto {
  .contenedor {
    background-image: url('assets/images/blur.svg'); no-repeat cover;
    -webkit-filter: blur(2px); /* Chrome, Safari, Opera */
    filter:              blur(3px);
  }
}

Como vemos en el ejemplo, se añade una imagen ‘blur’ ya que los filtros aún no tienen soporte para todos los navegadores. Para añadir esta imagen, basta con crear un nuevo archivo llamado ‘blur.svg’ y pegar el siguiente contenido:

5. Cambiar el estilo de un checkbox

Los checkboxes cumplen muy bien su función, pero no suelen encajar bien con el diseño de una página o aplicación, por lo que en los diseños que incluyen checkboxes suelen utilizar estilos propios o cambiar incluso el comportamiento del “check” utilizando un “toggle”. De nuevo, acuden al rescate nuestros amigos los pseudo-elementos y el uso de iconos en el atributo “content”.

Lo primero es tener en cuenta en qué estados se puede encontrar un checkbox:

• Checkbox habilitado sin marcar
• Checkbox habilitado marcado
• Checkbox deshabilitado sin marcar
• Checkbox deshabilitado marcado

Para cambiar el estilo, nos valdremos de la etiqueta “label” que acompaña a los “input” (los checkboxes son un tipo de input), que además nos va a ayudar a mantener la accesibilidad del elemento. Lo que se hace es que la etiqueta “label” cargue con el estilo del checkbox. Esto se hace porque este input se marca/desmarca también no sólo al hacer click sobre él, sino al hacerlo sobre su label.

Siendo ésta la estructura HTML de nuestro checkbox:

1. Ocultamos el input

.my-checkbox:not(:checked),
.my-checkbox:checked {
    opacity: 0;
    position: absolute;
}

2. Ajustamos el label, al que desplazaremos a la derecha utilizando padding-left, que será el espacio que ocupe el nuevo checkbox.

.my-checkbox:not(:checked) + label,
.my-checkbox:checked + label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

3. El pseudo-elemento label:before será la cajita del checkbox.

.my-checkbox:not(:checked) + label:before,
.my-checkbox:checked + label:before {
    content: ''”;
    position: absolute;
    width: 20px; 
    height: 20px;
    left: 0; 
    top: -1px;
    border: 1px solid silver;
    background: white;
    border-radius: 2px;
}

4. El pseudo-elemento label:after es el que contendrá el checkmark

.my-checkbox:not(:checked) + label:after,
.my-checkbox:checked + label:after {
  content: 'v'; 
  position: absolute;
  top: 1px; 
  left: 4px;
  font-size: 20px;
  line-height: 1;
  color: green;
}

Aquí en el “content” hemos añadido directamente el símbolo, pero se podría añadir un icono (como hemos mostrado en el primer ejemplo de las listas).

5. Ocultamos/mostramos el checkmark según el input esté marcado o no

.my-checkbox:not(:checked) + label:after {
  display: block;
}
.my-checkbox:checked + label:after {
  display: none;
}

6. Añadimos estilo para los checkboxes deshabilitados

.my-checkbox:disabled:not(:checked) + label:before,
.my-checkbox:disabled:checked + label:before {
  box-shadow: none;
  border-color: darkgray;
  background-color: silver;
}

.my-checkbox:disabled:not(:checked) + label:after,
.my-checkbox:disabled:checked + label:after {
  color: gray;
}

Si quieres hacer algo más complejo, o simplemente prefieres ahorrar tiempo y no calentarte demasiado el coco, puedes generarlos automáticamente en webs como https://proto.io/freebies/onoff/

6. Cambiar el estilo de la primera letra de un texto

En muchos blogs se utiliza esta simple técnica, ya que se encuentra presente en muchos libros y se ha extrapolado a los textos en internet.

p.my-text {
    font-size: 1.5em;
}

p.my-text:first-letter{
    font-weight: bold;
    font-size: 2.5em;
}

Ya lo tendríamos, y se vería así:

Si queremos que se vea dentro del texto, hemos de ajustar el estilo de la primera letra para que “encaje dentro” del párrafo.

p.my-text {
    font-size: 1.5em;
}

p.my-text:first-letter{
    font-weight: bold;
    font-size: 2.5em;
    float:left;
    margin-top: -0.07em;
    margin-right: 0.1em;
    margin-bottom: -0.2em;
}

7. Bordes múltiples

En ocasiones, ya sea para enfatizar, mejorar el “affordance” o simplemente cambiar la estética de un contenedor o imagen, recurrimos los bordes. Sin embargo, la sintaxis de CSS sólo nos deja añadir un nivel de borde. Es decir, podemos tener cuatro hasta estilos de bordes sobre un mismo contenedor (top, right, bottom, left). En el caso de que queramos añadir más niveles de bordes, a día de hoy no nos queda otra que usar un truco: el atributo box-shadow. Gracias a este atributo, podemos además tener tantos niveles de bordes como queramos. Para esto, haremos los siguiente:

box-shadow: 0 0 0 tamaño color;

Por ejemplo:

box-shadow: 0 0 0 20px blue;

Para añadir más bordes, sólo tenemos que seguir añadiendo esta estructura en el atributo box-shadow:

box-shadow: 0 0 0 10px blue, 0 0 0 20px red, 0 0 0 30px green;

Esto hará que el tamaño de nuestro contenedor se amplíe. Cuando utilizamos el atributo “border”, lo que pasa es que el tamaño del contenedor se hace más grande ya que ocupa tamaño del contenedor + tamaño del borde. Esto se soluciona con el atributo “box-sizing: border-box”, que hace que el borde quede “dentro” del contenedor (por así decirlo) y por lo tanto el tamaño de éste siga siendo el mismo. Sin embargo, esto no vale con los “box-shadow”. Si queremos mantener el tamaño del contenedor, tenemos que añadir “inset”:

box-shadow: inset 0 0 0 10px blue, inset 0 0 0 20px red, inset 0 0 0 30px green;

Si lo comparamos con la imagen anterior, ahora el orden de los colores ha cambiado, por lo que es algo que tienes que tener en cuenta a la hora de utilizar esta propiedad. El “borde” verde tiene un tamaño de 30px, por lo que al estar “hacia fuera” es el que se ve en la capa exterior, ya que los demás bordes tienen un tamaño inferior. Sin embargo, al utilizar “inset” y estar “hacia dentro”, es el que se ve en la capa interior.

Conclusión

Espero que este artículo recopilatorio te haya sido de utilidad. Son recursos que tengo guardados desde hace mucho tiempo y a los que acudo con frecuencia. Si conoces alguno más, déjalo en los comentarios, ¡seguro que a alguien le puede servir!