Pablo Alejandro Carravetti

En los sliders up y down tenés que hacerlos según el tamaño del elemento, yo me ayudo mucho con variables CSS manipuladas desde JavaScript en este aspecto.

Yo para hacer que varias animaciones se reproduzcan en modo dominó lo que haces hacer varias animaciones y que las mismas corran en un intervalo. Acá dejo un semáforo: https://codepen.io/pablotsko/pen/wvEBmMy

Aclaro: En Argentina cuando un semáforo pasa a amarilla estando en rojo, la luz roja se apaga recién al pasar a verde…

El efecto máquina de escribir solo con CSS está muy piola y es recontra simple, es aconsejable utilizar SASS…

La idea es "jugar" con los pseudoelementos ::beffore y ::after. Voy a dar un ejemplo con la palabra "hola":

1@keyframes](https://ed.team/u/
2@keyframes)](https://ed.team/u/
3@keyframes) maquina {
4    0% {
5        content: "H"
6    }
7    20% {
8        content: "HO"
9    }
10    40% {
11        content: "HOL"
12    }
13    0% {
14        content: "HOLA"
15    }
16}
17
18.escribir::beffore {
19    content: "";
20	animation: maquina 5s infinite;
21}

Lo que nos faltaría es agregar en el documento HTML una etiqueta con la clase escribir:

1<div class="escribir"></div>

Pero, si deseamos añadirle el efecto a una frase grande, es preferible generarlo con SASS:

Primero creamos la variable $content.

Segundo, en el @keyframe recorremos con un @for donde el índice recorre de 0 a 100.

Tercero, los porcentajes será interpolando la variable: ${i}%

Cuarto, en SASS existen dos módulos que utilizaremos:

• str-length($variable) devuelve la cantidad de caracteres que tiene una variable, en JavaScript sería: variable.lenght
• str-slice($variable, principio, final) devuelve el rango deseado de una variable, en JavaScript sería: variable.slice(principio, fin)

Quinto, añadimos una condición que, si el índice es menor a la cantidad de caracteres que contiene la variable $content, solo se muestre desde el primer caracter hasta el número del índice y, en caso contrario, muestre la variable completa.

1$content: "Comienza a estudiar gratis en EDteam y descubre porqué en español nadie te explica mejor";
2
3@keyframes maquina {
4  [@for](https://ed.team/u/for) $i from 0 through 100 {
5    #{$i}% {
6      [@if](https://ed.team/u/if) $i < str-length($content) {
7        content: str-slice($content, 1, $i);
8          }
9      [@else](https://ed.team/u/else) {
10        content: $content;
11          }
12      }
13    }
14  }
15
16div::before {
17  content: "";
18  animation: maquina 5s infinite;
19}

Álvaro en este vídeo explicó cómo hacer una sobra al texto con degradado, pero en ese momento no existía este filtro. https://youtu.be/ZiBH7om0_cs

Se ven mal los ejemplos pero se intenta entender y en los vídeos anteriores de esta clase la miniatura tapa parte de los ejemplos.

¿Se puede hacer con formato mixtos? 1. 1.a 1.b 2. 2.a 2.b 2.c

Intenté hacer este ejercicio pero no tengo Adobe Illustatror, entonces intenté con Inkscape con tu técnica (dos circles y un rect) y fracasé. No me iba a ganar un corazón, se me ocurrió copiarme el código que te generó Illustator pero no me funcionaba y pensé, ¿y si lo dibujo yo?

Empecé con "m", seguí con "a", le metí dos "l", otro "a" y… ¡chan! Quedó espectacular pero me faltaba la animación, aunque no me gusta la combinación rojo con blanco, prefiero azul y oro (amarillo). Entonces se me ocurrió hacer un degradé con esos colores y lo llamé desde el CSS (se lo llama sin comillas). ¡Me quedó espectacular el corazón animado!

Está mal explicado reemplazo.

Es de la siguiente forma:

:«fragmento del documento»s/«texto a reemplazar/«nuevo texto»/g

En el fragmento del texto pueden ser tres opcion.

. (punto) significo solo en esa linea se reemplazará.

% (signo de porcentaje) significa el documento completo.

«linea inicial», «linea final» solo reemplaza lo que hay en esas lineas.

Ejemplo 1:

Ejemplo 2:

~~~:30,$s/1er/primer/g~~~ acá cambia 1er por primer desde la linea 30 hasta el final.



La verdad que vi este curso y me encantó aunque lo critico.

En las minúsculas w, b y e toma solo las letras como palabras, en cambio las mayúsculas los únicos limitadores de las palabras son los espacios en blanco.

Te doy un ejemplo, suponé que el texto sea:

Alexis, sos un genio.

Si utilizás w, b y e (en minüsculas), Alexis te toma como una palabra, la coma es otra palabra, sos otra palabra, un otra palabra, genio otra palabra y el punto la última palabra.

Pero si utilizás W, B y E (en mayúsculas), Alexis junto con la coma y genio junto con el punto te lo toma todo una palabra.

Esto te sirve para, por ejemplo, en JS: console.log('hola mundo'). Estás en la c y querés ir a la m, tenés que presionar cinco veces la w o hacer 5w. Pero haciendo una sola vez W llegás a la m directamente.

Espero haberte ayudado.

No gustó este módulo, ¡me encantó! Pero me surgió una pregunta: Si yo tengo muchos cupcake y, en vez de utilizar useRef utilizo document.getElementId, por lógica creo que me tendría que dar error, porque tendría todas las fotos con el mismo ID…