Construye rápidamente una página Swish Teaser con CSS3

En este tutorial, aprenderá cómo crear una página de prueba usando solo CSS, sin imágenes o incluso un diseño de Photoshop. Muchos sitios web y aplicaciones próximas obtienen gran publicidad de las páginas de prueba, por lo que este es un concepto útil para agregar a su conjunto de herramientas. Úselo para cualquier aplicación o sitio web que esté listo para iniciarse.

Paso 1: El marcado HTML

El HTML para la página teaser es bastante simple. Solo tenemos un contenedor con nuestro texto introductorio y entradas.

      La aplicación viene pronto.            Aplicación.
  Esta sorprendente aplicación cambiará tu vida. Suscríbete para ser notificado cuando esté disponible, o síguenos en Twitter.

Paso 2: Posicionando y dimensionando nuestros elementos

Vamos a darle a nuestra página algo de estructura. Comenzamos con lo básico y colocamos el contenedor en el centro de la página. Usaremos una posición del 50%, luego márgenes negativos para devolver al objeto la mitad de su anchura y altura..

 html, cuerpo ancho: 100%; altura: 100%; Familia tipográfica: "Helvetica Neue", Helvetica, sans-serif; color: # 444; -webkit-font-smoothing: suavizado;  #container position: fixed; ancho: 500px; altura: 300px; superior: 50%; izquierda: 50%; margen superior: -150px; margen izquierdo: -250px; text-align: center;

A continuación, colocamos el texto y las entradas, utilizando selectores de atributos para dirigir el correo electrónico y enviar las entradas por separado..

 h1 font-size: 90px;  p ancho: 80%; tamaño de fuente: 23px; línea de altura: 1.3em; margen: 1.1em auto; text-align: center;  # suscribirse margen: 0 auto; text-align: center;  entrada [tipo = correo electrónico] ancho: 90%; relleno: 15px; margen: 0 auto;  entrada [tipo = enviar] posición: absoluta; margen izquierdo: -105px; margen superior: 5px; relleno: 10px; ancho: 100px; altura: 50px;

Paso 3: Estilizando el texto

El estilo del texto para esta página es bastante simple. Queremos que el nombre contraste con el fondo, así que lo haremos blanco. El texto es importante, pero queremos que los visitantes recuerden el nombre de nuestro producto, por lo que no lo haremos como se pronuncia. El enlace de Twitter está subrayado, lo que indica que es un enlace.

Primero, el texto principal:

 h1 font-size: 90px; font-weight: negrita; color: #fff; text-shadow: 0 1px 4px # 000; margen superior: 20px;  p ancho: 80%; tamaño de fuente: 23px; línea de altura: 1.3em; color: #fff; margen: 1.1em auto; text-align: center; text-shadow: 0 0 2px rgba (0, 0, 0, 0.9);

Luego el enlace de Twitter:

 p a color: #fff; borde inferior: 2 píxeles sólidos # 2da1ec;

Paso 4: Estilizando el fondo

Ahora, para la parte divertida: dar a los objetos en nuestra página un extra je ne sais quoi. Comenzaremos creando un bonito fondo degradado. Si eres un usuario de Mac, puedes apoyarte en GradientApp para hacer el trabajo duro por ti. Alternativamente, dirígete a CSS3 ¡Por favor! para tener una idea de la sintaxis.

 html, cuerpo ancho: 100%; altura: 100%; Familia tipográfica: "Helvetica Neue", Helvetica, sans-serif; color: # 444; -webkit-font-smoothing: suavizado; fondo: # 000222; fondo: -moz-lineal-gradiente (arriba, # 000222 0%, # 4b637c 100%); fondo: -webkit-gradiente (lineal, superior izquierdo, inferior izquierdo, límite de color (0%, # 000222), límite de color (100%, # 4b637c)); fondo: -webkit-linear-gradient (arriba, # 000222 0%, # 4b637c 100%); fondo: -o-lineal-gradiente (arriba, # 000222 0%, # 4b637c 100%); fondo: -ms-lineal-gradiente (arriba, # 000222 0%, # 4b637c 100%); fondo: gradiente lineal (arriba, # 000222 0%, # 4b637c 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 000222", endColorstr = "# 4b637c", GradientType = 0);

Paso 5: Diseño del formulario de suscripción

El formulario de suscripción es el centro de nuestra página, ya que queremos que los visitantes se enteren cuando se lance nuestro increíble producto. Queremos que sea el foco de la página, después del nombre o logotipo..

Comenzamos diseñando el marcador de posición (estilos específicos de Mozilla y Webkit) y configurando un tamaño de fuente:

 :: - webkit-input-placeholder color: rgba (255, 255, 255, 0.4);  :: - moz-input-placeholder color: rgba (255, 255, 255, 0.4);  input font-family: "Helvetica Neue", Helvetica, sans-serif; tamaño de fuente: 25px;

