CSS: La guía definitiva en 2019

tutorial css
tutorial html y css 3 con ejemplos

En esta guía de CSS os enseñaremos las propiedades más útiles que deberías empezar a usar ahora mismo. A continuación explicaremos cada propiedad con un ejemplo básico para que lo puedas comprender de forma visual. Empezamos!


1. Pseudoelementos

Los pseudoelementos son una palabra clave que se añade a los selectores para realizar cambios concretos en el documento. Estos pseudoelementos, a diferencia de las pseudoclases (:), se identifican con dos puntos dobles (::).

1.1 ::before y ::after

Ambas propiedades nos permiten añadir contenido dentro de un elemento antes (::before) o después (::after) de cualquier otro contenido HTML. Para que cualquiera de estos pseudoelementos haga efecto, es obligatorio añadir la propiedad content. Un ejemplo sencillo podría ser el siguiente.

texto

<p>texto</p>
p::before {
  content: 'Hola ';
  background-color: red;
  color: white;
}
p::after {
  content: ' Mundo';
  font-weight: bold;
}

Otro ejemplo práctico sería editar el estilo en testimonios o citas de autores o documentos. Para editar el estilo y forma de las comillas en las citas, se puede utilizar la propiedad quotes.

If you are spending a lot of your time learning while you code — while someone is paying you — then you are doing it right.

Jen Simmons
<blockquote>
  <p>
    If you are spending a lot of your time learning while you code — 
    while someone is paying you — then you are doing it right.
  </p>
  <cite>Jen Simmons</cite>
</blockquote>
blockquote {
  text-align: center;
}

blockquote::before {
  margin: 0 auto 40px;
}
blockquote::after {
  margin: 40px auto 0;
}

blockquote::before, blockquote::after { 
  content: " ";
  width: 60px;
  height: 3px;
  background-color: #c9c9c9;
  display: block;
}

blockquote cite {
  padding-top: 20px;
  display: block;
  color: #676767;
}

Por último, también podemos añadir animaciones a estos elementos decorativos, así, podemos crear por ejemplo un Tooltip.


Este texto desvela un secreto

<a href="https://www.inarvis.com/blog/flexbox-y-el-diseno-responsive-unidireccional/" data-tooltip="Flexbox y Grid NO son mutuamente excluyentes">Este texto desvela un secreto</a>
a[data-tooltip] {
  position: relative;
}

a[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #212121;
  padding: 10px 20px;
  color: white;
  border-radius: 8px;
  white-space: nowrap;
  transform: scale(0);
  transition: all ease-in 200ms;
  
}

a[data-tooltip]:hover::before {
  transform: scale(1);
  bottom: 100%;
}

1.2 ::selection

Esta propiedad modifica el estilo del texto cuando lo seleccionamos con el ratón. Se puede utilizar en selectores o en todo el documento. Las únicas propiedades que funcionan en ::selection son: color, background-color y text-shadow


Selecciona para ver cambios en el texto

Selecciona para ver cambios en el fondo y texto

Selecciona para ver cambios en el sombreado

<p class='selection-text'>Selecciona para ver cambios en el texto</p>
<p class='selection-bg'>Selecciona para ver cambios en el fondo y texto</p>
<p class='selection-shadow'>Selecciona para ver cambios en el sombreado</p>
  .selection-text::-moz-selection {
    color: purple;
  }
  .selection-text::selection {
    color: purple;
  }
  
  .selection-bg::-moz-selection {
    background-color: red;
    color: white;
  }
  .selection-bg::selection {
    background-color: red;
    color: white;
  }
  
  .selection-shadow::-moz-selection {
    background-color: red;
    color: white;
  }
  .selection-shadow::selection {
    text-shadow: 1px 1px #212121;
  }
  /* Si lo declaramos globalmente */
  ::selection {
    color: white;
    background: #212121;
  }

1.3 ::placeholder

Modifica el estilo del placeholder dentro de un campo de texto. Si solo queremos aplicar estos estilos cuando el placeholder es visible, usaríamos ::placeholder-shown.

<input type="text" placeholder="Nombre">
::-webkit-input-placeholder { /* Edge */
  color: purple;
  font-weight: bold;
  letter-spacing: 2px;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: purple;
  font-weight: bold;
  letter-spacing: 2px;
}

::placeholder {
  color: purple;
  font-weight: bold;
  letter-spacing: 2px;
}

