Técnicas CSS que merece la pena destacar

A medida que pasa el tiempo, la especificación de CSS se está volviendo más poderosa, lo que permite a los diseñadores y desarrolladores web crear sitios web más atractivos y fáciles de usar. En este artículo, te mostraré algunas técnicas modernas que merece la pena destacar en CSS puro.

Variables personalizadas

Las variables de CSS son un verdadero ahorro de tiempo a la hora de crear un sitio web. Simplemente tienes que definir tus variables y utilizarlas tanto como sea necesario en tu hoja de estilo. El código que puedes ver a continuación seguro que se explica por sí solo para la mayoría de vosotros.

<p class="custom-variables">CSS is awesome!</p>
:root {
  /* Place variables within here to use the variables globally. */
}
.custom-variables {
  --some-color: #da7800;
  --some-keyword: italic;
  --some-size: 1.25em;
  --some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
  color: var(--some-color);
  font-size: var(--some-size);
  font-style: var(--some-keyword);
  text-shadow: var(--some-complex-value);
}

Fade de color al hacer hover

Una forma muy fácil de hacer que tus enlaces (o cualquier otro elemento) se vean mejor.

a {
 color: #000;
 -webkit-transition: color 1s ease-in; /*safari and chrome */
 -moz-transition: color 1s ease-in; /* firefox */
 -o-transition: color 1s ease-in; /* opera */
}

a:hover { 
 color: #c00;
}

Spinner con forma de donut con CSS puro

Estos spinners son muy populares cuando se trata de que los visitantes sepan que el contenido se está cargando. Puedes sentirse tentado a utilizar una imagen, pero en términos de velocidad es mejor hacerlo utilizando CSS. Parece complicado pero para nada lo es. Primero echa un vistazo al código de más abajo:

<div class="donut"></div>

...y ahora, el correspondiente CSS:

@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2s linear infinite;
}

Centrar contenido utilizando Flexbox

Centrar el contenido tanto vertical como horizontalmente es hoy en día muy fácil usando display: flex. Aquí puedes ver cómo hacerlo, usando un poco de HTML:

<div class="flexbox-centering">
  <div class="child">Centered content.</div>
</div>

...y un poco de CSS:

.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

Grid responsive

display:grid facilita la creación de grids. Usando la unidad fr, las rejillas pueden hacerse responsive  para adaptarse a cualquier tipo de pantalla.  Así es como se ve el HTML de nuestro grid:

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Y el CSS:

.grid {
  display: grid; 
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em; 
}

.grid-item {
  background-color: orange;
}

Texto no seleccionable

Si por alguna razón no quieres que los visitantes puedan seleccionar una parte determinada del contenido, puedes utilizar CSS para ello. Si bien el texto aún será seleccionable si el usuario va al código fuente de la página, he escuchado a tantos clientes que desean tales funciones en su sitio web que estoy seguro de que esto será útil para muchos de vosotros.

Aquí tienes el HTML:

<p class="unselectable">You can't select me!</p>

Y ahora el pedacito de CSS:

.unselectable {
  user-select: none;
}

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP