El evento onClick es lo que sucede cuando damos clik a un botón o cualquier otro elemento de nuestro documento HTML. En CSS, este evento propio de Javascript no existe, aunque podemos encontrar otros eventos similares, como podría ser un hover, que se activa al pasar el cursor por encima del elemento, pero no es lo mismo ya que cuando el cursor deja de tocar el elemento, el efecto se desactiva.
Demo:
¿Parecen botones verdad? Pues en realidad son radio button y lo que hago es simular el evento onClick usando el “selector general de elementos hermanos” de CSS para modificar las propiedades del cuadrado. Veamos como:
Primero la parte de html con los radio button y el div que vamos a animar.
Hasta aquí nada especial, lo interesante esta en el código css:
Primero ocultamos las casillas de los radio button para dejar solo la etiqueta o label que hará las veces de botón.
A continuación tenemos que dar formato a las etiquetas para que parezcan botones y para eso está la clase botón. También se pueden usar imágenes para las etiquetas o cambiarles el CSS independientemente, en este caso yo uso una clase porque quiero todos los botones iguales.
Después damos formato al div que se va a animar al pulsar los botones.
Y por último la parte importante, donde se combinan los radio button con el “selector general de elementos hermanos” o “~”. En esta parte lo que hago es fijar lo que ocurrirá cuando cada radio button este marcado o checked, aunque no se vea porque anteriormente los hemos ocultado, pero vemos las etiquetas a la que le hemos dado forma de botón más arriba y que hacen la misma función que las casillas ocultas.
Con el “selector general de elementos hermanos” seleccionamos, dentro del mismo div contenedor o padre, al siguiente elemento en el código HTML. En este caso el siguiente elemento o hermano de los radio button seria el div #elemento, que está justo abajo en el código HTML. De esta manera al pulsar el boton o ponerlo en checked, podemos cambiarle el CSS.
Es importante tener en cuenta que este selector solo funciona con los elementos que van detrás en el código html, es decir, desde el div #elemento no se podrían modificar los estilos de los radio button porque está arriba.
Por último señalar que la propiedad transition se usa para que los cambios en los estilos se hagan de manera progresiva en un lapso de 2 segundos, si no la usara el cuadrado desaparecería de una posición y aparecería en la otra sin hacer el efecto desplazamiento.
Esto es solo un pequeño ejemplo para aprender pero con esta técnica se pueden hacer cosas mucho mas interesante, como podría ser una galería solo con CSS, es cuestión de usar la imaginación.
Puedes descargar el ejemplo completo de aquí:
Para cualquier aclaración o corrección los comentarios están abiertos a todos y si tienes o creas un ejemplo también puedes compartir el enlace publicándolo junto con tu comentario.
Demo:
¿Parecen botones verdad? Pues en realidad son radio button y lo que hago es simular el evento onClick usando el “selector general de elementos hermanos” de CSS para modificar las propiedades del cuadrado. Veamos como:
Primero la parte de html con los radio button y el div que vamos a animar.
<input type="radio" name="control" id="boton1" />
<label for="boton1" class="boton" name="izquierda">Izquierda</label>
<input type="radio" name="control" id="boton2" />
<label for="boton2" class="boton" name="derecha">Derecha</label>
<input type="radio" name="control" id="boton3" />
<label for="boton3" class="boton" name="circulo">Circulo</label>
<input type="radio" name="control" id="boton4" />
<label for="boton4" class="boton" name="invisible">Invisible</label>
<input type="radio" name="control" id="boton5" />
<label for="boton5" class="boton" name="aumentar">Aumentar</label>
<input type="radio" name="control" id="boton6" />
<label for="boton6" class="boton" name="rotar">Rotar</label>
<div id="elemento"></div>
Hasta aquí nada especial, lo interesante esta en el código css:
Primero ocultamos las casillas de los radio button para dejar solo la etiqueta o label que hará las veces de botón.
#boton1{
display:none;
}
#boton2{
display:none;
}
#boton3{
display:none;
}
#boton4{
display:none;
}
#boton5{
display:none;
}
A continuación tenemos que dar formato a las etiquetas para que parezcan botones y para eso está la clase botón. También se pueden usar imágenes para las etiquetas o cambiarles el CSS independientemente, en este caso yo uso una clase porque quiero todos los botones iguales.
.boton{
padding:5px 20px 5px 20px;
background-color:#333;
color:#fff;
border:2px inset #6E6E6E;
float:left;
margin-right:10px;
cursor:pointer;
}
Después damos formato al div que se va a animar al pulsar los botones.
#elemento{
width:100px;
height:100px;
background-color:#333;
margin-top:50px;
margin-bottom:200px;
}
Y por último la parte importante, donde se combinan los radio button con el “selector general de elementos hermanos” o “~”. En esta parte lo que hago es fijar lo que ocurrirá cuando cada radio button este marcado o checked, aunque no se vea porque anteriormente los hemos ocultado, pero vemos las etiquetas a la que le hemos dado forma de botón más arriba y que hacen la misma función que las casillas ocultas.
Con el “selector general de elementos hermanos” seleccionamos, dentro del mismo div contenedor o padre, al siguiente elemento en el código HTML. En este caso el siguiente elemento o hermano de los radio button seria el div #elemento, que está justo abajo en el código HTML. De esta manera al pulsar el boton o ponerlo en checked, podemos cambiarle el CSS.
#boton1:checked ~ #elemento{
margin-left:0;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
#boton2:checked ~ #elemento{
margin-left:370px;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
#boton3:checked ~ #elemento{
border-radius:100px;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
#boton4:checked ~ #elemento{
opacity:0;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
Es importante tener en cuenta que este selector solo funciona con los elementos que van detrás en el código html, es decir, desde el div #elemento no se podrían modificar los estilos de los radio button porque está arriba.
Por último señalar que la propiedad transition se usa para que los cambios en los estilos se hagan de manera progresiva en un lapso de 2 segundos, si no la usara el cuadrado desaparecería de una posición y aparecería en la otra sin hacer el efecto desplazamiento.
Esto es solo un pequeño ejemplo para aprender pero con esta técnica se pueden hacer cosas mucho mas interesante, como podría ser una galería solo con CSS, es cuestión de usar la imaginación.
Puedes descargar el ejemplo completo de aquí:
Para cualquier aclaración o corrección los comentarios están abiertos a todos y si tienes o creas un ejemplo también puedes compartir el enlace publicándolo junto con tu comentario.