2. Pseudoclases

Al igual que con los pseudoelementos, las pseudoclases se aplican a los selectores y especifican una condición especial del elemento. Por ejemplo, cuando se produce un evento del ratón (:hover), si el usuario ya ha visitado un enlace (:visited) o un elemento de tipo radio, checkbox u option ha sido marcado (:checked).

Hay una pseudoclase llamada :root que representa el elemento raíz del documento, idéntico al selector html. La única diferencia que existe es que :root tiene más especificidad. Se suele utilizar para declarar variables de CSS.

2.1 Selección de elementos hijo

Primer hijo (first-child)

Segundo hijo

Último hijo (last-child)

<div class="example-fc">
  <p>Primer hijo (first-child)</p>
  <p>Segundo hijo</p>
  <p>Último hijo (last-child)</p>
</div>
.example-fc p:first-child {
  border-left: 3px solid black;
  padding-left: 10px;
}
.example-fc p:last-child {
  font-weight: bold;
  text-transform: uppercase;
}

Con un ejemplo parecido al anterior podemos identificar las diferencias entre estas propiedades.

Primer hijo

Segundo hijo / Primero hijo Párrafo

Tercer hijo / Segundo hijo Párrafo

<div class="example-nth">
  <span>Primer hijo</span>
  <p><b>Segundo hijo</b> / Primero hijo Párrafo</p>
  <p>Tercer hijo / <b>Segundo hijo Párrafo</b></p>
  <p></p>
</div>
.example-nth :not(p):not(b) {
  font-size: 24px;
  color: purple;
}

.example-nth :nth-child(2) {
  border-left: 3px solid blue;
  padding-left: 10px;
}

.example-nth p:nth-of-type(2) {
  border-left: 3px solid red;
  padding-left: 10px;
}

.example-nth :empty::before {
  content: 'Selector P vacio';
  font-weight: bold;
}

A continuación veremos el uso que se le pueden dar a muchas de las pseudoclases orientadas a elementos de formulario, como por ejemplo, campos de texto y tipos de checkbox.

2.2 Personalizar un input checkbox con CSS

En este caso usamos las pseudoclases :not y :checked para comprobar el estado del checkbox, y así, tenemos opción a modificar ambos aspectos.

<!-- Nos aseguramos de tener el atributo 'for' del 'label' con el mismo valor que el 'id' del checkbox. -->
<input id="checkbox-input" type="checkbox">
<label class="checkbox-label" for="checkbox-input">Haga click</label>
/* Podemos usar los siguientes alias si lo queremos aplicar globalmente a todos los checkbox.
   #checkbox-input como [type="checkbox"]
   .checkbox-label como label
*/
/* Primero ocultamos el input */
#checkbox-input {
  display: none;
}

/* Estilos del texto, entre el :before y el :after */
#checkbox-input:not(:checked) + .checkbox-label,
#checkbox-input:checked + .checkbox-label {
  position: relative;
  padding-left: 2em;
  cursor: pointer;
}

/* Damos estilo de caja a la etiqueta label usando :before */
#checkbox-input:not(:checked) + .checkbox-label::before,
#checkbox-input:checked + .checkbox-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5em;
  height: 1.5em;
  border: 2px solid #ccc;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
}

#checkbox-input:not(:checked) + .checkbox-label:hover::before {
  border-color: #0b76ef;
}

/* Después cambiamos el fondo cuando el checkbox está activo. */
#checkbox-input:checked + .checkbox-label::before {
  background-color: #0b76ef;
  border-color: #0b76ef;
}

/* Finalmente cambios el estilo del tick */
#checkbox-input:checked + .checkbox-label::after {
  content: '\2713';
  position: absolute;
  top: 0.1em;
  left: .08em;
  font-size: 1.6em;
  color: white;
  line-height: 0.8;
}

2.3 Validación de campos de texto

Ahora veremos varias propiedades que nos pueden ayudar a validar y mejorar la experiencia de usuario en nuestros formularios. Sabiendo como funcionan y se complementan estos elementos, el límite lo pone nuestra imaginación.

Ojo, en este ejemplo se ha utilizado la propiedad outline: none. No se debería eliminar esta propiedad ya que es necesaria para una buena accesibilidad. Si se decide suprimir esta opción, es muy recomendable ofrecer estilos alternativos que mantengan o mejoren la experiencia de usuario.

