✨ Haz magia con CSS en BiznagaFest

Ejemplos sin JavaScript

Truco de Cartas

link

<div class="container">
	<form>
		<input type="radio" id="step-one" name="step" checked />
		<input type="radio" id="step-two" name="step" />
		<input type="radio" id="step-three" name="step" />
		<input type="radio" id="step-four" name="step" />
		<input type="radio" id="step-five" name="step" />
		<div id="dialog-one" class="dialog">
			<span>Vamos a ver un truco de magia</span>
			<label for="step-two">Comenzamos</label>
		</div>
		<div id="dialog-two" class="dialog">
			<span>Os voy a mostrar 6 cartas</span>
			<label for="step-three">Mostrar</label>
		</div>
		<div id="dialog-three" class="dialog">
			<div>Elige una carta pero no me la digas</div>
			<label for="step-four">Ocultar</label>
		</div>
		<div id="dialog-four" class="dialog">
			<div>Piensa muy fuerte en tu carta!!</div>
			<label for="step-five">Resultado</label>
		</div>
		<div id="dialog-five" class="dialog">
			<div>He enviado tu carta al cementerio</div>
			<input type="reset" value="Comienza de nuevo!" id="reset" />
		</div>
		<div class="cards" id="cards-one">
		</div>
		<div class="cards" id="cards-two">
		</div>
		<div class="cards" id="cards-three">
		</div>
	</form>
</div>

.dialog {
	display: none;
	font-size: 5rem;
	color: var(--primary);
}

#step-one:checked ~ #dialog-one,
#step-two:checked ~ #dialog-two,
#step-three:checked ~ #dialog-three,
#step-four:checked ~ #dialog-four,
#step-five:checked ~ #dialog-five {
	display: block;
}

#step-two:checked ~ #cards-one {
	left: 50%;
}

#step-three:checked ~ #cards-two {
	left: 50%;
}

#step-five:checked ~ #cards-three {
	left: 50%;
}

Pociones CSS

Elementos de Formulario

Texto

<div class="box">
    <div>
        <span aria-label="Biznaga" style="--i:1;"></span>
        <!-- Repite para los demás elementos, cambiando el valor de --i -->
    </div>
</div>

@media (prefers-reduced-motion: reduce) {
    .box div {
        animation: none;
    }
}

Efectos en Imágenes

Dibujando con CSS

Animaciones

Power UP

Videojuegos

¡Gracias!