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

Crea rápidamente una página web de lanzamiento con CSS3

by
Read Time:8 minsLanguages:

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

En este tutorial, aprenderás a crear una página de lanzamiento usando solo CSS, sin imágenes o ni siquiera un diseño de Photoshop. Muchos sitios web y aplicaciones futuras obtienen una gran publicidad a través de las páginas de lanzamiento, por lo que este es un concepto útil para agregar a tu kit de herramientas. Úsalo para cualquier aplicación o sitio web que esté listo para lanzarse.


Paso 1: El marcado HTML

El HTML de la página de lanzamiento es bastante simple. Solo tenemos un contenedor con nuestro texto introductorio y unos campos de entrada.


Paso 2: Posicionar y dimensionar nuestros elementos

Démosle a nuestra página algo de estructura. Comenzaremos con lo básico así que coloquemos el contenedor en el centro de la página. Usaremos un posicionamiento del 50%, luego márgenes negativos para devolver el objeto a la mitad de su ancho y alto.

A continuación, colocamos el texto y los campos de entrada de texto, utilizando selectores de atributos para elegir el diseño para el texto del correo electrónico, el botón de enviar y las otras entradas de texto de manera separada.


Paso 3: Aplicando estilos al texto

Diseñar el texto de esta página es bastante sencillo. 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 tan pronunciado. El enlace de Twitter está subrayado, lo que indica que es un enlace.

Primero, el texto principal:

Luego el enlace de Twitter:


Paso 4: Aplicando estilos al fondo

Ahora, la parte divertida: dar a los objetos de nuestra página ese no se qué extra. Empezaremos creando un bonito fondo degradado. Si eres usuario de Mac, puedes apoyarte en GradientApp para que haga el trabajo duro por ti. Alternativamente, ve a CSS3 Please! para tener una idea de la sintaxis.


Paso 5: Aplicando estilos al formulario de suscripción

El formulario de suscripción es el foco de nuestra página, ya que queremos que los visitantes sepan cuándo se lanza nuestro increíble producto. Queremos que sea el foco de la página, después del nombre o logo.

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

Ahora démosle al campo y al botón algo de color y profundidad:

Paso 6: Agregando transiciones CSS

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

Primero, agregaremos estados activos y de desplazamiento al enlace de Twitter y a las entradas de texto:

Luego agregamos las reglas de transición:

y


Paso 7: Animaciones CSS

También podemos agregar algunas animaciones CSS3 agradables para un efecto adicional cuando se carga la página. Es recomendable utilizar animaciones CSS como complemento a tu diseño; no es una parte integral de ella. El soporte para animaciones aún es escaso y debes tener cuidado de no complicar demasiado tu diseño por el simple hecho de hacerlo.

Dicho esto, Animate.css de Dan Eden es una biblioteca de animación CSS realmente útil. Puedes agregarla como se muestra en el documento original al comienzo del tutorial, o importarla a tu hoja de estilos, si así lo prefieres:

Hay una variedad de hermosas animaciones para elegir, pero voy a agregar la animación bounceInDown. Lo aplicamos a nuestro elemento (en este caso al contenedor) de la siguiente manera:

Si deseas cambiar la animación, simplemente cambia el -animation-name por el nombre de la animación que deseas.


Paso 8: Llevando las cosas un poco más allá

Este no es un diseño adaptable a cualquier pantalla, ni mucho menos, pero es posible que desees agregar un par de 'media queries' al final de tu css para que se pueda ver en dispositivos más pequeños. Piensa en hacer que el elemento 'container' sea más estrecho para pantallas más pequeñas y en alterar el ancho o la posición de las entradas de texto.


Para permitir que nuestro formulario de registro agregue direcciones de correo electrónico a una lista, podríamos conectarlo 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 a la perfección.

Si deseas agregar validaciones al formulario, puedes consultar este tutorial.


Conclusión

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

Espero que hayas aprendido algo de este tutorial, ¡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.