<div class="form-inputs-example">
  <div class="input-group-example">
    <label for="input-1">Campo deshabilitado</label>
    <input id="input-1" type="text" class="input-1" placeholder="Nombre" disabled>
  </div>
  
  <div class="input-group-example">
    <label for="input-2">Rango entre 1 y 10</label>
    <input id="input-2" type="number" class="input-2" min="1" max="10">
  </div>
  
  <div class="input-group-example">
    <!-- Atento al cambio del orden de los selectores -->
    <input id="input-3" type="text" class="input-3" placeholder="Campo obligatorio" required>
    <label for="input-3">Campo obligatorio</label>
  </div>
</div>
.form-inputs-example {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.input-group-example {
  display: flex;
  flex-direction: column;
  width: 400px;
  padding: 15px 20px;
}

input {
  padding: 7px;
  order: 1; /* Gracias a flexbox podemos cambiar el de la etiqueta y el input. */
}

/* Aplicados a los campos deshabilitados */
input:disabled:hover {
  background-color: #ddd;
}

/* Aplicados a los campos opcionales */
input:optional {
  color: green;
  font-size: 1.1em;
}

/* Aplicados a los campos obligatorios */
input:required {
  border-color: red;
}

/* Podemos usarlo de esta forma porque hemos cambiado el orden de los inputs gracias a flexbox. (lineas 9 y 17) */
input:required + label::after {
  content: ' *';
  color: red;
  font-weight: bold;
}

.input-1, .input-2 {
  border-radius: 5px;
  border: 2px solid #ccc;
}

.input-2 {
  outline: none;
}
.input-2:in-range {
  background-color: #CCFFCC;
  border: 2px solid green;
}
.input-2:out-of-range {
  background-color: #FFCCCC;
  border: 2px solid red;
}
.input-2:in-range + label::after {
  content: '. Es válido.';
}
.input-2:out-of-range + label::after {
  content: '. Fuera de rango!';
}

.input-3 {
  background: transparent;
  box-shadow: none;
  border-width: 0px 0px 4px 0px;
}
/* Cambiamos el color del borde cuando seleccionamos el input y ocultamos el outline */
.input-3:focus {
  outline: none;
  border-color: #0b76ef;
}

3. Variables de CSS

Las variables CSS contienen valores asignados para volver a ser utilizados a lo largo del documento. Estas variables se declaran con la siguiente notación.

–color-primario: #212121

Y para acceder a estas, se utiliza la función var().

color: var(–color-primario)

Esta propiedad nos puede servir de gran ayuda en el caso de tener páginas muy complejas y grandes. Por ello podríamos almacenar la paleta de colores en variables y usarlas según las necesitemos.

Ahora veremos varios ejemplos valiosos que demuestran el poder de las variables de CSS.

3.1 Como cambiar entre tema oscuro y claro

Vamos a crear una pequeña carta y un botón para alternar entre 2 temas (oscuro y claro) usando variables de CSS.

Tema oscuro / claro

En este ejemplo vemos como podemos cambiar los colores de toda una página mediante variables de CSS. Simplemente cambiamos el atributo global data dinámicamente con un botón que escucha los eventos mediante Javascript. Después podemos acceder a este atributo data a través de CSS así :root[data-theme=’dark’] y con esto conseguimos sobrescribir todos los colores que tengamos asignados.

<div class="panel">
  <div class="panel-header">
    <h2>Tema oscuro / claro</h2>
    <div class="switch-container">
      <input id="switch" type="checkbox" name="theme" />               
      <label class="switch-label" for="switch"></label>
    </div>
  </div>

  <div class="panel-body">
    <p>En este ejemplo vemos como podemos cambiar los colores de toda una página mediante variables de CSS. Simplemente cambiamos el <b>atributo global data</b> dinámicamente con un botón que escucha los eventos mediante Javascript. Después podemos acceder a este <b>atributo data</b> a través de CSS así <b>:root[data-theme='dark']</b> y con esto conseguimos sobrescribir todos los colores que tengamos asignados.
    </p>
  </div>
</div>
/* Aqui almacenamos la paleta de colores para el tema claro */
:root {
  --background: #EEEEEE;
  --color-title: #404248;
  --color-text: #3D3E4C;
  --color-text-bold: #212121;
}

/* Aqui almacenamos la paleta de colores para el tema oscuro */
:root[data-theme='dark'] {
  --background: #212121;
  --color-title: #29B6F6;
  --color-text: #AFAFAF;
  --color-text-bold: #FFFFFF;
}

.panel {
  background-color: var(--background);
  padding: 3em;
  border-radius: 15px;
}
.panel h2 {
  color: var(--color-title);
  font-weight: 600;
  margin: 0;
}
.panel p {
  color: var(--color-text);
  line-height: 1.8em;
  margin-top: 2em;
}
.panel b {
  color: var(--color-text-bold);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.switch-container {
  display: flex;
}

.panel-body {
  width: 80%;
}

#switch[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
}

.switch-label {
  cursor: pointer;
  width: 55px;
  height: 26px;
  background: grey;
  float: right;
  border-radius: 100px;
  position: relative;
}

.switch-label::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 90px;
  transition: 0.3s;
}