Ahora vamos a darle al campo y al botón algo de color y profundidad:

 ingrese [tipo = correo electrónico] esquema: ninguno; ancho: 90%; relleno: 15px; margen: 0 auto; color: #fff; frontera: ninguna; -webkit-border-radius: 6px; -moz-border-radius: 6px; radio del borde: 6px; fondo: rgba (0, 0, 0, 0,3); -webkit-box-shadow: recuadro 0 0 5px rgba (0, 0, 0, 0.9); -moz-box-shadow: recuadro 0 0 5px rgba (0, 0, 0, 0.9); -o-box-shadow: recuadro 0 0 5px rgba (0, 0, 0, 0.9); caja-sombra: recuadro 0 0 5px rgba (0, 0, 0, 0.9);  entrada [tipo = enviar] posición: absoluta; margen izquierdo: -105px; margen superior: 5px; tamaño de fuente: 25px; color: # 222; text-shadow: 0 1px 0 #fff; relleno: 10px; ancho: 100px; altura: 50px; frontera: ninguna; fondo: # f0f0f0; fondo: -moz-lineal-gradiente (arriba, # f0f0f0 0%, # c3d7ff 100%); fondo: -webkit-gradiente (lineal, superior izquierda, inferior izquierda, límite de color (0%, # f0f0f0), límite de color (100%, # c3d7ff)); fondo: -webkit-linear-gradient (arriba, # f0f0f0 0%, # c3d7ff 100%); fondo: -o-lineal-gradiente (arriba, # f0f0f0 0%, # c3d7ff 100%); fondo: -ms-lineal-gradiente (arriba, # f0f0f0 0%, # c3d7ff 100%); fondo: gradiente lineal (arriba, # f0f0f0 0%, # c3d7ff 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f0f0f0", endColorstr = "# c3d7ff", GradientType = 0); -webkit-box-shadow: 0 0 5px rgba (0, 0, 0, 1), recuadro 0 1px 0 rgba (255, 255, 255, 0.3); -moz-box-shadow: 0 0 5px rgba (0, 0, 0, 1), recuadro 0 1px 0 rgba (255, 255, 255, 0.3); -o-box-shadow: 0 0 5px rgba (0, 0, 0, 1), recuadro 0 1px 0 rgba (255, 255, 255, 0.3); caja-sombra: 0 0 5px rgba (0, 0, 0, 1), recuadro 0 1px 0 rgba (255, 255, 255, 0.3); -webkit-border-radius: 3px; -moz-border-radius: 3px; radio del borde: 3px; cursor: puntero;

Paso 6: Agregando Transiciones CSS

Agreguemos algunas transiciones CSS agradables para ayudar a captar la atención de los visitantes.

Primero, agregaremos los estados activo y activo al enlace y las entradas de Twitter:

 p a color: #fff; borde inferior: 2 píxeles sólidos # 2da1ec;  p a: hover color: # 2da1ec; borde inferior: 2px sólido #fff;

 ingrese [tipo = correo electrónico] esquema: ninguno; ancho: 90%; relleno: 15px; margen: 0 auto; color: #fff; frontera: ninguna; -webkit-border-radius: 6px; -moz-border-radius: 6px; radio del borde: 6px; fondo: rgba (0, 0, 0, 0,3); -webkit-box-shadow: recuadro 0 0 5px rgba (0, 0, 0, 0.9); -moz-box-shadow: recuadro 0 0 5px rgba (0, 0, 0, 0.9); -o-box-shadow: recuadro 0 0 5px rgba (0, 0, 0, 0.9); caja-sombra: recuadro 0 0 5px rgba (0, 0, 0, 0.9);  entrada [type = email]: hover background: rgba (0, 0, 0, 0.5);  entrada [tipo = correo electrónico]: foco -webkit-box-shadow: inserción 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0.2); -moz-box-shadow: recuadro 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0.2); -o-box-shadow: recuadro 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0.2); caja-sombra: recuadro 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0.2); fondo: rgba (0, 0, 0, 0.6);  entrada [tipo = enviar] posición: absoluta; margen izquierdo: -105px; margen superior: 5px; tamaño de fuente: 25px; color: # 222; text-shadow: 0 1px 0 #fff; relleno: 10px; ancho: 100px; altura: 50px; frontera: ninguna; fondo: # f0f0f0; fondo: -moz-lineal-gradiente (arriba, # f0f0f0 0%, # c3d7ff 100%); fondo: -webkit-gradiente (lineal, superior izquierda, inferior izquierda, límite de color (0%, # f0f0f0), límite de color (100%, # c3d7ff)); fondo: -webkit-linear-gradient (arriba, # f0f0f0 0%, # c3d7ff 100%); fondo: -o-lineal-gradiente (arriba, # f0f0f0 0%, # c3d7ff 100%); fondo: -ms-lineal-gradiente (arriba, # f0f0f0 0%, # c3d7ff 100%); fondo: gradiente lineal (arriba, # f0f0f0 0%, # c3d7ff 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f0f0f0", endColorstr = "# c3d7ff", GradientType = 0); -webkit-box-shadow: 0 0 5px rgba (0, 0, 0, 1), recuadro 0 1px 0 rgba (255, 255, 255, 0.3); -moz-box-shadow: 0 0 5px rgba (0, 0, 0, 1), recuadro 0 1px 0 rgba (255, 255, 255, 0.3); -o-box-shadow: 0 0 5px rgba (0, 0, 0, 1), recuadro 0 1px 0 rgba (255, 255, 255, 0.3); caja-sombra: 0 0 5px rgba (0, 0, 0, 1), recuadro 0 1px 0 rgba (255, 255, 255, 0.3); -webkit-border-radius: 3px; -moz-border-radius: 3px; radio del borde: 3px; cursor: puntero;  entrada [type = submit]: hover -webkit-box-shadow: 0 0 10px rgba (0, 0, 0, 0.9); -moz-box-shadow: 0 0 10px rgba (0, 0, 0, 0.9); -o-box-shadow: 0 0 10px rgba (0, 0, 0, 0.9); caja-sombra: 0 0 10px rgba (0, 0, 0, 0.9); ancho: 125px; margen izquierdo: -130px;  entrada [type = submit]: active background: # c3d7ff; fondo: -moz-lineal-gradiente (arriba, # c3d7ff 0%, # f0f0f0 100%); fondo: -webkit-gradiente (lineal, superior izquierdo, inferior izquierdo, límite de color (0%, # c3d7ff), límite de color (100%, # f0f0f0)); fondo: -webkit-linear-gradient (arriba, # c3d7ff 0%, # f0f0f0 100%); fondo: -o-lineal-gradiente (arriba, # c3d7ff 0%, # f0f0f0 100%); fondo: -ms-lineal-gradiente (arriba, # c3d7ff 0%, # f0f0f0 100%); fondo: gradiente lineal (arriba, # c3d7ff 0%, # f0f0f0 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# c3d7ff", endColorstr = "# f0f0f0", GradientType = 0);

Luego agregamos las reglas de transición:

 p a color: #fff; borde inferior: 2 píxeles sólidos # 2da1ec; -webkit-transición: toda la facilidad de .4s; -moz-transición: toda la facilidad de .4s; -o-transición: toda la facilidad .4s; transición: todo .4s facilidad;

 entrada font-family: "Helvetica Neue", Helvetica, sans-serif; tamaño de fuente: 25px; -webkit-transición: toda la facilidad de .4s; -moz-transición: toda la facilidad de .4s; -o-transición: toda la facilidad .4s; transición: todo .4s facilidad;

Paso 7: Animaciones CSS

También podemos agregar algunas animaciones CSS3 agradables para un efecto agregado cuando se carga la página. Es recomendable utilizar animaciones CSS como un complemento a su diseño; No es una parte integral de ella. El soporte para animaciones es todavía escaso y debe tener cuidado de no complicar demasiado su diseño por el bien de él..

Dicho esto, Animate.css de Dan Eden es una biblioteca de animación CSS realmente útil. Puede agregarlo como se muestra en el documento original al comienzo del tutorial, o importarlo a su hoja de estilo, si lo prefiere:

 @import url (animate.css);

Hay una variedad de bellas animaciones para elegir, pero voy a agregar el rebotar en el interior animación. Lo aplicamos a nuestro elemento (en este caso el contenedor) así:

 #contenedor posición: fijo; ancho: 500px; altura: 300px; superior: 50%; izquierda: 50%; margen superior: -150px; margen izquierdo: -250px; text-align: center; -webkit-animation-name: bounceInDown; -webkit-animation-fill-mode: ambos; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: lineal; -moz-nombre-animación: bounceInDown; -moz-animation-fill-mode: ambos; -moz-animación-duración: 1.5s; -moz-animación-iteración-cuenta: 1; -mez-animación-tiempo-función: lineal; Nombre de la animación: bounceInDown; modo de relleno de animación: ambos; animación-duración: 1.5s; animación-iteración-cuenta: 1; animación-temporización-función: lineal;

Si desea cambiar la animación, simplemente cambie la -nombre de la animación al nombre de la animación que te gustaría.

Paso 8: Llevando las cosas más lejos

Este no es un diseño sensible, ni mucho menos, pero es posible que desee agregar un par de consultas de medios al final de su css para atender a dispositivos más pequeños. Piense en hacer el elemento contenedor más estrecho para pantallas más pequeñas y alterar el ancho o la posición de las entradas.

Para permitir que nuestro formulario de registro agregue direcciones de correo electrónico a una lista, podríamos hacerlo conectándolo a un servicio de boletín de correo electrónico, como MailChimp. No voy a explicar esto en detalle, ya que este artículo lo demuestra perfectamente..

Si desea agregar validación al formulario, puede consultar este tutorial..

Conclusión

La creación de una página rápida como esta es vital para la publicidad antes del lanzamiento de un sitio web o producto. No tiene que ser complejo, como muestra esta solución CSS pura..

Espero que hayas aprendido algo de este tutorial, gracias por leer.!

Diseño web