Curso y libro de transiciones y animaciones creativas en CSS

Con CSS o en español, Hojas de Estilo en Cascada (del inglés Cascading Style Sheets) es el lenguaje de estilos utilizado para describir la presentación de documentos HTML; con CSS se describe como debe ser renderizado cualquier elemento definido en el HTML; esto incluye la introducción de animaciones y transiciones para hacer efectos vistosos de todos tipos en donde el único límite es la imaginación.

En este libro, veremos una serie de ejemplos creativos usando CSS y un poco de HTML; con esto, aplicaremos animaciones y/o transiciones con CSS; para lograr el efecto deseado; son ejercicios altamente personalizables y por lo tanto, puedes modificarlos y personalizarlos a gusto y emplearlos en proyectos reales.

Esta guía tiene la finalidad realizar experimentos o ejercicios con las transiciones y animaciones en CSS, aplicados a botones, imágenes, textos y elementos HTML más completos; veremos el enfoque más básico de las animaciones en CSS que serían utilizando las transiciones, veremos múltiples ejemplos y limitantes que tenemos al trabajar con la forma más simple de lograr animaciones en CSS que es el uso de las transiciones. En posteriores capítulos también trabajaremos con las animaciones, conoceremos sus características, posibles configuraciones, opciones y modos y con esto, veremos un enfoque más completo en lograr animar en CSS.

En este curso, veremos más de 100 ejemplos completos y funcionales de animar elementos HTML, comenzaremos aplicando transiciones en CSS sobre botones, textos entre otros, para llegar a las animaciones en las cuales, crearemos experimentos desde cero, adaptamos los que utilizamos con transiciones y emplearemos las transiciones y animaciones de manera conjunta.

Este es un libro para experimentar con las animaciones en CSS, con esto vamos a mencionar lo siguiente:

1. No es un curso que tenga por objetivo conocer al 100% las animaciones en CSS, si no, de manera básica/intermedia; el objetivo es, experimentar y con esto, presentar distintas plantillas que podemos utilizar para crear todo tipo de animaciones más complejas o simplemente diferente.
2. Se da por hecho de que el lector tiene conocimientos al menos básicos en el uso de CSS.

El enfoque del curso es en su mayoría práctico, presentando más de 100 experimentos en los cuales trabajar y lograr la inspiración para otros tipos de efectos en CSS.

El libro y curso tiene un total de 5 secciones y capitulos respectivamente, se recomienda que leas en el orden en el cual están dispuestos y a medida que vayamos explicando los componentes del framework, vayas directamente a la práctica, repliques, pruebes y modifiques los códigos que mostramos en este libro.

 

Requisitos previos y requisitos

Para tomar este curso, es importante tengas conocimientos en CSS.

Como aprender a trabajar con CSS

En mi blog, encontrarás múltiples recursos de interes; actualmente tengo publicaciones sobre este tema.

Esta guía tiene la finalidad realizar experimentos o ejercicios con las transiciones y animaciones en CSS, aplicados a botones, imágenes, textos y elementos HTML más completos; veremos el enfoque más básico de las animaciones en CSS que serían utilizando las transiciones, veremos múltiples ejemplos y limitantes que tenemos al trabajar con la forma más simple de lograr animaciones en CSS que es el uso de las transiciones. En posteriores capítulos también trabajaremos con las animaciones, conoceremos sus características, posibles configuraciones, opciones y modos y con esto, veremos un enfoque más completo en lograr animar en CSS.

En este libro, veremos más de 100 ejemplos completos y funcionales de animar elementos HTML, comenzaremos aplicando transiciones en CSS sobre botones, textos entre otros, para llegar a las animaciones en las cuales, crearemos experimentos desde cero, adaptamos los que utilizamos con transiciones y emplearemos las transiciones y animaciones de manera conjunta.

Este es un libro para experimentar con las animaciones en CSS, con esto vamos a mencionar lo siguiente:

1. No es un libro que tenga por objetivo conocer al 100% las animaciones en CSS, si no, de manera básica/intermedia; el objetivo es, experimentar y con esto, presentar distintas plantillas que podemos utilizar para crear todo tipo de animaciones más complejas o simplemente diferente.
2. Se da por hecho de que el lector tiene conocimientos al menos básicos en el uso de CSS.

