El lenguaje CSS (Cascading Style Sheets) re­vo­lu­cio­nó la World Wide Web. En una época en la que el diseño, la ti­po­gra­fía y otros elementos gráficos eran pro­gra­ma­dos con di­fi­cu­l­tad en el documento HTML, la im­ple­me­n­ta­ción de las hojas de estilo convirtió a esta in­fle­xi­ble me­to­do­lo­gía de diseño en algo del pasado. Además, desde la aparición de HTML5, los elementos de co­n­fi­gu­ra­ción en HTML han entrado en desuso. A partir de ahora, la pre­se­n­ta­ción y la es­tru­c­tu­ra de un documento son tratados por separado.

El de­sa­rro­llo de CSS está a cargo de W3C (World Wide Web Co­n­so­r­tium) y se hace de manera constante, lo que ha abierto la po­si­bi­li­dad a opciones de diseño cada vez más variadas y complejas, co­n­vi­r­tie­n­do su uso en algo cada vez más co­m­pli­ca­do. A co­n­ti­nua­ción, te pre­se­n­ta­mos una co­m­pi­la­ción de snippets y trucos CSS que se­gu­ra­me­n­te re­su­l­ta­rán útiles e in­te­re­sa­n­tes para tu proyecto web.

Cómo enumerar títulos

La nu­me­ra­ción de títulos y su­b­tí­tu­los dentro de un documento HTML se hace, no­r­ma­l­me­n­te, de forma manual o por script. Sin embargo, una manera más simple de hacerlo es mediante hojas de estilo. Este viejo truco CSS es soportado por todos los na­ve­ga­do­res y funciona bajo el siguiente fragmento de código: 

#Título {
counter-reset: heading;
}
h1:before {
    content: counter(heading)") ";
    counter-increment: heading;
}
h1 {
    counter-reset: subheading;
}
h2:before {
    content: counter(heading)"." counter(subheading)") ";
    counter-increment: subheading;
}
body{
    font-family: courier new;
}

Como resultado, los títulos y su­b­tí­tu­los se verán así:

Imagen: Numeración de títulos con CSS
Con CSS se pueden numerar títulos y su­b­tí­tu­los

Ocultar elementos sin afectar al SEO de tu web

Ocultar elementos como “display: none;” o “vi­si­bi­li­ty: hidden;” del documento HTML de una web no es bien recibido por los motores de búsqueda. A pesar de que su uso excesivo no es re­co­me­n­da­ble, el siguiente comando CSS re­pre­se­n­ta una excelente po­si­bi­li­dad para ocultar dichos elementos: 

