Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Site Elements
Webdesign

Smarten Up a Slick Login Form con CSS3

by
Length:LongLanguages:

Spanish (Español) translation by CYC (you can also view the original English article)

Vamos a crear un formulario de inicio de sesión minimalista e ingenioso utilizando HTML5 básico y luego lo mejoraremos con algunas técnicas CSS3. Es hora de transformar algunos elementos simples en algo hermoso.

¿Buscas un atajo?

Si deseas algunos formularios CSS3 hermosos para tu sitio y no quieres tener que crearlos tu mismo, no puedes equivocarte con el Paquete de formularios CSS3 en Envato Market. Por solo $5, obtienes:

  • 33 estilos de formulario de inicio de sesión
  • 66 estilos de formulario de búsqueda
  • 12 estilos de formulario de contacto
  • Un formulario general que presenta estilos de texto, área de texto, botón de radio, casilla de verificación, cuadro de selección
  • Varios estilos de color para cada formulario.

No es de extrañar que sea uno de los elementos de formulario CSS3 más vendidos en Envato Market.

CSS3 Form Pack on Envato Market
Paquete de formularios CSS3 en Envato Market

Introducción

Los formularios web son una parte integral del diseño de un sitio web. Sea cual sea el propósito, los formularios pretenden ser una forma sencilla para que los usuarios ingresen valores y envíen datos. Al tener HTML5 y CSS3 a nuestra disposición, nos permite crear formularios que son intuitivos de usar y visualmente atractivos.


El diseño

Creo que el diseño web debe ser limpio y eficiente. El diseño del formulario que vamos a codificar sigue esos principios, incluyendo solo tres elementos: una entrada de nombre de usuario, una entrada de contraseña y una entrada de envío. Debido a que el marcado es tan simple, permite una mayor flexibilidad cuando lo codificamos en HTML y CSS.

Aquí hay algunos elementos en el diseño que deberemos tener en cuenta para la codificación:

  • Gradientes
  • Sombras internas
  • Fronteras con opacidad
  • Sombras de texto
  • Texto del placeholder

La mayoría de los elementos son estilos CSS, pero también veremos el atributo de marcador de posición , ya que eso sugerirá a nuestros usuarios qué tipo de datos deben ingresar.


Paso 1: Estructura HTML y CSS base

Comencemos creando una plantilla HTML5 limpia con un formulario y tres entradas:

En este momento, no tenemos nada especial, solo un formulario, tres entradas y un documento en blanco. Vamos a crear un archivo CSS llamado style.css y vincularlo de nuevo a nuestra página HTML:

Recuerde, el archivo CSS se encuentra actualmente en nuestro directorio principal; asegúrese de utilizar la ruta correcta si elige colocar su archivo CSS en otra carpeta, como la carpeta 'css' .

Antes de agregar cualquiera de nuestros propios estilos al archivo CSS, siempre es una buena práctica comenzar desde una pizarra limpia. Comenzaremos nuestros estilos con el Restablecimiento de CSS de Eric Meyer, que elimina el estilo predeterminado y nos permite crear nuestras reglas desde el mismo punto en cualquier navegador.

Comencemos por definir una fuente y un degradado de fondo para nuestra página de inicio de sesión. Inserte este código después del reinicio de CSS:

Ahora que hemos agregado ese fragmento de código, nuestra página ahora debe tener un fondo de degradado lineal. El gradiente comienza en la parte inferior de la página (0%) donde el color es # 323B55 y termina en la parte superior de la página (100%) donde el color es # 424F71. Solo en el caso de que la página se vea desde un navegador que no admite gradientes, es importante declarar un color de fondo , que establezco en el mismo color que el gradiente en 0%. Lo mejor de los gradientes CSS3 es que puede agregar muchos 'paradas', por ejemplo, otro cambio de color al 25%. Lo último en agregar en la etiqueta del cuerpo es la familia de fuentes, decidí usar el tipo Sans Serif.

Ahora que tenemos nuestra base, ¡es hora de comenzar a agregar un poco más de estilo!


Paso 2: Diseño del formulario de inicio de sesión

Antes de comenzar el estilo CSS para el formulario de inicio de sesión, debemos agregar algunas cosas a nuestro documento HTML. Primero, comience agregando una identificación al formulario, lo llamaremos 'slick-login' . A continuación, agregue un atributo de marcador de posición en cada una de las etiquetas de entrada. Aquí es cómo debe verse la página HTML hasta ahora:

El atributo de marcador de posición de entrada HTML5 es una gran adición a las etiquetas de entrada. En lugar de tener un valor de entrada que el usuario debe reemplazar, el atributo de marcador de posición nos permite mostrar el texto de ayuda y hacer que desaparezca una vez que el usuario comienza a escribir en el campo. Todavía no está ampliamente soportado y, por lo tanto, debe usarse con precaución. Digamos, por ejemplo, que el atributo de marcador de posición no funciona en un navegador, el usuario no sabrá qué valores ingresar. Más adelante cubriremos una técnica alternativa, pero tampoco vale la pena que el texto del marcador de posición sea una sugerencia, en lugar de etiquetar la entrada.

Ahora que tenemos nuestra página HTML actualizada, podemos comenzar a agregar algunos estilos a los formularios de inicio de sesión. Aquí está el CSS para nuestro ID de formulario que declaramos anteriormente.

Para este formulario de inicio de sesión, decidí alinearlo perfectamente (horizontal y verticalmente) en el centro de la página. Es bastante sencillo posicionar elementos como este. Como puede ver en el código anterior, coloque el elemento 50% desde arriba y hacia la izquierda, y luego, utilizando los valores de margen, presione la mitad del ancho y la altura del elemento. Este es un excelente método para alinear elementos en el centro de la página, pero no es tan bueno en términos de flexibilidad. Por ejemplo, si desea duplicar elementos, tendría que cambiar los valores de ancho, alto y margen para mantener el elemento alineado. A pesar de que alineé el formulario en el centro de la página, ¡siéntase libre de cambiar el código a lo que quiera!

Ahora que tenemos nuestro formulario alineado, ¡es hora de pasar al estilo de las entradas!


Paso 3: Estilo de las entradas

Ahora, estamos llegando a las cosas divertidas. Comencemos agregando el CSS para las entradas de texto y contraseña:

Recuerde, nuestro objetivo es hacer la forma flexible. En lugar de declarar un ancho de entrada fijo, decidí hacer el ancho en relación con el ancho del formulario. De esta manera, si decidimos cambiar el ancho del formulario, todas las entradas cambiarán en consecuencia.

Debido a que declaramos un valor de margen superior para todas las entradas, debemos agregar un selector de primer hijo y asegurarnos de que el margen superior de la primera entrada se establece en cero. De esta manera, el primer valor de entrada siempre se colocará en la parte superior del formulario.

Otra cosa a tener en cuenta es establecer la propiedad de esquema en ninguna, de modo que el navegador no agregue ningún contorno no deseado a nuestras entradas.

Fronteras transparentes

Para que el formulario sea más flexible, vamos a agregar un borde transparente, de modo que, independientemente del fondo que tenga el sitio web, el formulario cambiará para adaptarse a él. Debido a que el atributo de opacidad cambia la opacidad de todo el elemento, decidí buscar un método para cambiar la opacidad del borde.
Si declara el color del borde en rgba, es posible agregar un valor alfa. Como puede ver arriba, nuestro borde es un borde negro sólido de 1px, pero su opacidad es del 47%.

El problema del relleno

En nuestro diseño, el texto en el campo se desplaza a la derecha. Para lograr este efecto en CSS, simplemente podemos usar la propiedad padding-left y establecerla en 20px. Cuando renderizamos el código, surge un problema. El valor de relleno agrega 20 píxeles al ancho de entrada, que no es lo que nos gustaría.

Para solucionar esto, podemos agregar una propiedad de clip de fondo y establecer el valor en padding-box. Este fragmento de CSS se asegura de que el relleno no afecte el ancho de la entrada. Puede obtener más información sobre la propiedad de clip de fondo en Mozilla .

Añadiendo la Sombra Interna

Otra propiedad CSS3 muy interesante es box-shadow . El uso del parámetro de inserción nos permite crear una sombra interna en el elemento de entrada. Usando el selector de enfoque , podemos cambiar fácilmente los valores y colores cuando el usuario hace clic en el campo.


Paso 4: Diseñar el botón Enviar

El botón de envío es una parte muy importante de un formulario, ¡así que hagamos que se destaque! Aquí está el CSS que vamos a utilizar para la entrada de envío:

El CSS para nuestro botón de enviar es bastante sencillo; Estamos utilizando bordes, degradados y sombras internas para resaltar el botón. Otra propiedad de CSS3 que veremos es text-shadow .