#switch:checked + .switch-label {
  background: var(--color-title);
}

#switch:checked + .switch-label::after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
}

.switch-label:active::after {
  width: 45px;
}

html.transition,
html.transition *,
html.transition *::before,
html.transition *::after {
  transition: all 600ms !important;
  transition-delay: 0 !important;
}
var checkbox = document.querySelector('input[name=theme]');

// Registramos el evento 'change' del botón
checkbox.addEventListener('change', function() {
  transition()
  if (this.checked) 
    document.documentElement.setAttribute('data-theme', 'dark')
  else 
    document.documentElement.setAttribute('data-theme', 'light')
})

// Esta función añadirá la clase 'transition' en la raiz (html) para después eliminarla a los 600ms
let transition = () => {
  document.documentElement.classList.add('transition');
  window.setTimeout(() => {
    document.documentElement.classList.remove('transition')
  }, 600)
}

4. CSS Grid

Grid es la herramienta de CSS más potente que existe para crear cualquier tipo de diseño responsive y sin límites. Grid, al contrario que Flexbox, trabaja en un sistema de 2 dimensiones.

Esto no quiere decir Flexbox y Grid sean mutuamente excluyentes, al contrario, es muy recomendable plantear tus diseños con ambas herramientas.

El objetivo es diseñar la estructura de tu página con las herramientas que te ofrece Grid. Es decir, como quieres que se muestre y qué tamaño deben tener según el dispositivo.

Finalmente, organizar el espacio dentro de estos componentes debería ser tarea de Flexbox.

4.1 Cómo definir la plantilla grid

En este ejemplo veremos cómo podemos estructurar nuestra plantilla y que se adapte a todos los dispositivos.

Header
Sidebar
Body

Primero fijamos las áreas del contenedor y las dimensiones que va a tener. Para eso utilizamos la propiedad grid-template-areas. Dentro precisamos que elementos irán en cada fila y columna.

<div class="grid-wrapper">
  <div class="grid-header">
    <span>Header</span>
  </div>
  <div class="grid-sidebar">Sidebar</div>
  <div class="grid-body">Body</div>
  <div class="grid-footer">Footer</div>
</div>
.grid-wrapper {
  display: grid;
  grid-template-areas: "header body sidebar"
                       "header footer footer";
  grid-gap: 15px; /* 15px de espaciado entre contenedores */
  grid-template-rows: 250px 200px; /* Las dimensiones de cada fila */
  grid-template-columns: 150px 2fr 1fr; /* Las dimensiones de cada columna */
}

Para que el código de arriba funcione, necesitamos darle un nombre de área a cada contenedor. Por lo tanto, usaremos la propiedad grid-area en cada uno de estos elementos.

.grid-header {
  grid-area: header; /* Nombre de área del grid-header */
  background-color: #ae52d4;
}
.grid-header span {
  transform: rotate(-90deg);
}
.grid-body {
  grid-area: body;
  background-color: #43a047;
}
.grid-sidebar {
  grid-area: sidebar;
  background-color: #ff9421;
}
.grid-footer {
  grid-area: footer;
  background-color: #3d3e4b;
}

En este punto tenemos la estructura creada y hemos dado nombre a los contenedores. Lo último que nos falta es añadir puntos de ruptura para organizar la distribución de todos los contenedores. Para conseguir este resultado haremos uso de las media queries.

@media (max-width: 1300px) {
  .grid-wrapper {
    grid-template-areas: "header header"
                         "body sidebar"
                         "footer footer";
    grid-template-rows: 1fr 200px 1fr;
    grid-template-columns: 3fr 350px;
  }
  .grid-header span {
    transform: rotate(0deg);
  }
}

