pseudoclases CSS3
Introducción a pseudoclases CSS3
Buen día el ejemplo de hoy es un formulario con algunas variaciones las cuales son posibles gracias a los nuevos estándares en la presentación de datos (HTML5) y de diseño de los mismo (CSS3) los cuales son producidos por la w3c, hoy en día HTML5 y CSS3 ya no son los simples lenguajes que conocimos en sus versiones anteriores, actualmente están orientados a mejorar la interacción entre los usuarios, el navegador web y los datos que con ayuda del navegador podemos manipular, HTML5 presenta diferentes API´s con las cuales podemos tatuar directamente nuestra página con dibujos en 2D, incluir audio y video sin la necesidad de lenguajes script, manejar la geo localización, tener la posibilidad de arrastrar y soltar archivos, comunicación interna con datos almacenados en el navegador, etc.
Así mismo para esta la tercera versión de la hojas de estilo se han generado diversas pseudo clases para poder interactuar con las etiquetas dentro de los documentos basados en el lenguaje de marcas, algunas de ellas nos permiten añadir nuestros propios diseños de fuentes, también nos permite manejar de una manera más sencilla el modelo de caja en la web, definir la forma en como nuestros datos van a interactuar con el usuarios, y estilizar una gran cantidad de las etiquetas de HTML5.
Las pseudoclases son las encargadas de definir el estilo y comportamiento de manera inicial (el momento de cargar el documento) o cuando el usuario interactúa con ciertos elementos HTML (enlaces, imágenes, botones, inputs, etc.), la forma en la cual podemos modificar un elemento mediante por una cierta pseudoclase es el siguiente:
Etiqueta:Pseudoclase { Propiedad:Valor ; ... ; PropiedadN:valor }
Ejemplo:
a:link {color: rgba(255, 255, 0, 0.2);} /* enlace sin visitar */
*con este ejemplo le estamos diciendo al navegador que todos los enlaces sean de un color amarillo pálido.
Algunas de la pseudoclases disponibles actualmente son:- :link se aplica a todos los enlaces no han sido visitados.
- :visited se aplica a todos los enlaces han sido visitados.
- :hover se activa cuando el usuario pasa el ratón por encima del elemento que lo tiene referenciado.
- :focus se activa cuando el elemento tiene el foco del navegador. Normalmente se aplica a los elementos < input >.
- :required se aplica a los elementos < input > que tienen la propiedad required activada.
- :optional se aplica a los elementos < input > que no tienen la propiedad required activada.
- :in-range se aplica a los < input > que tienen un rango de valor de ingreso especificado, (propiedades max y min), este es activado cuando el usuario ingresa un valor dentro del rango.
- :out-of-range se aplica a los elementos < input > que tienen un rango de valor de ingreso especificado, este es activado cuando el usuario ingresa un valor fuera del rango.
- :valid se activa cuando el usuario cumple con los requerimientos establecidos en un < input >, asi mismo también existe su contraparte :invalid.
Ejemplo
sin mas que pueda comentar en esta entrada les dejo un ejemplo sencillo de como podemos utilizar las pseudoclases en un formulario(imagen)
ya que el código es un poco extenso te invito a descargarlo en el siguiente enlace
Descargar
Contiene Huevos de Pascua
