Creación de un formulario de inicio de sesión en papel apilado

Este artículo es parte de nuestro "Serie de tutoriales HTML5 / CSS3" - Dedicado a ayudarlo a ser un mejor diseñador y / o desarrollador.. haga clic aquí Ver más artículos de la misma serie..

Los formularios de inicio de sesión son una parte esencial de cualquier sitio web dinámico. Proporcionan un mecanismo para que los usuarios de sitios web accedan a contenido restringido. En este tutorial, exploraremos muchas de las características de CSS3 como text-shadow, box-shadow, gradientes lineales y transiciones para crear un formulario de inicio de sesión simple y elegante con un aspecto de papel apilado..

La imagen de arriba muestra una vista previa del formulario de inicio de sesión que vamos a construir. Listo para sumergirse? Empecemos!

1. marcado HTML básico

El formato HTML que usaremos es muy simple, después de la declaración del Doctype HTML5, tenemos la y </code> etiquetas Dentro de <code><body></code> etiqueta, tenemos un <code><section></code> etiqueta con una clase de 'apilados'. Esta <code><section></code> La etiqueta se utiliza para definir el ancho del cuadro de contenido y para alinearlo con el centro de la página. También usaremos el nombre de clase de esta etiqueta para apuntar a esta etiqueta usando CSS. UNA <code><form></code> etiqueta sigue <code><section></code> etiqueta. La etiqueta de formulario no tiene un valor válido para el atributo 'acción', ya que solo se utiliza para fines de demostración. Dentro del campo de formulario están las declaraciones para las etiquetas de correo electrónico y contraseña y el campo de entrada, seguido de un botón de envío. El punto importante a tener en cuenta aquí es que hemos utilizado un campo de entrada con un tipo de "correo electrónico". Esto nos lo proporciona la declaración de HTML5 y se degrada a un campo de entrada de texto regular en navegadores más antiguos..</p> <p>Aquí está el código HTML completo:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Formulario de inicio de sesión simple

  Iniciar sesión
   Email  
   Contraseña

     Y aquí hay una vista previa de lo que hemos creado hasta ahora:
  
 2. Añadiendo estilos básicos
 Crear un nuevo archivo css llamado master.css y agregue un enlace a este archivo en su archivo HTML principal. Iniciaremos nuestro archivo CSS con un restablecimiento rápido para obtener uniformidad en diferentes navegadores. También agreguemos una imagen de fondo agradable a nuestra página. La imagen que he usado ha sido tomada de Patrones sutiles. Siéntase libre de navegar por el sitio para encontrar una imagen de fondo que se adapte a su gusto. Podemos agregar la imagen de fondo con la ayuda de la siguiente declaración. También tenga en cuenta que estoy usando el Open Sans fuente de Google Web Font para el texto del cuerpo.
  / * -------- Base Styles --------- * / body, html margin: 0; relleno: 0;  body background: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") repetición superior izquierda; fuente: 16px / 1.5 "Open Sans", Helvetica, Arial, sans-serif;  div.wrap ancho: 400px; margen: 80px auto; 
 3. Efecto de papel apilado
 Ahora que tenemos el diseño básico en funcionamiento, comencemos con el diseño del formulario. Para obtener el efecto de papel apilado, haremos uso del :después y :antes de pseudo-elementos. Estos pseudo-elementos se usan principalmente para agregar efectos visuales a cualquier selector. 
 los :antes de pseudo-elemento se utiliza para agregar contenido antes del contenido del selector y la :después pseudo-elemento para después del contenido de un selector. 
 Comenzaremos por dar a la sección, con una clase de 'apilados', un ancho de 400px y una altura de 300px. Además, le daremos a esta caja un color de fondo de # f6f6f6 y un borde de 1 píxel de grosor con el color #bbb. Los puntos clave que se deben tener en cuenta aquí son la declaración de radio de borde y la declaración de sombra de cuadro. Aquí, los prefijos de navegador "-moz-" y "-webkit-" se han utilizado para garantizar que esto funcione en los navegadores basados en gecko y webkit. 
 La declaración del radio del borde es muy simple y se utiliza para crear esquinas redondeadas, con 3px que representan la curvatura. La sintaxis de la declaración box-shadow puede parecer complicada, pero dividámosla en partes más pequeñas para entenderla mejor. 
  / * -------- Radio del borde --------- * / -webkit-border-radius: 3px; -moz-border-radius: 3px; radio del borde: 3px; / * -------- Box Shadow --------- * / -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); caja-sombra: 0 0 3px rgba (0,0,0, .2);
 Los dos primeros ceros indican el desplazamiento x y el desplazamiento y y el 3px indica el desenfoque. La siguiente es la declaración de color. He utilizado los valores rgba aquí; rgba significa rojo verde azul y alfa (opacidad). Así, los 4 valores dentro del paréntesis indican la cantidad de rojo, verde, azul y su alfa (opacidad).
  .apilados fondo: # f6f6f6; borde: 1px sólido #bbb; altura: 300px; margen: 50px auto; posición: relativa; ancho: 400px; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); caja-sombra: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; -moz-border-radius: 3px; radio del borde: 3px; 
 Ahora que hemos creado el cuadro delimitador básico para el formulario, comencemos con el :después y :antes de pseudo-elementos. 
  .apilados: después, .stacked: antes de fondo: # f6f6f6; borde: 1px sólido #aaa; abajo: -8px; contenido: "; altura: 250px; izquierda: 2px; posición: absoluta; ancho: 394px; índice z: -10; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); - moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; - moz-border-radius: 3px; border-radius: 3px; .stacked: before bottom: -14px; left: 5px; width: 388px; -webkit-border-radius: 3px; -moz-border-radius: 3px ; borde-radio: 3px; -webkit-box-shadow: 0 0 15px rgba (0,0,0,0.5); -moz-box-shadow: 0 0 15px rgba (0,0,0,0.5); box -shadow: 0 0 15px rgba (0,0,0,0.5);
 El código para: después y antes de los pseudo-elementos es casi exactamente similar al del cuadro delimitador descrito anteriormente. Lo único importante a tener en cuenta aquí es que estos pseudo-elementos están posicionados absolutamente con respecto al cuadro delimitador. Cada uno de los pseudo-elementos se reduce progresivamente en unos pocos píxeles para darle un aspecto de papel apilado..
 4. Campos de entrada
 En el marcado HTML, hemos agregado una clase de 'entrada de texto' al campo de correo electrónico y al campo de contraseña para permitirnos apuntar fácilmente a estos elementos con nuestras declaraciones de CSS. Aquí está la declaración CSS que se aplica a ambos campos de entrada.
  formQueda-entrada esquema: 0; bloqueo de pantalla; ancho: 330px; relleno: 8px 15px; borde: 1px gris sólido; tamaño de fuente: 16px; peso de la fuente: 400; -webkit-border-radius: 25px; -moz-border-radius: 25px; radio del borde: 25px; box-shadow: recuadro 0 2px 8px rgba (0,0,0,0.3); 
 Aquí, de nuevo, hemos hecho uso de las declaraciones de radio de borde y sombra de cuadro. En el caso de los campos de texto, el radio del borde recibe un valor más alto para garantizar una mayor curvatura. En el caso de la declaración box-shadow, la inserción de palabras clave se ha utilizado para especificar que la sombra estará dentro del campo de texto. Aquí, el desplazamiento vertical para la sombra es 2px y tiene un desenfoque de 8px, el color se declara utilizando el formato rgba.
 Para agregar algo de interactividad a los campos de entrada, cambiaremos la propiedad box-shadow para el campo de entrada en el estado de 'desplazamiento'. La nueva declaración box-shadow tiene cero desplazamientos xey, pero tiene un desenfoque de 5px, con el color declarado en formato rgba.
 5. Botón de envío
 La parte final de este formulario que tenemos que completar es el botón enviar. De manera similar al campo de entrada, le daremos al botón de envío un radio de 25px usando la propiedad border-radius. También se ha agregado una propiedad box-shadow con un desplazamiento de y de 1px para darle al botón una “sombra interior” efecto.
  entrada de formulario [type = 'submit'] float: right; relleno: 10px 20px; bloqueo de pantalla; cursor: puntero; tamaño de fuente: 16px; peso de la fuente: 700; color: #fff; text-shadow: 0 1px 0 # 000; color de fondo: # 0074CC; borde: 1px sólido # 05C; -webkit-border-radius: 25px; -moz-border-radius: 25px; radio del borde: 25px; imagen de fondo: -moz-linear-gradient (arriba, # 08C, # 05C); imagen de fondo: -ms-linear-gradient (arriba, # 08C, # 05C); imagen de fondo: -webkit-linear-gradient (arriba, # 08C, # 05C); imagen de fondo: gradiente lineal (arriba, # 08C, # 05C); -webkit-box-shadow: recuadro 0 1px 0px rgba (255, 255, 255, 0.5); -moz-box-shadow: recuadro 0 1px 0px rgba (255, 255, 255, 0.5); box-shadow: recuadro 0 1px 0px rgba (255, 255, 255, 0.5); 
 Lo importante a tener en cuenta aquí es la declaración para agregar el gradiente a este botón. Los gradientes CSS3 son un tema bastante grande y solo estaremos rascando la superficie. Para este botón de envío, agregaremos un gradiente lineal desde # 08C hasta # 05C. Al igual que con todas las demás propiedades de CSS3 que hemos usado hasta ahora, agregaremos los prefijos de proveedores "-moz", "-webkit" y "-ms" para asegurarnos de que el gradiente funcione en diferentes navegadores.
 6. Demo y descarga
 Nuestro formulario de inicio de sesión ya está completo. Echa un vistazo a la demostración para ver cómo se ve el formulario completado. Si está perdido en algún momento o no pudo continuar con el tutorial, no se preocupe, simplemente descargue los archivos a su escritorio y juegue con el código CSS existente para entender cómo funciona..
 Espero que hayan disfrutado este tutorial. Siéntase libre de experimentar con estas características y no olvide compartir sus pensamientos..
 Manifestación
 Descargar archivos
 
Nota del editor: Esta publicación está escrita por Bharani M para Hongkiat.com. Bharani es un diseñador / desarrollador de Nueva Delhi, India. Actualmente está trabajando en Resumonk.com, un creador de currículums en línea que lo ayuda a crear un currículum profesional y hermoso en minutos. También puedes ver su proyecto paralelo: Quotescube.com - tu dosis diaria de citas.