Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Crea rápidamente un elegante formulario de inicio de sesión

by
Read Time:9 minsLanguages:
This post is part of a series called Bringing Premium Pixels to Life.
Powering Orman's Image Slider Controls With Nivo
Quick Tip: Create a Rating System With CSS, Web fonts and Sprites

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

Hoy vamos a codificar el elegante formulario de inicio de sesión de Orman Clark utilizando CSS3 y HTML5, además de algunas de las animaciones CSS de Dan Eden para embellecer la experiencia.

Este tutorial asume que tienes cierto conocimiento de HTML/CSS; vamos a movernos bastante rápido. ¡Hagámoslo!


Paso 1: El marcado HTML

Comenzamos vinculando a nuestras hojas de estilo dentro del encabezado de nuestro documento. Tenemos una hoja de estilo de reinicio para que todo vuelva a cero, el animate.css de Dan Eden que usaremos para una animación divertida más adelante, y nuestro propio styles.css donde llevaremos la mayor parte de nuestro trabajo.

La carne del HTML comprende un contenedor, un formulario y algunas entradas.


Paso 3: Posicionando los elementos

Ahora que hemos escrito nuestro marcado HTML, podemos pasar al CSS. Primero especificaremos lo básico, colocando nuestro elemento contenedor en el centro de la página.

Ahora agregaremos un estilo estructural a las entradas y otros elementos:


Paso 4: Aplicar estilos a los elementos

Los elementos están perfectamente posicionados. ¡Ahora es el momento de hacerlos lucir hermosos! Primero, diseñaremos el contenedor dándole esquinas sutilmente redondeadas y una sombra de caja para darle profundidad.

Luego, los 'inputs' reciben un tratamiento similar, con algunos bordes redondeados (border-radius) y sombras de caja. Le daremos al botón de envío un fondo degradado, con un background-color sólido para que se adapte a IE9 y versiones anteriores. Observa que estamos apuntando a cada input individualmente con selectores de atributos CSS.

A continuación, para ayudar a los comentarios de los usuarios, nos vendría bien algunos estados activos (active) y de desplazamiento (hover):


Paso 5: Toques finales

Nuestro formulario de inicio de sesión se ve bien, pero empujemos el barco y agreguemos a la experiencia. Ahora vamos a agregar algunas animaciones CSS y transiciones para pulirlo. Ya hemos hecho referencia al animate.css de Dan Eden en nuestra cabecera; ahora podemos hacer uso de sus tipos de animación predefinidos, como bounceIn, junto con los prefijos de navegador adecuados.

Primero, la animación del contenedor:

A continuación, transiciones para los elementos interactivos:


Paso 6: Código final

¡Terminamos! A continuación, encontrarás el código final para nuestro formulario de inicio de sesión elegante, que debería proporcionarte algo muy similar a esto:

HTML:

CSS:


Conclusión

Espero que hayan disfrutado seguir mientras creamos algo que no solo se ve bien, sino que funciona a la perfección y tiene ese pequeño 'algo' adicional. ¡Gracias por leer!

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.