Notas sobre CSS (3). Mas pseudo-clases

Habíamos empezado a explicar como utilizar las pseudo clases, y utilizamos un feo formulario como ejemplo, en este articulo aprovecharemos las propiedades de filtro, para controlar los estilos El formulario, ya lo conocemos, solo hace falta explicar como lograrlo….

  Primero, y aunque no es nuestra principal preocupacion, veamos el degradado de la pagina. Hasta hace poco,hubieramos tenido que emplear una imagen de fondo mas o menos grande. Lo tradicional era una linea de 1 pixel horizontal o vertical, y la otra dimension tan grande como hiciera falta, con el degradado deseado y pidiendo su repeticion en un eje….

Con CSS3, nos basta esto:

background: linear-gradient(to right, #c9de96 0%, #8ab66b 44%, #398235 100%);

Aunque,hasta que todos los navegadores lo soporten debemos escribir algo como esto:

Esta página, os ayudara a generar ese conjunto de lineas.

Para el efecto ventana del formulario, he utilizado dos definiciones; por un lado, he definido como sera cualquier elemento «form» respecto a ancho, alto, relleno y color de fondo con:

para luego, aplicar una clase que redondea los bordes, y crea las sombras, así, si quiero aplicar ese efecto en cualquier otro sitio solo deberé aplicar la clase.

y para que la clase se aplique al formulario:

y a continuación, defino como sera un elemento «input». Recordad que en CSS, cuando un elemento recibe distintos valores para una especificación, se aplica la ultima; eso significa que el orden en que escribamos las reglas, afectara; sobre todo en este caso que habrá mas de una regla para el mismo componente.

1. Definimos la anchura y el estilo de bordes para todos los inputs
2. Definimos la anchura del input y el estilo del borde para todos los inputs «type=text», que son aquellos dedicados a la entrada de textos como contraposicion a los tipo radio, o checkbox
3. Hacemos que todos aquellos inputs que esten correctos, tenganun color de borde azul
4. Hacemos que todos aquellos inputs que sean obligatorios, tengan bordesolido, y color de borde negro
5. Señalamos los input con contenido  erroneo ensanchando el borde y poniendolo rojo.
6. Aplicamos un fuente especial a un input llamado «sexo»

Segun todo eso, este input:

< input type="text" name="nombre" placeholder="Indique el nombre y el apellido" required />

Recibirá la regla 1 porque todo input la recibe, la 2 porque es «type=text», la 4 porque es «required» y la 5 porque ahora mismo es «invalid» ya que es obligatorio, pero esta vacío, eso hará que reciba:

border-style: solid;
 border-width: medium;
width: 25em;
 border-style:dotted ;
border-style: solid
 border-color:black;
border-color: red;
 border-width: 3px;

y quede así:

Y ¿que hubiera pasado si se hubieran cambiado de orden las reglas 4 y 5?, que el color del borde, quedaria negro,  hasta que se rellenara, sin que llegara a aparecer el rojo de error.

Si el input no fuera «required», entonces no se aplica la regla 4, y como  será valido, se aplica la regla 3 en lugar de la 5 y queda:

Veamos ahora el «fieldset» de Sexo, empecemos viendo los estilos que antes no os he mostrado:

1. Lo primero, cambio la alineacion de texto a la izquierda, realmente no tiene mas importancia. si no fuera porque necesito que todo se desplace a la derecha bastante….
2. Indico que cualquier «input» de tipo «radio» que haya, deje un margen a la izquierda de 100 px, esto lo hago para luego tener espacio para dejar caer el texto
3. Esta regla es la que hace la magia, avisa que lo que define va antes del «input», a continuación, extrae el contenido de un atributo que tiene  y que se llama «data-label»
   y lo colocara delante de radio, esto es lo que hace aparecer las palabras «Masculino» y FemeninoPero, todo sera «radio», por lo que podre clicar en cualquier parte para activarlo.
4. Y si todo lo anterior lo tenéis claro, esto es lo sencillo; defino una regla que servirá para el «input» marcado (checked) y lo que hace es aumentar en tamaño del fuente correspondiente

Solo nos queda por revisar lo que hemos hecho en «Aficiones», que ya no creo que represente ninguna dificultad. Solo creamos una regla para que cuando se marca una casill, nos aumente el tamaño de la letra.

A partir de aquí, creo que podeis practicar bastante, yo os dejo todo los fuentes en JSFIDLE, para que no tengais ni que bajarlo, para jugar