Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

3D
15H
42M
46S

Creando contadores con CSS en Animationland

2/12
Recursos

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.
Resultado final del juego

Aprenderemos no solo a maquetar, sino a darle las animaciones correspondientes junto con su funcionalidad solo con CSS.


Maquetaci贸n I - Realizando el contador 馃幉

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 馃憖.

Estructura al realizar el contador

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.

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:

  • 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.

Una vez explicado ello, dentro de la etiqueta `

\<style>\</style>,

Colocaremos el siguiente c贸digo.

Utilizando la propiedad count

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:
Resultado de usar un contador en CSS

:::(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

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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茅 鈥渦sar谩 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>




驴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

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.

鈥淯n peque帽o paso con CCS y gran paso para el desarrollo web.鈥

<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=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=鈥渃heckbox鈥><div class=鈥渟hield鈥></div></li>
<li><input type=鈥渃heckbox鈥><div class=鈥渟hield鈥></div></li>
<li><input type=鈥渃heckbox鈥><div class=鈥渟hield鈥></div></li>
<li><input type=鈥渃heckbox鈥><div class=鈥渟hield鈥></div></li>
<li><input type=鈥渃heckbox鈥><div class=鈥渟hield鈥></div></li>
<li><input type=鈥渃heckbox鈥><div class=鈥渟hield鈥></div></li>
<li><input type=鈥渃heckbox鈥><div class=鈥渟hield鈥></div></li>
<li><input type=鈥渃heckbox鈥><div class=鈥渟hield鈥></div></li>
<li><input type=鈥渃heckbox鈥><div class=鈥渟hield鈥></div></li>
<li><input type=鈥渃heckbox鈥><div class=鈥渟hield鈥></div></li>
<li><input type=鈥渃heckbox鈥><div class=鈥渟hield鈥></div></li>
<li><input type=鈥渃heckbox鈥><div class=鈥渟hield鈥></div></li>
<li><input type=鈥渃heckbox鈥><div class=鈥渟hield鈥></div></li>
<li><input type=鈥渃heckbox鈥><div class=鈥渟hield鈥></div></li>
<li><input type=鈥渃heckbox鈥><div class=鈥渟hield鈥></div></li>
<li><input type=鈥渃heckbox鈥><div class=鈥渟hield鈥></div></li>
<li><input type=鈥渃heckbox鈥><div class=鈥渟hield鈥></div></li>
<li><input type=鈥渃heckbox鈥><div class=鈥渟hield鈥></div></li>
<li><input type=鈥渃heckbox鈥><div class=鈥渟hield鈥></div></li>
<li><input type=鈥渃heckbox鈥><div class=鈥渟hield鈥></div></li>
</ul>
<h3 class=鈥渢otal-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 馃.