Para que el texto del botón se destaque un poco más, agregaremos una sombra sólida de 1px sobre el texto. Usando un color más oscuro (# 5b6ddc), podemos hacer que el texto blanco sea más prominente contra el fondo azul claro. Incluso el efecto más sutil, como agregar una sombra de texto, puede agregar mucho a su diseño, lo que permite que el texto se destaque.

Seguí adelante y añadido el código para el vuelo estacionario y activos selectores. Todo lo que se cambia es el color del degradado y la sombra interior. Observe cómo el cambio de color es bastante sutil, pero agrega mucho al diseño. También cambié el valor de margen superior a tres píxeles más bajo en el estado de desplazamiento. El cambio se siente natural y se suma a la elegancia de la forma.

Hasta ahora, todo se ve muy bien, pero si pasas el ratón y haces clic en algunos elementos, parece un poco entrecortado. ¡Es hora de agregar alguna animación!


Paso 5: Agregar transiciones a los elementos

Para hacer que las cosas fluyan mucho mejor, agreguemos este bit de código CSS a nuestras entradas:

Usando una transición rápida y simple, todos nuestros elementos se ven y se sienten mucho mejor. Observe la transición del color de la sombra interior en las entradas de texto y la animación del botón de envío al pasar el mouse; Las transiciones hacen que el formulario se vea completo.

Aunque todo se ve bien, agreguemos algunas golosinas más antes de que lo llamemos un día.


Paso 6: Agregando Etiquetas

Para asegurarse de que nuestro formulario sea accesible, agregue este bit de marcado junto a sus etiquetas de entrada:

Como queremos que nuestro formulario sea lo más sencillo posible, decidimos utilizar el atributo de marcador de posición . Otra forma de que también podría haber funcionado sería la adición de una etiqueta de la etiqueta. Debido a que no necesitamos la etiqueta en nuestro diseño, más bien por motivos de accesibilidad y SEO, agregaremos este código CSS en:

Establecer la propiedad de visualización en ninguno logra el aspecto que queremos, que en este caso, ¡no es ningún aspecto!


Paso 7: Compatibilidad entre navegadores

Ahora, volvamos a ese problema potencial que tendríamos con el atributo de marcador de posición . Digamos que alguien está viendo este sitio web desde un navegador que no admite marcadores de posición : nuestras entradas en blanco serían bastante inútiles. Para solucionar esto, usaremos jQuery y Modernizr para detectar el soporte y rectificar situaciones donde no haya ninguna. Para empezar, vamos a vincular los scripts a nuestra página HTML.

Suelte las etiquetas de script en el de su HTML. Para obtener el mejor rendimiento, debe hacer que sigan las referencias de las hojas de estilo. La razón por la que recomendamos colocar Modernizr en la cabeza es doble: HTML5 Shiv (que permite elementos HTML5 en IE) debe ejecutarse antes de - Modernizr

Ahora, crea un nuevo archivo javascript llamado placeholder.js . El Método Único tiene una excelente manera de usar Modernizr para crear una reserva para el atributo de marcador de posición . Agregue este código en el archivo javascript:

También vincularemos el archivo javascript a nuestra página HTML:

Para hacer que esto funcione, necesitamos agregar una clase de marcador de posición a las entradas de campo:

Ahora, agreguemos el estilo para la clase de marcador de posición en nuestro archivo CSS:

Mientras estamos en ello, también agreguemos un útil fragmento de CSS que se asegurará de que los anchos de las entradas permanezcan iguales, independientemente del relleno y los bordes:

Para obtener más información sobre por qué el tamaño de la caja es tan grande, Paul Irish tiene una gran explicación .


Paso 8: Agregar una animación simple

Para que nuestro formulario sea aún más sofisticado, agregaremos una simple animación ascendente al formulario cuando se cargue la página. Comencemos con declarar la animación y agregar fotogramas clave:

El CSS anterior declara una nueva animación llamada inicio de sesión y altera los valores de margen superior y opacidad para que la forma se difumine y suba a la posición. Ahora, agreguemos el CSS para el ID de inicio de sesión slick :

Ahora, cada vez que se carga la página, se ejecutará la animación de un segundo. Ahora que hemos diseñado, arreglado y animado, ¡hemos terminado!


HTML final y CSS

Aquí hay un vistazo al HTML final de este formulario de inicio de sesión:

Y el CSS:


Conclusión

Aquí un vistazo al resultado final :

Lo bueno de este formulario es que es muy fácil de cambiar. También es muy fácil de ampliar, agregar más entradas, validación, funcionalidad, etc. Gracias por seguir leyendo y espero que haya aprendido algo. ¡Estaré interesado en escuchar para qué usas esto!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.