README.md

Módulo 3 - Efectos

Contenido

• Sombras
• Bordes
• Gradientes
• Transiciones
• Animaciones

Sombras

/* offset-x | offset-y | color */
box-shadow: 20px 16px #e3f754;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

• box-shadow
• drop-shadow
• Generador de sombras
• Ejemplos de sombras

Lecturas recomendadas:

• Designing Beautiful Shadows in CSS

Bordes

/* border-width || border-style || border-color */
border: 1px solid teal;

• border
• outline
• Generador de bordes

/* Se establece en los cuatro lados */
border-radius: 25px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 5px 10px 20px 15px;

/* Se establecen radios adicionales con "/" para obtener esquinas elípticas */
border-radius: 10px / 20px;

• border-radius
• Generador de border-radius

Gradientes

/* Gradiente inclinado 45 grados, con la mitad inferior izquierda negra, y una superior derecha amarilla */
background: linear-gradient(45deg, #000 0%, #e2f754 100%);

• linear-gradient

/* Gradiente radial con la zona central amarilla y la exterior negra */
background: radial-gradient(circle, #e2f754 0%, #000 100%);

• radial-gradient

/* Gradiente cónico que simula un arcoiris */
background: conic-gradient(red, orange, yellow, green, blue);

• conic-gradient

/* Patrón de líneas  */
background: repeating-linear-gradient(
  #000,
  #000 20px,
  #e2f754 20px,
  #e2f754 25px
);

• repeating-linear-gradient

• Generador de gradientes

• The “Gray Dead Zone” of Gradients

• Generador de gradientes lineales

Transiciones

button {
  /* property name | duration | easing function */
  transition: transform 250ms ease-in;
}

button:hover {
  transform: translateY(-10px);
}

Las funciones easing especifican la velocidad de transición de un parámetro a lo largo del tiempo, es decir, su aceleración. En CSS tenemos definidas una serie de funciones easing como ease, ease-in, ease-in-out, etc., pero podemos definir una propia por una curva bézier.

• transition
• will-change
• Guía interactiva de transiciones
• Funciones easing
• Ejemplos de funciones easing
• Generador de cubic-bezier

Animaciones

div {
  /*... */
  animation: bounce 1s ease-in-out infinite both alternate;
}

@keyframes bounce {
  from {
    top: 25%;
  }
  to {
    top: 55%;
  }
}

• Usando animaciones CSS
  • Guía interactiva sobre animaciones
• animation-delay
• animation-direction
• animation-duration
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• animation-fill-mode

Lecturas recomendadas:

• Cómo crear animaciones con buena performance
• Cómo medir la performance de una animación