@media (max-width: 700px) {
  .grid-wrapper {
    grid-template-areas: "header"
                         "body"
                         "sidebar"
                         "footer";
    grid-template-rows: repeat(4, 1fr); /* Usamos la función repeat() para asignar el tamaño de 1fr a cada una de las 4 filas. */
    grid-template-columns: 1fr;
  }
}

Una vez hecho esto, ya tenemos un diseño 100% responsive totalmente personalizado y sin tocar una sola línea de HTML.

4.2 Ejemplo de galería de imágenes

Gracias a CSS Grid poder crear una galería de imágenes en tiempo récord. Nos basta con 2 líneas de código para preparar nuestra galería complemente responsive. Disminuye el tamaño del navegador para apreciar los cambios.

<div class="grid-gallery">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
.grid-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 15px;
}
.grid-gallery div {
  background-color: #ff9421;
  height: 150px;
}

El truco se encuentra en la siguiente línea:

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

Básicamente estamos diciendo lo siguiente:

5. Flexbox

Tenemos en nuestro blog un artículo que te explica todo lo que necesitas saber sobre flexbox.

6. Animaciones

KEYFRAMES

6.1 Keyframes

Una manera para darle vida a nuestra página es mediante el uso de las animaciones. En este apartado, hablaremos de los keyframes. Lo primero de todo, os dejo el código de la animación de arriba.

<div id="animation" class="center">
  <div class="blend-text">KEYFRAMES</div>
</div>
@keyframes background {
  from { background-color: #FC354C; }
  to { background-color: #0ABFBC; }
}

#animation {
  animation: 1.5s background infinite alternate;
  
  width: 100%;
  height: 350px;
  font-size: 3em;
}

.blend-text {
  background-color: black;
  border: 4px solid black;
  color: white;
  border-radius: 5px;
  font-weight: bold;
  padding: 30px;
  mix-blend-mode: multiply; /* Esta propiedad describe cómo el contenido de un elemento debe mezclarse con el resto */
  transition: all .5s ease; /* Si definimos la transicion aquí y no en el :hover, obligamos a que la animación sea de entrada y salida. */
}

.blend-text:hover {
  background-color: transparent;
  color: black;
  cursor: pointer;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

6.1.1 Cómo funcionan los keyframes

Hay 2 maneras de declarar una animación mediante keyframes. Lo primero de todo hace falta que le demos un nombre a la animación, justo después de la palabra clave @keyframes.

@keyframes nombre {}

Ahora debemos definir cómo va a ser la animación. La primera opción y más avanzada es utilizar breakpoints que determinaremos mediante porcentajes.

<div class="example-container center">
  <div id="kf-animation"></div>
</div>
#kf-animation {
  width: 200px;
  height: 80px;
  background-color: #ff9421;
  border-radius: 5px;
}

#kf-animation:hover {
  cursor: pointer;
  animation: .5s button-animation infinite linear;
}

#kf-animation:hover::after {
  content: 'Aaahh!';
  font-size: 1.2em;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
  
@keyframes button-animation {
  0% {
    transform: translateX(-5px) rotate(5deg);
  }
  10% {
    transform: translateX(5px) rotate(-7deg);
  }
  20% {
    transform: translateX(-5px) rotate(2deg);
  }
  30% {
    transform: translateX(5px) rotate(3deg);
  }
  40% {
    transform: translateX(-5px) rotate(-5deg);
  }
  50% {
    transform: translateX(5px) rotate(3deg);
  }
  60% {
    transform: translateX(-5px) rotate(-4deg);
  }
  70% {
    transform: translateX(5px) rotate(3deg);
  }
  80% {
    transform: translateX(-5px) rotate(-2deg);
  }
  90% {
    transform: translateX(5px) rotate(-1deg);
  }
  100% {
    transform: translateX(-5px) rotate(3deg);
  }
}

La segunda es utilizar las palabras claves from y to. Con esto se entiende que la animación se ejecutará progresivamente desde el inicio (0%) hasta el final (100%).

