Utilice esta sencilla guía de diseño de formularios CSS de estilo

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en telegram
Compartir en whatsapp
Compartir en email
Compartir en print
Utilice esta sencilla guía de diseño de formularios CSS de estilo

Utilice esta sencilla guía de diseño de formularios CSS de estilo

VALORACIÓN DEL ARTÍCULO:
5/5


Aprender a diseñar formas con CSS es una gran manera de mejorar el aspecto de su sitio web. Los formularios HTML están entre las cosas más feas en la mayoría de las páginas web. A menudo son aburridos y utilitarios y no ofrecen mucho en el sentido del estilo.

Con CSS, eso puede cambiar. La combinación de CSS con las etiquetas de formulario más avanzadas puede proporcionar unos formularios de aspecto agradable.

Cambiar los colores

Al igual que con el texto, puede cambiar los colores de primer plano y de fondo de los elementos del formulario. Una manera fácil de cambiar el color de fondo de casi todos los elementos del formulario es usar la propiedad de color de fondo en la etiqueta de entrada. Por ejemplo, este código aplica un color de fondo azul (#9cf) en todos los elementos.

input {
>inputcolor de fondo : #9cf;
color #000;
}

Para cambiar el color de fondo sólo de ciertos elementos del formulario, simplemente añada "textarea" y seleccione el estilo. Por ejemplo:

input, textarea, seleccione {
.color de fondo : #9cf;
color #000;
}

Asegúrese de cambiar el color del texto si hace que su color de fondo sea oscuro. Los colores contrastantes ayudan a hacer que los elementos de la forma sean más legibles. Por ejemplo, el texto en un color de fondo rojo oscuro es mucho más fácil de leer si el color del texto es blanco. Por ejemplo, este código coloca texto blanco sobre fondo rojo.

input, textarea, seleccione {
.color de fondo : #c00;
color #fff;
}

Incluso puede poner un color de fondo en la etiqueta del formulario. Recuerde que la etiqueta del formulario es un elemento de bloque, por lo que el color rellena todo el rectángulo, no sólo las ubicaciones de los elementos. Puede añadir un fondo amarillo a un elemento de bloque para que el área destaque, de esta manera:

form {
color de fondo : #ffc;
}

Agregar bordes

Al igual que con los colores, puede cambiar los bordes de varios elementos de formulario. Puede añadir un solo borde alrededor de todo el formulario. Asegúrese de añadir relleno, o sus elementos de forma se atascarán justo al lado del borde. He aquí un ejemplo de código para un borde negro de 1 píxel con 5 píxeles de relleno:

form {
borde : 1px sólido #000;
acolchado: 5px;
}

Puede poner bordes alrededor de algo más que el formulario en sí mismo. Cambie el borde de los elementos de entrada para que destaquen:

input {
>inputborder : 2px guión #c00;
}

Tenga cuidado cuando ponga bordes en los cuadros de entrada, ya que se parecen menos a los cuadros de entrada en ese momento, y es posible que algunas personas no se den cuenta de que pueden rellenar el formulario.

Combinar características de estilo

Al combinar los elementos de su formulario con el pensamiento y algo de CSS, puede crear un formulario de aspecto agradable que complemente el diseño y la disposición completa de su sitio.

Deja un comentario

TAMBIÉN TE INTERESA

avatares-para-los-clientes-de-un-supermercado

Las tiendas y las calles se podrían llenar de avatares inteligentes…

Empieza a sonar con fuerza el metaverso en numerosas industrias. El futuro de internet consistirá a base de plataformas o salas para interactuar, pero en lugar de nosotros serán los avatares que hayamos diseñado los que se desenvuelvan por este nuevo espacio virtual que dará un paso más con respecto a las redes sociales.  

anillo-Circular

Menos la hora, el anillo Circular ofrece todo lo que un buen smartwatch

El anillo Circular se suma a la tendencia imparable de los wearables en el mundo de la tecnología y la electrónica de consumo. Todo lo que ofrece, exceptuando la hora, puede asemejarse a las funciones de un buen smartwatch como el de Apple o cualquier otra pulsara de conocidas marcas del segmento.   Índice de

OnePlus-10-Pro

Un nuevo pura sangre de Android llegará en primavera: OnePlus 10 Pro

Apenas estamos saboreando al OnePlus 9 Pro y la marca anuncia su nuevo flagship: el OnePlus 10 Pro. Será el smartphone referente de una marca que poco a poco se está haciendo un hueco importante en el mercado europeo tras triunfar en China. Será en su país de origen donde se lance el dispositivo y

movil-plegable-honor-magic-v

Nuevo móvil plegable en el mercado: Honor Magic V

Si eres fan del móvil plegable, has de saber que el de Samsung no es el único que puede ocupar tu mente. El Honor Magic V acaba de salir del horno y promete hacerle mucha competencia a su rival surcoreano.   El Honor Magic V se presenta como el primer móvil plegable de la firma

hacker

Destapadas las cifras de fraude en el pasado Black Friday: ojo a España

Pasadas ya unas cuantas semanas del Black Friday, podemos sacar conclusiones sobre el fraude o los intentos de fraude que se han producido a nivel global y en España. Los datos que han salido a la luz sitúan a España como una gran diana por los hackers, ya que nuestro país supera ampliamente la media

OPPO-Air-Glass

Las OPPO Air Glass esperan ver la luz en el primer trimestre del año

Las OPPO Air Glass son las primeras gafas de realidad asistida de la marcha china que fueron presentadas durante la última parte del año 2021, en su llamado INNO Day. Su llegada definitiva al mercado se estima para esta primera parte del año 2022, aunque por el momento su comercialización solo se producirá en territorio