Página «Coming Soon» minimalista en HTML5 y CSS3

En este tutorial vamos a crear una página de «Próximamente en linea», o «En construcción» (conocidas en inglés como «Coming Soon»), usando HTML5 y CSS3 con un estilo minimalista y colores ligeros. Para esta página vamos a usar una diseñada previamente en photoshop.

 

Página Coming Soon minimalista en HTML5 y CSS3
Página Coming Soon minimalista en HTML5 y CSS3

 

VER DEMO DE ESTE TUTORIAL: https://www.johnwmartinez.com/blog/demos/pagina-en-construccion/

Como puedes observar, la página contiene algunas sombras y degradados. Estos efectos fueron creados usando únicamente CSS3. Por si no lo sabías (muchos en Cristalab seguramente ya lo saben por otros totorales), CSS3 provee de varias propiedades nuevas que nos permiten crear efectos llamativos y agradables sin la necesidad de usar imágenes.

En este tutorial vamos a explorar nuevas etiquetas de HTML presentes en la versión 5 (y de como hacerlas funcionar en Internet Explorer 7 y 8, aunque a estas alturas estos navegadores cada vez pierden más participación del mercado) y de nuevos atributos para el formulario como el «Placeholder» y el «required». El atributo «placeholder» nos permite introducir un texto por defecto en las cajas de comentarios o cajas de texto de un formulario cuando estas se encuentran vacías (es así como una vez se introduzca texto en ellas, este texto por defecto desaparecerá). Así mismo, el atributo «required» que se introduce en los campos que se deseen de un formulario, impide que este sea enviado si la etiqueta no cumple con su función (por ejemplo, un campo de tipo mail no permite enviar a menos que tenga el esquema [email protected]). Sin embargo, en este ejemplo vamos a tener atributos Jquery en caso que estemos en un navegador viejo que no soporte estos atributos, no se afecte el funcionamiento. Continúa leyendo Página «Coming Soon» minimalista en HTML5 y CSS3