En comparación con otros libros, el enfoque es en su mayoría práctico, presentando más de 100 experimentos en los cuales trabajar y lograr la inspiración para otros tipos de efectos en CSS.

Para seguir este libro necesitas tener una computadora con Windows, Linux o MacOS.

Por aquí tienes el listado completo de clases que vamos a cubrir en el libro y curso:

Introducción

• 1 Introducción

• 2 Transiciones en CSS

• 3 Transformaciones 2D

• 4 Realizar preguntas

Transformaciones y transiciones aplicadas a botones

• 1 Introducción

• 2 Efecto hover 1

• 3 Efecto hover 1: Variantes

• 4 Efecto hover 1: Sobre botón

• 5 Efecto hover 2

• 6 Efecto hover 2: Variantes

• 7 Efecto hover 3

• 8 Efecto hover 4

• 9 Efecto hover 5

• 10 Efecto hover 6

• 11 Efecto hover 7

• 12 Efecto hover 8

• 13 Efecto hover 9

• 14 Efecto hover 10

• 15 Efecto hover 11

• 16 Efecto hover 12

• 17 Efecto hover 13

• 18 Efecto hover 14

• 19 Efecto hover 14: Variaciones

• 20 Efecto hover 15

• 21 Efecto hover 16

• 22 Efecto hover 17

• 23 Efecto hover 17: Variaciones

• 24 Efecto hover 18: Posición porcentajes

• 25 Efecto hover 18: Traslaciones y pixeles

• 26 Efecto hover 19

• 27 Efecto hover 20

• 28 Efecto hover 21

• 29 Efecto hover 22

• 30 Efecto hover 22: Variaciones

• 31 Efecto hover 23

• 32 Efecto hover 24

• 33 Efecto hover 25

• 34 Efecto hover 26

• 35 Efecto hover 27

• 36 Efecto hover 28

• 37 Efecto hover 28: Variaciones

• 38 Efecto hover 29

• 39 Efecto hover 30: Primeras pruebas

• 40 Efecto hover 30: repeating-linear-gradient

• 41 Efecto hover 30: Variantes

• 42 Efecto hover 31

• 43 Efecto hover 31: Variantes

• 44 Efecto hover 32

• 45 Efecto hover 32: Variantes

• 46 Efecto hover 33

• 47 Efecto hover 34

• 48 Efecto hover 35

• 49 Efecto hover 35: Variantes

• 50 Efecto hover 36: Pruebas

• 51 Efecto hover 36

• 52 Efecto hover 37: Variante 1

• 53 Efecto hover 37: Variante 2

• 54 Efecto hover 37: Variante 3

• 55 Efecto hover 37: Variante 4

• 56 Efecto hover 37: Variante 5

• 57 Efecto hover 38

• 58 Efecto hover 39

• 59 Efecto hover 39: Variante 1

• 60 Efecto hover 39: Variante 2

• 61 Efecto hover 40

• 62 Efecto hover 40: Variante 1

• 63 Efecto hover 41

• 64 Efecto hover 41: Variante 1

• 65 Efecto hover 41: Variante 2

• 66 Efecto hover 42

• 67 Efecto hover 42: Variante 1

• 68 Efecto hover 43

• 69 Efecto hover 43: Variante 1

• 70 Efecto hover 44

• 71 Efecto hover 45: Primera parte

• 72 Efecto hover 45

• 73 Efecto hover 46

• 74 Efecto hover 46: Variante 1

• 75 Efecto hover 47

• 76 Efecto hover 47: Variante 1

• 77 Efecto hover 47: Variante 2

• 78 Efecto hover 47: Variante 3

• 79 Efecto hover 47: Variante 4

• 80 Efecto hover 48

• 81 Efecto hover 49

• 82 Efecto hover 50

• 83 Efecto hover 50: Variantes

• 84 Publicar en git

Transiciones y traslaciones sobre imágenes

• 1 Introducción

• 2 Efecto hover 1

• 3 Efecto hover 2

• 4 Efecto hover: Transformaciones geométricas

• 5 Efecto hover: Contenedores extra

• 6 Publicar en git

Efectos variados con transiciones y filtros CSS

• 1 Introducción

• 2 Efecto texto