@keyframes button-animation {
  from {
    top: 0px;
  }
  to {
    top: 200px;
  }

6.2 Transiciones

Bajo mi punto de vista, las transiciones son la manera más sencilla de animar los componentes de una página web. Una transición se ejecuta cuando cambia el valor de una o más propiedades en un periodo de tiempo.

.selector {
  transition: <propiedad> <duración> <curva bézier> <delay>
}

Con esas 4 propiedades podemos definir la transición del selector. Podemos provocar estas animaciones con algunas pseudoclases, como por ejemplo, :hover, :focus, :active y más.

.selector {
  background-color: #3d3e4b;
  transition: background-color 0.5s ease-out;
}

.selector:hover {
  background-color: #ff9421;
}

Por último, debemos saber el tipo de curva de velocidad que vamos a aplicar en la animación. Tenemos a nuestra disposición muchísimas variaciones prefijadas que nos pueden servir.

Además de las versiones que ya existen, es posible personalizar tu propia curva de bézier. En el siguiente enlace te dejo como puedes crear la tuya propia.

INARVIS info@inarvis.com
html y css
<div class="example-container center">
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front center">
        <span>INARVIS</span>
        <small>info@inarvis.com</small>
      </div>
      <div class="flip-card-back center">
        <img src="https://www.inarvis.com/wp-content/uploads/2019/06/logo-inarvis-montaña.svg" width="150px">
      </div>
    </div>
  </div>
</div>
.example-container {
  width: 100%;
}

.flip-card {
  width: 275px;
  height: 275px;
  perspective: 1000px; /* Así podemos apreciar el giro de la carta. Aplica la perspectiva en el plano Z. */
}

.flip-card-inner {
  width: 100%;
  height: 100%;
  transition: all 0.5s ease-in;
  transform-style: preserve-3d; /* Importante para que los hijos mantengan la posición 3D. */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
  cursor: pointer;
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #3d3e4b;
  color: #ff9421;
  display: flex;
  flex-direction: column;
}

.flip-card-front span {
  font-size: 2.5em;
  font-weight: bold;
}

.flip-card-back {
  background-color: #3d3e4b;
  color: white;
  transform: rotateY(180deg);
}

7. Otras propiedades interesantes

Existen otras propiedades de CSS que no son tan conocidas y que son de gran utilidad.

7.1 Cómo optimizar la precarga de fuentes

Te habrás dado cuenta que en muchas páginas el texto tarda mucho tiempo en cargar del todo, y eso no es bueno para el usuario. Si tardamos demasiado en mostrar contenido, corremos el riesgo de que el usuario salga de nuestra página.

Gracias a esta guía hemos podido reducir considerablemente el tiempo de muestra y carga de las fuentes. En resumen, podemos reducir los tiempos de carga siguiendo los pasos de esta lista:

Con todo esto, el resultado final nos quedaría algo parecido a lo siguiente.

<link rel="preload" as="font" href="(ruta-fichero).woff2" type="font/woff2" crossorigin />
@font-face {
  font-family: 'Poppins';
  font-display: swap; /* El navegador utiliza la fuente por defecto hasta que la fuente se descargue por completo */
  font-style: 'normal';
  font-weight: bold;
  src: url(<ruta-fichero>.woff2);
}

7.2 Selectores de atributos

Estos selectores se utilizan junto a una expresión regular para filtrar elementos muy concretos.

<ul>
  <li>
    <a target="_blank">
      Todo sobre el enlace nofollow
    </a>
  </li>
  <li class="second-item">
    Descubre como hacer animaciones con css
  </li>
</ul>
[target="_blank"]::after {
  content: '\2197';
  font-weight: bold;
}

[class|="second"] {
  list-style-type: upper-roman;
}

7.3 Clip path

Esta propiedad permite ocultar partes de una imagen creando formas complejas. Habitualmente se utiliza en imágenes o contenedores.

<div class="clip-examples">
  <div class="clip-example-1"></div>
  <div class="clip-example-2"></div>
  <div class="clip-example-3"></div>
</div>
.clip-examples {
  display: flex;
  justify-content: space-around;
}

.clip-examples div {
  width: 4em;
  height: 4em;
}

.clip-example-1 {
  background-color: red;
  -webkit-clip-path: circle(50.0% at 50% 50%);
  clip-path: circle(50.0% at 50% 50%);
}

.clip-example-2 {
  background-color: green;
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.clip-example-3 {
  background-color: #29B6F6;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

Si quieres saber más sobre esta propiedad, visita este enlace.

Si te ha gustado, compártelo en las redes sociales!
Etiquetas: