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
Aportes 26
Preguntas 2
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.
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
Abreviatura Emmet
ul>(li>input:checkbox>div.shield)*10
Y hasta ayer usaba javascript para lograr ese contador.
🤯🤯Así quedé🤯🤯
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>
Para incremetar el contador de 5 en 5 ingresar
counter-increment: game 5;
Notas de la clase
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.”
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
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 🤔.
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);
}
Yo lo pude hacer asi e igual lo cuenta, segun lo que lei, pero queria saber la diferencia
h3::after{
content: counter(my-counter);
}
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.