• 3 Efecto texto humo 1

• 4 Efecto texto humo 2

• 5 Efecto texto humo 3

• 6 Efecto texto humo 4

• 7 Menu: Estudio

• 8 Efecto texto 2: Degradado 1

• 9 Efecto texto 3: Texto Multiplicado parte 1

• 10 Efecto texto 3: Texto Multiplicado parte 2

• 11 Efecto texto neón

• 12 Efecto rebote: Introducción a las curvas

• 13 Publicar en git

Animaciones creativas

• 1 Introducción

• 2 Primer Efecto: Texto degradado

• 3 Segundo Efecto: Recorrido parte 1

• 4 Segundo Efecto: Recorrido parte 2, sombra

• 5 Segundo Efecto: Recorrido parte 3, sombra

• 6 Tercer Efecto: Texto Multiplicado

• 7 Cuarto Efecto: Texto Rebote

• 8 Cuarto Efecto: Texto Rebote, sombra

• 9 Quinto Efecto: Texto Rotativo

• 10 Sexto efecto: Botón rotativo

• 11 Séptimo efecto: Botón extensible

• 12 Octavo efecto: Texto luces

• 13 Noveno efecto: Botón animado y transición

• 14 Octavo efecto: Texto luces, variación

• 15 Décimo efecto: Ripple

• 16 Décimo efecto: Ripple, variables

• 17 Undécimo efecto: Fondo corredizo

• 18 Duodécimo efecto: Loading 1

• 19 Decimotercero efecto: Salto

• 20 Duodécimo efecto: Loading 1, variante

• 21 Decimocuarto efecto: Pulso

• 22 Decimoquinto efecto: Borde rotativo

• 23 Decimosexto efecto: Texto relleno

• 24 Decimoséptimo efecto: Cambio de color de fondo

• 25 Decimooctavo efecto: Loading 2

• 26 Decimonoveno efecto: Loading 3

  Decimonoveno efecto: Loading 3

• 27 Vigésimo efecto: Loading 4

• 28 Vigésimo primer efecto: Loading 5

• 29 Vigésimo segundo efecto: Loading 6

• 30 Vigésimo tercer efecto: Loading 7

• 31 Vigésimo cuarto efecto: Loading 8

• 32 Vigésimo quinto efecto: Etiqueta

• 33 Publicar en git

  Publicar en git

Proyectos HTML, CSS y JavaScript

• 1 Introducción

• 2 Galería de imágenes - HTML y CSS

  Crearemos una sencilla galería alineada en columnas.

• 3 Galería de imágenes - JavaScript

• 4 Galería de imágenes - Variantes

• 5 Segundo Proyecto: Campo de texto expandible - HTML y CSS

• 6 Segundo Proyecto: Campo de texto expandible - JavaScript

• 7 Segundo Proyecto: Campo de texto expandible - Variante

• 8 Tercer Proyecto: Scroll animado - HTML y CSS

• 9 Tercer Proyecto: Scroll animado - JavaScript

• 10 Tercer Proyecto: Scroll animado - Remover cajas en el "scroll up"

• 11 Cajas infinitas en el "scroll up"

• 12 Cajas infinitas en el "scroll up" - Agregar efecto de transición

• 13 Cajas infinitas en el "scroll up" - Remover las cajas en el scroll Up

• 14 Detectar el final del scroll en cualquier navegador

• 15 Cuarto Proyecto: Slides de imágenes: HTML y CSS

• 16 Cuarto Proyecto: Slides de imágenes: JavaScript

• 17 Quinto Proyecto: Toast: HTML y CSS

• 18 Quinto Proyecto: Toast: JavaScript

• 19 Quinto Proyecto: Toast: Segunda forma de creación

• 20 Quinto Proyecto: Toast: Segunda forma de creación

• 21 Quinto Proyecto: Encolar varios toast

• 22 Quinto Proyecto: Transición al desaparecer

• 23 Quinto Proyecto: Variar posiciones

• 24 Efectos del toast al remover, definir efectos en CSS

• 25 Quinto Proyecto: Efectos del toast al remover, switch

• 26 Quinto Proyecto: Delay en las transiciones

• 27 Quinto Proyecto: Efectos del toast al aparecer

• 28 Publicar en Github