Creando contadores con CSS en Animationland

2/12
Recursos

Aportes 26

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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.

¿Quieres tener el mismo tema de VSC que tiene la profe?

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