Requisitos para tomar el curso
Sabes más de animaciones de lo que crees
Animationland game
Creando contadores con CSS en Animationland
Maquetando a nuestros conejitos en Animationland: contexto de apilamiento
Dibujando a nuestros conejitos con CSS en Animationland
Animation y keyframes en CSS
Animation name y keyframe
Animation duration
Animation timing function, iteration count y delay
Animation direction, fill mode y play state
Rendimiento de animaciones con CSS
CSS Triggers: layout, paint y composite
Debugging de animaciones con DevTools
Buenas prácticas para optimizar animaciones web
Libros recomendados y próximos pasos
Continúa en el Curso Práctico de Animaciones con CSS
En esta clase, se presentará el reto a realizar. El juego consiste en seleccionar la mayor cantidad de conejos que puedas para acumular puntos en el contador que se encuentra en la parte superior.
Aprenderemos no solo a maquetar, sino a darle las animaciones correspondientes junto con su funcionalidad solo con CSS.
Para ello, empezaremos con nuestro editor de código favorito, en este caso utilizaré Visual Studio Code, Colocaremos la estructura básica en un archivo llamado contador.html, en la etiqueta \<. body>\</body. > colocaremos una lista desordenada y dentro por cada elemento de lista, colocaremos un input de tipo checkbox y un div, así como veremos a continuación 👀.
Y dentro del mismo archivo dentro de las etiquetas <head></head>, abriremos las etiquetas <style></style>. Una vez realizado los pasos, haremos una pausa ⏳ para explicar el funcionamiento de usar Counter en CSS.
Los contadores de CSS, nos permite numerar automáticamente la apariencia de un contenido, cuyo valor puede tanto disminuir como aumentar, como una variable, mediante reglas CSS que capturan cuántas veces se usa.
Entre sus propiedades tenemos:
Una vez explicado ello, dentro de la etiqueta `
\<style>\</style>,
Colocaremos el siguiente código.
Explicando cada una de las líneas, dentro de body creamos un contador con la propiedad counter-reset con el valor de game, posteriormente dentro del input cuando esté activo ✅, colocaremos la propiedad counter-increment indicando como valor game, dado que ese contador será el que se incrementará ➕. Por último, llamamos a la clase .total-count::after creando un contenido e indicando como propiedad a counter(game) ya que esto indica dónde se mostrará el indicador cada que un checkbox esté activo ✅.
Una vez realices los pasos mencionados, obtendrás el siguiente resultado:
:::(Info) (Remember:)
Cada que selecciones un checkbox , el contador aumentará en uno. En este caso, dado que se encuentran activos solo 3 casilleros, el contador es igual a 3️⃣.
:::
Contribución creada con los aportes de:Angel David Osorio Leyva
Aportes 35
Preguntas 3
Counter CSS
counter-reset: Crea o reinicia un contador.
counter-increment: Incrementa un valor del contador.
content: Inserta el contenido generado (debe usarse con un pseudoelemento).
counter(): Función que agrega el valor de un contador a un elemento.
Espectacular!!! desde el comienzo pensé “usará JavaScript me imagino” jajaja me gusto mucho eso del counter. Y he visto que es mejor aprender a hacer las cosas con CSS en vez de JS siempre que sea posible
Wow, esto del contador sin necesidad de JS me dejó 😱
Empezamos bien el curso.
Codigo de la clase
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
counter-reset:game; /* crea o reinicia un contador */
}
input:checked {
counter-increment: game;/* incrementa un valor de contador */
}
.total-count::after{
content: counter(game);/* inserta el contenido generado (usar con pseudoelemento) */
} /* counter: funcion que agrega el valor de un contador a un elemento */
</style>
</head>
<body>
<ul>
<li>
<input type="checkbox" name="" id="">
<div class="shield"></div>
</input>
</li>
<li>
<input type="checkbox" name="" id="">
<div class="shield"></div>
</input>
</li>
<li>
<input type="checkbox" name="" id="">
<div class="shield"></div>
</input>
</li>
<li>
<input type="checkbox" name="" id="">
<div class="shield"></div>
</input>
</li>
<li>
<input type="checkbox" name="" id="">
<div class="shield"></div>
</input>
</li>
<li>
<input type="checkbox" name="" id="">
<div class="shield"></div>
</input>
</li>
<li>
<input type="checkbox" name="" id="">
<div class="shield"></div>
</input>
</li>
<li>
<input type="checkbox" name="" id="">
<div class="shield"></div>
</input>
</li>
<li>
<input type="checkbox" name="" id="">
<div class="shield"></div>
</input>
</li>
<li>
<input type="checkbox" name="" id="">
<div class="shield"></div>
</input>
</li>
</ul>
<h3 class="total-count">Score: </h3>
</body>
</html>
Hola chicos les quiero compartir este pequeño post que hice basándome en un Tuit que hizo la profe de como tiene su tema con efectos Neon en su entorno de desarrollo. 😃
.
Míralo Justo Aquí 👇
Como cambiar la apariencia de tu entorno de desarrollo Visual Studio Code a un modo Neón
Para incremetar el contador de 5 en 5 ingresar
counter-increment: game 5;
Abreviatura Emmet
ul>(li>input:checkbox>div.shield)*10
🤯🤯Así quedé🤯🤯
Notas de la clase
Para crear contadores en CSS:
ocupamos 3 propiedades:
counter-reset: La cual basicamente nos genera un contador. A esta propiedad le debemos dar el valor del nombre que le pondremos al contador:
counter-reset: game
Para aumentar el valor del contador, utilizamos counter-increment al cual le daremos como valor el nombre del contador a incrementar.
input:checked {
counter-increment: game;
}
Por ultimo, si deseamos desplegar el texto, podemos hacer uso de content el cual refiere al contenido que tendra el selector en el que esta siendo usado:
.total::after {
content: counter(game);
}
Y hasta ayer usaba javascript para lograr ese contador.
Estaria bien que se explicara mas afondo el porque del código y no nada más tirar código.
- Como es que funciona contunter() junto con las propiedades de counter-reset y counter-increment .
- Los valores por default de estas dos propiedades
Aca dejo unos links de documentación de este método y las propiedades css que se utilizan:
link del method counter()
link de la propiedad css-reset
link de la propiedad css-increment
Que interesante Stefany ir descubriendo como CSS puede asumir ciertas tareas que antes de la clase, yo las hubiese resuelto con JS.
“Un pequeño paso con CCS y gran paso para el desarrollo web.”
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Rabbit Jump</title>
<style>
body {
counter-reset: game;
}
input:checked {
counter-increment: game;
}
.total-count::after {
content: counter(game);
}
</style>
</head>
<body>
<ul>
<li><input type=“checkbox”><div class=“shield”></div></li>
<li><input type=“checkbox”><div class=“shield”></div></li>
<li><input type=“checkbox”><div class=“shield”></div></li>
<li><input type=“checkbox”><div class=“shield”></div></li>
<li><input type=“checkbox”><div class=“shield”></div></li>
<li><input type=“checkbox”><div class=“shield”></div></li>
<li><input type=“checkbox”><div class=“shield”></div></li>
<li><input type=“checkbox”><div class=“shield”></div></li>
<li><input type=“checkbox”><div class=“shield”></div></li>
<li><input type=“checkbox”><div class=“shield”></div></li>
<li><input type=“checkbox”><div class=“shield”></div></li>
<li><input type=“checkbox”><div class=“shield”></div></li>
<li><input type=“checkbox”><div class=“shield”></div></li>
<li><input type=“checkbox”><div class=“shield”></div></li>
<li><input type=“checkbox”><div class=“shield”></div></li>
<li><input type=“checkbox”><div class=“shield”></div></li>
<li><input type=“checkbox”><div class=“shield”></div></li>
<li><input type=“checkbox”><div class=“shield”></div></li>
<li><input type=“checkbox”><div class=“shield”></div></li>
<li><input type=“checkbox”><div class=“shield”></div></li>
</ul>
<h3 class=“total-count”>Score: </h3>
</body>
</html>
ul>li*10>input:checkbox+div.shield>
Eso es, EMMET es una ayuda que si la dominan pueden ayudarse a escribir código mucho más rápido.
Ese pequeño código crea el mismo que hizo la teacher en pocos segundos sin copiar ni pegar mucho.
Creo que solo está en VSCode
Por cierto, buen contenido de este curso está muy interesante.
buenas tardes, esta muy interesante el curso hice el contador y me parcio super bueno, espero seguir aprendiendo y mas adelante aportar gracias
A los que no entendieron como fue que se aumento el numero cada que un checkbox estaba seleccionado, talvez este ejemplo les ayude: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_counter-reset
Yo lo pude hacer asi e igual lo cuenta, segun lo que lei, pero queria saber la diferencia
h3::after{
content: counter(my-counter);
}
Me impresiono esto, llevo años haciendo paginas web y nunca vi esto antes
Increible!!! No tenia idea que se podía lograr ese resultado solo con CSS
Genial! me gusto! sin JS, que interesante, va a estar genial este curso
no explica bien y pareciera que no supiera ni de lo que hable solo lee y ya, mas adelante se darán cuenta, hasta se pone animar propiedades como bottom o top que no son recomendables ya que se puede utilizar la propiedad transform en su lugar y es mucho mas rápida en temas de animaciones. pero bueno creo que hay mejor contenido en youtube que el mismo platzi algunos son buenos pero los de esta señora para nada.
Lo del contador lo desconocía. Vengo trabajando con CSS hace mucho tiempo, pero nunca adentre en el mundo de las animaciones. Y esto pensando que el contador iba a hacer con JS, se hizo con CSS 😮
Se nota lo importante de siempre estar aprendiendo… otra forma de hacer un contador con CSS…
Ay ya me emocione con ese curso!! AAAMOOOOO
bueno
😮 No sabía que esto se podía hacer con CSS
No puede ser que tengo años trabajando con CSS y no había visto esta propiedad nunca! 💚🤯
Como dato interesante, el elemento HTML que tendrá vinculado el contador de CSS, debe estar declarado después de los elementos HTML a contar, de lo contrario, no funcionará
Quedé bombardeado con esto de contadores en CSS. Pensé que este tipo de cosas solo se podían hacer con JS. Y algunos dicen que CSS no es lenguaje de programación 😏
Wow!
El poder de CSS, genial.
Gran clase!!
wow imagine que iba a suas js! genia la profe!!
Me gusto mucho esa propiedad de CSS Counter. Me ahorra un poquito de trabajo con Javascript. Pero si se necesita crear algo más complejo, ahi si habrá que darle con Javascript 😅 .
Se me ocurren algunas ideas 🤔.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.