.hidden {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

Crear sombras de texto

Aunque es posible crear sombras de texto uti­li­za­n­do programas gráficos, muchas veces no todos los usuarios cuentan con las licencias o co­no­ci­mie­n­tos ne­ce­sa­rios para hacerlo y, además, al de­ca­n­tar­se por esta opción, el contenido se hace ilegible para los motores de búsqueda. Desde la tercera versión de CSS se han venido im­ple­me­n­ta­n­do di­fe­re­n­tes efectos que, co­m­bi­na­dos, arrojan re­su­l­ta­dos vi­sua­l­me­n­te atra­c­ti­vos y no alteran los elementos de texto su­b­ya­ce­n­tes. El siguiente truco en CSS eje­m­pli­fi­ca el sombreado de texto para este lenguaje de hojas de estilo: 

p {
font-size: 50pt;
font-family: sans-serif;
text-shadow: 10px 11px 18px rgba(300, 180, 100, 1),
-10px -11px 18px red;
}

Este código define dos sombras (text shadow) para elementos <p>. El número de sombras puede ampliarse según se desee; no olvides poner siempre una coma para separar las cifras. Los dos primeros elementos de­te­r­mi­nan la posición de la sombra (primero la coor­de­na­da para X y luego para Y). La tercera cifra define el tamaño. Por último se es­pe­ci­fi­ca el color de la sombra, ya sea por in­di­ca­ción RGBA (300, 180, 100, 1) como en la primera línea, o por in­di­ca­ción absoluta como en la segunda línea (red). Una vez aplicado el anterior comando CSS, el texto se verá de la siguiente forma:

Imagen: Sombreado de texto con CSS
Este es el aspecto de un texto al que se ha aplicado sombreado con un fragmento de código CSS

Editar elementos web con los filtros CSS

CSS no solo es una buena al­te­r­na­ti­va a Photoshop en cuanto al sombreado de texto: este lenguaje de hojas de estilo también cuenta con in­te­re­sa­n­tes filtros y efectos visuales similares a los de cualquier programa de edición de imágenes. Im­ple­me­n­tar algunos trucos CSS hace posible editar y modificar el diseño de gráficos, fondos, textos o vídeos, au­me­n­ta­n­do el brillo, cambiando el contraste o co­n­vi­r­tié­n­do­los a escala de grises. Estos filtros CSS están di­s­po­ni­bles para casi todos los na­ve­ga­do­res modernos (con excepción de Internet Explorer). Eje­m­pli­fi­ca­mos su sintaxis con el filtro de escala de grises: 

.grayscale {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

En este caso, el filtro determina “grayscale”, seguido del valor es­pe­cí­fi­co, entre pa­ré­n­te­sis, que determina la in­te­n­si­dad del filtro. Aquí, el valor (1) significa 100%.

Imagen: Fotos de paisaje con el filtro de grises de CSS
CSS permite modificar elementos gráficos de una web con filtros como el "greyscale" de la imagen

Otros filtros CSS que pueden resultar de gran utilidad:

Filtro De­s­cri­p­ción Valor
di­fu­mi­na­do(VALOR) Enfoque Radio en píxeles
brillo(VALOR) Ilu­mi­na­ción Estándar: 1, Aclarar: >1, Oscurecer: <1
contraste(VALOR) Valores tonales Estándar: 1, Aclarar: >1, Oscurecer: <1
invertir(VALOR) Invertir colores Valor de 1: Invertir co­m­ple­ta­me­n­te
opacidad(VALOR) Nivel de tra­n­s­pa­re­n­cia Valor máximo: 1 (hace des­apa­re­cer por completo al elemento)
sa­tu­ra­ción(VALOR) In­te­n­si­dad de matices Estándar: 1, Aumentar: >1, Disminuir: <1
sepia(VALOR) Tonos sepia Valor máximo: 1 (equivale a un tono sepia del 100%)

Alinear títulos de manera óptima

No existen normas estrictas para los textos de­s­cri­p­ti­vos de una imagen. Un título de imagen centrado se ve bien cuando no tiene más de una línea, de lo contrario el efecto no es tan bueno. Por otra parte, una ali­nea­ción absoluta hacia la izquierda es, a menudo, una variante visual no muy agradable. La mejor solución es manejar los cambios desde el elemento co­n­te­ne­dor <figure>, así como en <fi­g­ca­p­tion>, ambos uti­li­za­dos, por defecto, para los títulos de las imágenes. Aquí el co­rre­s­po­n­die­n­te snippet: 

figure {
    text-align: center; 
}
figcaption {
    display: inline-block; 
    text-align: left;
}

Este truco CSS hace que el título de la imagen se alinee hacia la izquierda, pero se muestre en el centro como co­n­se­cue­n­cia de la es­pe­ci­fi­ca­ción “inline-block” (siempre y cuando no exceda la anchura de la imagen).

Destacar la primera letra de un párrafo

Las llamadas pseu­do­cla­ses permiten in­di­vi­dua­li­zar elementos HTML es­pe­cí­fi­cos, como, por ejemplo, la primera letra de un párrafo. Utilizar “::first-letter” facilita su edición en relatos, es­pe­cia­l­me­n­te cuentos in­fa­n­ti­les: 

p{
    font-family: "bookman old style"
}
p:first-child::first-letter{
    font-family: "papyrus";
    font-size: 25px
    font-weight: bold
}

En este snippet en pa­r­ti­cu­lar se utiliza “Papyrus” como fuente estándar para la primera letra, y “Bookman Old Style” para el resto del texto.

Imagen: Fragmento de texto con letra capital inicial
Las pseu­do­cla­ses de CSS permiten destacar elementos HTML por separado. En el ejemplo de la imagen se utiliza la clase ::first-letter para crear una letra capital inicial al comienzo del párrafo

Usar el efecto Parallax

Muchas páginas web modernas se basan en el efecto Parallax (en español paralaje), una tendencia que crea una ligera sensación de pro­fu­n­di­dad y que se activa cuando el usuario mueve el cursor de su ratón. Este efecto, creado en co­m­bi­na­ción con Ja­va­S­cri­pt o usando jQuery, hace que los elementos del fondo se muevan a una velocidad más lenta que aquellos en primer plano. El siguiente truco para CSS3 muestra cómo im­ple­me­n­tar este famoso tipo de de­s­li­za­mie­n­to: 

p {
    width: 100%;
    margin: auto;
    font-size: 50px;
    transform: scale(.5);
    font-family: courier new;
    font-weght: bold;
}
div {
    background-image: url("URL DES HINTERGRUNDBILDES");
    background-attachment: fixed;
    transform: scale(1.25);}
body {
    height: 100%;
    overflow: scroll;
}

En el parámetro “ba­c­k­grou­nd-image: url” deberás es­pe­ci­fi­car el URL de la imagen de fondo. Los valores co­rre­s­po­n­die­n­tes a la ti­po­gra­fía y al tamaño de los elementos pueden ser adaptados in­di­vi­dua­l­me­n­te.

Destacar los campos obli­ga­to­rios de un fo­r­mu­la­rio

Los comandos CSS “:required” y “:optional” facilitan la op­ti­mi­za­ción de los fo­r­mu­la­rios dentro de una web. Ambas pseu­do­cla­ses facilitan la di­fe­re­n­cia­ción entre los campos obli­ga­to­rios y los campos op­cio­na­les dentro de un fo­r­mu­la­rio. El snippet co­rre­s­po­n­die­n­te es el siguiente: 

:required {
    border: 1px solid red;
}
:optional {
border: 1px solid black;
}

En este caso, los campos obli­ga­to­rios tendrán un borde en color rojo, mientras que los campos op­cio­na­les tendrán un marco negro:

Imagen: Destacar campos en un formulario con CSS
Las dos pseu­do­cla­ses de CSS aplicadas aquí destacan de­te­r­mi­na­dos campos de un fo­r­mu­la­rio en función de su urgencia

Listas con viñetas tria­n­gu­la­res

No siempre tienes que usar la tra­di­cio­nal viñeta redonda para las listas en tus do­cu­me­n­tos HTML. Con el siguiente truco CSS puedes utilizar viñetas tria­n­gu­la­res:

ul {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;
}
li:before {
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
}

El resultado será el siguiente:

Imagen: Ejemplo de viñetas triangulares
Para utilizar viñetas tria­n­gu­la­res en lugar de ci­r­cu­la­res se im­ple­me­n­ta el fragmento de código de aquí arriba
Ir al menú principal