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.
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.
1. Estructura de archivos.
Vamos a crear una nueva carpeta y la vamos a llamar «coming-soon-page» (o el nombre que tú desees). Dentro de esta carpeta, vamos a tener los siguientes archivos y subdirectorios:
– index.html (nuestro archivo principal)
– css (la carpeta donde estarán los archivos de estilos cascada)
– style.css (nuestro archivo de estilos principal)
– reset.css (El archivo que se encarga de borrar todas las características por defecto de las etiquetas)
– ie.css (el archivo de estilos para internet explorer 7 y 8)
– js (carpeta donde estarán contenidos todos los archivos de javascript)
– jquery.countdown.js (es el plugin de jQuery con el que haremos la cuenta regresiva)
– script.js (este será el archivo javascript que tendrá el inicializador de la cuenta regresiva, algunas funciones de animación y la solución para «required» y «placeholder» en los navegadores antiguos).
– modernizr.custom.js (librería en javascript que nos permitirá detectar si el explorador soporta «required» y «placeholder»).- images (carpeta donde estarán las imágenes) -> Si, que descubrimiento, el agua moja ¬¬- fonts (en esta carpeta tendremos la fuente que se usará en el contador)
2. Estructura de la página índex.html
Este será el código de la estructura principal:
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″ />
<title>Página minimalista de ‘En construcción'</title>
<!– CSS –>
<link rel=»stylesheet» href=»css/reset.css»>
<link rel=»stylesheet» href=»fonts/stylesheet.css»>
<link rel=»stylesheet» href=»css/style.css»>
<!–[if lt IE 9]>
<link rel=»stylesheet» href=»css/ie.css»>
<![endif]–>
<!– IE fix for HTML5 tags –>
<!–[if lt IE 9]>
<script src=»http://html5shiv.googlecode.com/svn/trunk/html5.js»></script>
<![endif]–>
<!– jQuery and Modernizr–>
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script src=»js/modernizr.custom.js»></script>
<!– Countdown timer and other animations –>
<script src=»js/jquery.countdown.js»></script>
<script src=»js/script.js»></script>
</head>
<body>
<header>
<!– El título y la descripción de nuestro sitio –>
</header>
<div id=»main»>
<div id=»links»>
<!– Los links principal, de soporte, descargas, etc. –>
</div>
<div id=»counter»>
<!– La cuenta regresiva (el contador) –>
</div>
<form action=»» method=»get»>
<!– El formulario de suscripción –>
</form>
<div>
<!– La flechita de social media al lado derecho del monitor –>
</div>
<footer>
<!– El pie de página que tendrá los íconos de las redes sociales –>
</footer>
</div>
</body>
</html>
Como podemos observar, el código HTML es muy sencillo y se explica él mismo. En la etiqueta «head» importamos todos los archivos CSS y Javascript que necesitamos. También están los comentarios condicionales (en caso de estar en exploradores de la segunda guerra mundial como Explorer 7 y 8) y una nota adicional: el archivo html5.js contenido en los servidores de Google Code que nos permitirá que cualquier explorador interprete las etiquetas footer y header.
El cuerpo de nuestra página también es sencillo de comprender. Está la etiqueta «header» donde estará la linea principal o título de nuestra página y su descripción. Y la etiqueta div principal (main) donde estarán la cuenta regresiva, los links de las redes sociales, el formulario de suscripción y el pie de página.
Respecto a la configuración del cuerpo es simple: tendrá su etiqueta de cabecera donde estará la descripción, el contador y el formulario de suscripción.
Luego sigue el estilo que vamos a usar para la fuente y la imagen de fondo de la página (es decir, la configuración de los estilos principales). El código es el siguiente:
body {
background: url(../images/body-pattern.jpg) top left repeat;
font-family: Arial, Helvetica, sans-serif;
padding-bottom: 40px;
}
3. Cabezote (o cabecera, o Header, o parte superior, como lo quieras llamar).
Como ya lo habíamos mencionado, el cabezote de nuestra página tendrá el título y la descripción de la página.
<header>
<h1>Estamos trabajando para tener listo el sitio web pronto.</h1>
<p>Nuestro desarrollador inmaculado John W. Martinez, está haciendo su mayor esfuerzo para finalizar el sitio web antes que este conteo termine. Favor, tenedle paciencia. (Es mentira lo de inmaculado, lo tenemos amarrado a una mazmorra y lo azotamos para que trabaje 20 horas al día).</p>
</header>
Y este es el respectivo código CSS:
/* —- Header —- */ header {
width: 720px;
margin: 80px auto 0 auto;}
header h1 {
font-size: 30px;
font-weight: bold;
color: #272727;
text-shadow: 0 1px 0 #fff;
}
header p {
margin: 20px 0 0 3px;
font-size: 14px;
color: #272727;
}
(interrupción momentánea: recuerde que tanto en la parte inferior como en la superior hay un link de «Ver demo» y allí podrá descargar los archivos en Zip. Este tutorial no es para que lo haga paso a paso sino para que lo aprenda paso a paso. Continuemos… )
4. El área principal.
El área principal de la página contiene el div «main» que lo pudimos observar en el código anterior. Esta área contendrá los links, la cuenta regresiva (contador), el formulario de suscripción, el pie de página y la flecha de «social media». A continuación el estilo CSS de esta área:
/* —- Main Area —- */ #main {
position: relative;
width: 700px;
margin: 50px auto 0 auto;
padding: 20px 0 0 25px;
background: url(../images/main-content-pattern.jpg) top left repeat;
}
5. Los enlaces (links).
A continuación el código de nuestros links:
<div id=»links»>
<div><a href=»»>http://1stwebdesigner.com/</a></div>
<div><a href=»»>http://support.1wd.com/</a></div>
<div><a href=»»>Google Chrome OS. 10.X.23</a></div>
<div><a href=»»>http://1wd.co/e-books/</a></div>
<div><a href=»»>http://1wd.com/download/</a></div>
<div><a href=»»>UPS Signed Worldwide</a></div>
</div>
Nada del otro mundo, simplemente un listado sencillo para cada uno de los links.
NOTA: Otra forma de hacerlo sería con listas (<ul><li>Link!</li></ul>), pero eso será caso de otro tutorial.
Y el código CSS de estos links es:
/* —- Links —- */#links {
width: 700px;
font-size: 12px;
font-weight: bold;
color: #aaa;
line-height: 18px;
overflow: hidden;
}
#links a {
position: relative;
color: #aaa;
text-decoration: none;
}
#links a:hover {
color: #aaa;
text-decoration: none;
}
.home, .support, .browser, .books, .download, .ups {
float: left;
width: 180px;
margin-left: 42px;
padding-left: 25px;
}
.home { background: url(../images/home.png) left center no-repeat; margin-left: 0; }
.support { background: url(../images/support.png) left center no-repeat; }
.browser { background: url(../images/browser.png) left center no-repeat; clear: right; }
.books, .download, .ups { margin-top: 10px; }
.books { background: url(../images/books.png) left center no-repeat; margin-left: 0; }
.download { background: url(../images/download.png) left center no-repeat; }
.ups { background: url(../images/ups.png) left center no-repeat; clear: right; }
El área de enlaces tiene un ancho de 700px y cada enlace tiene su propio ícono. Luego aplicamos un pequeño espacio con márgenes y relleno (margins y paddings) y por último le agregamos una pequeña animación usando jQuery (que recuerden, se pronuncia «yeicueri»).
6. La cuenta regresiva (El contador).
Para esta función vamos a usar un plugin en jQuery que se llama «jQuery countdown plugin» (o mejor no lo descargue, va incluido en el paquete de este tutorial). El contador estará introduciéndose en la etiqueta de id «counter».
<div id=»counter»></div>
La etiqueta div con «id» counter estará vacía porque el código en html será generado por el plugin de jQuery. A continuación presentamos el código que el plugin genera:
<div id=»counter»>
<div>
<span>
<span>0</span>
</span>
<span
<span>0</span>
</span>
<span>
<span>DAYS</span>
</span>
</div>
<span>:</span>
<span></span>
<div>
<span>
<span>0</span>
</span>
<span>
<span>0</span>
</span>
<span>
<span>HRS</span>
</span>
</div>
<span>:</span>
<span></span>
<div>
<span>
<span>0</span>
</span>
<span>
<span>0</span>
</span>
<span>
<span>MNTS</span>
</span>
</div>
<span>:</span>
<span></span>
<div>
<span>
<span>0</span>
</span>
<span>
<span>0</span>
</span>
<span>
<span>SECS</span>
</span>
</div>
</div>
Dependiendo del tiempo que nosotros instalemos cuando implementemos el contador, el mostrará los números correspondientes a las cuatro casillas (días, horas, minutos y segundos).
Atención: no explicaré la función del plugin en este tutorial. Sin embargo, Martín Angelov creador del susodicho, lo explica a la perfección. Puedes leer dicha explicación aquí: http://tutorialzine.com/2011/12/countdown-jquery/ (puede que en un futuro me dedique a traducirlo para ustedes, no sé, prendan las velitas a sus santos a ver si se hace el milagrito).
Ahora, a continuación colocamos el código CSS de nuestro contador:
/* —- Counter —- */
#counter {
width: 700px;
height: 145px;
margin: 55px auto 0 auto;
font-family: ‘LeagueGothicRegular’, Arial, Helvetica, sans-serif;
font-size: 92px;
color: #272727;
text-shadow: 0 1px 0 #fff;
overflow: hidden;
}
.countDays, .countHours, .countMinutes, .countSeconds {
float: left;
width: 102px;
height: 138px;
padding-left: 36px;
background: #e7e7e7;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.07)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
background-image: -o-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
border: 1px solid #ccc;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow:
0 2px 3px 0 rgba(255,255,255,.2) inset,
0 2px 2px 0 rgba(0,0,0,.1);
-webkit-box-shadow:
0 2px 3px 0 rgba(255,255,255,.2) inset,
0 2px 2px 0 rgba(0,0,0,.1);
box-shadow:
0 2px 3px 0 rgba(255,255,255,.2) inset,
0 2px 2px 0 rgba(0,0,0,.1);
}
.points {
float: left;
width: 40px;
margin: 0;
font-family: Georgia, serif;
font-size: 44px;
font-weight: bold;
text-align: center;
line-height: 138px;
text-shadow: none;
}
.position {
position: relative;
float: left;
width: 35px;
height: 92px;
margin: 8px 0 0 0;
}
.digit {
position: absolute;
top: 0;
left: 0;
}
.boxName {
float: left;
width: 80px;
margin: -5px 0 0 7px;
font-size: 36px;
color: #a6a6a6;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.Hours { margin-left: 5px; }
.Seconds { margin-left: 2px; }
Para el contador hemos usado la fuente «League Gothic» que puedes encontrar en los archivos fuentes que acompañan este tutorial. Si deseas usar esta fuente en tus diseños, la puedes descargar de aquí: http://www.fontsquirrel.com/fonts/League-Gothic/
Como podemos observar en el anterior código, los degradados y las sombras las hemos realizado únicamente con las propiedades de CSS3. Estas nuevas propiedades de CSS3 permiten crear diseños complejos sin la necesidad de imágenes recortadas o sectorisadas, permitiendo que la página tome mucho menos tiempo de carga.
Las propiedades de CSS3 usadas fueron «border-radius», «box-shadow», «linear gradient», y «text-shadow». Son fácilmente entendibles en el momento que se lee su nombre.
Luego usamos el atributo «rgba» para asignar el color, y este ajuste es bastante útil porque no solo el color por canales, sino también la transparencia del contenedor se puede manejar. Ahora, vamos a iniciar la cuenta regresiva incluyendo las siguientes lineas en el archivo «script.js» (que está dentro de la carpeta js).
$(document).ready(function(){
/* —- Countdown timer —- */
$(‘#counter’).countdown({
timestamp : (new Date()).getTime() + 51*24*60*60*1000
});
});
El contador mostrará el tiempo que queda para dentro de 51 días desde ahora.
7. Formulario de inscripción (o suscripción).
Para este formulario hemos usado dos nuevos atributos de HTML5: «placeholder» y «required». Este es el código:
<form action=»» method=»get»>
<input type=»text» placeholder=»Escriba su e-mail en este campo» required />
<input type=»submit» value=»Mantenerme al tanto» />
</form>
Tenemos un campo de texto que sirve para recoger el correo electrónico y un botón para enviar. El campo de correo electrónico deberá estar diligenciado antes de enviar el formulario, de lo contrario la página no lo dejará proseguir. A continuación veremos el código en CSS:
/* —- Subscription Form —- */ form {
position: relative;
margin: 40px auto 0 auto;
}.email {
width: 498px;
height: 35px;
padding: 0 15px;
background: #f1f1f1;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.02)), to(rgba(0,0,0,.02)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
background-image: -o-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
background-image: linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
border: 1px solid #cbcbcb;
-moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
-webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #b3b2b2;
font-style: italic;}.email:focus {
outline: 0;
border: 1px solid #c0c0c0;
-moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset; -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
}.submit {
width: 140px;
height: 37px;
margin: 0 0 0 5px;
padding: 0;
background: #888;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.1)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: -o-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
border: 1px solid #636363;
-moz-box-shadow:
0 1px 2px 0 rgba(253,252,252,.35) inset,
0 -1px 2px 0 rgba(0,0,0,.15) inset;
-webkit-box-shadow:
0 1px 2px 0 rgba(253,252,252,.35) inset,
0 -1px 2px 0 rgba(0,0,0,.15) inset;
box-shadow:
0 1px 2px 0 rgba(253,252,252,.35) inset,
0 -1px 2px 0 rgba(0,0,0,.15) inset;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.35);
line-height: 13px;
cursor: pointer;
}
.submit:hover {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.1)));
background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: -moz-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: -ms-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: -o-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;
-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;
}
.submit:active {
-moz-box-shadow:
0 1px 2px 0 rgba(0,0,0,.15) inset,
0 3px 13px 3px rgba(0,0,0,.3) inset;
-webkit-box-shadow:
0 1px 2px 0 rgba(0,0,0,.15) inset,
0 3px 13px 3px rgba(0,0,0,.3) inset;
box-shadow:
0 1px 2px 0 rgba(0,0,0,.15) inset,
0 3px 13px 3px rgba(0,0,0,.3) inset;
color: #ddd;
}
Hemos usado las seudo-classes :hover, :focus y :active para cambiar los estilos del campo del formulario y el botón de enviar. También hemos usado CSS3 que usamos anteriormente en el contador.
Ahora, hay que destacar algo: los atributos «required» y «placeholder» no están soportados en navegadores salidos en la revolución industrial (Como IE7) u otros salidos junto con la música disco (como IE8). Así que para esto, solucionaremos el problema con la librería Modernizr, que nos permitirá saber si soporte o no esa etiqueta. Así que necesitamos chequear si soporta o no estas funciones y si encontramos que no lo soporta, entonces tendremos que usar jQuery para dar una solución.
Una vez hayas incluído la librería Modernizr en la página, inserta el siguiente código:
/* —- Using Modernizr to check if the «required» and «placeholder» attributes are supported —- */
if (!Modernizr.input.placeholder) {
$(‘.email’).val(‘Input your e-mail address here…’);
$(‘.email’).focus(function() {
if($(this).val() == ‘Input your e-mail address here…’) {
$(this).val(»);
}
});
}// Esto es para detectar si el explorador es Safari (que no soporta las nuevas etiquetas)var browser = navigator.userAgent.toLowerCase();
if(!Modernizr.input.required || (browser.indexOf(«safari») != -1 && browser.indexOf(«chrome») == -1)) {
$(‘form’).submit(function() {
$(‘.popup’).remove();
if(!$(‘.email’).val() || $(‘.email’).val() == ‘Digite su correo electrónico…’) {
$(‘form’).append(‘<p>Por favor llene este campo.</p>’);
$(‘.email’).focus();
return false;
}
});
$(‘.email’).keydown(function() {
$(‘.popup’).remove();});
$(‘.email’).blur(function() {
$(‘.popup’).remove();
});}
Como puedes observar, hemos agregado un párrafo al formulario que contiene la frase «Por favor llene este campo.» y le hemos asignado la clase «popup». Este código mostrará este texto en los navegadores que no soporten «required» y que por lo tanto, no serían verificados correctamente (si, desafortunadamente este es uno de los contras que tiene HTML5 en distintos navegadores; pero descuida, estos problemas paulatinamente irán pasando a un segundo grado).
A continuación, el código CSS del popup:
.popup {
position: absolute;
top: 45px;
left: 0;
width: 140px;
padding: 10px;
background: #e7e7e7;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #888;
}
8. Pie de página
En el pie de página vamos a agregar los iconos correspondientes a las redes sociales.
<footer>
<ul>
<li><a href=»»></a></li>
<li><a href=»»></a></li>
<li><a href=»»></a></li>
<li><a href=»»></a></li>
</ul>
</footer>
Y el CSS:
/* —- Footer —- */
footer {
width: 700px;
margin: 0 auto;
padding: 35px 0 25px 0;
overflow: hidden;
}
footer ul {
float: right;
width: 125px;
height: 22px;
}
footer ul li {
float: left;
}
footer a {
position: relative;
display: block;
margin-left: 10px;
}
.digg {
width: 10px;
height: 16px;
background: url(../images/digg.png) center center no-repeat;
}
.twitter {
width: 21px;
height: 16px;
background: url(../images/twitter.png) center center no-repeat;
}
.vimeo {
width: 16px;
height: 16px;
background: url(../images/vimeo.png) center center no-repeat;
}.skype {
width: 16px;
height: 16px;
background: url(../images/skype.png) center center no-repeat;
}
Ahora, vamos a agregar una hermosa y vistosa flecha que dará a entender que son las redes sociales:
<div class=»social-media-arrow»></div>
Y agregamos los estilos de esta flecha:
.social-media-arrow {
position: absolute;
top: 125px;
right: -95px;
width: 108px;
height: 256px;
background: url(../images/social-media-arrow.png) top left no-repeat;
}
9. Animaciones en jQuery.
Vamos a animar los enlaces y los íconos de las redes sociales cuando se coloque el puntero sobre estos. Para esto, vamos a agregar algunas cortas lineas en el archivo script.js:
/* —- Animations —- */
$(‘#links a’).hover(
function(){ $(this).animate({ left: 3 }, ‘fast’); },
function(){ $(this).animate({ left: 0 }, ‘fast’); }
);
$(‘footer a’).hover(
function(){ $(this).animate({ top: 3 }, ‘fast’); },
function(){ $(this).animate({ top: 0 }, ‘fast’); }
);
10. Compatibilidad con Internet Explorer 7 y 8
Si, estos navegadores siguen en el mercado. Afortunadamente será por poco tiempo y va descendiendo, ya que estos no tienen soporte de HTML5 ni CSS3, pero en el mundo mágico de javascript todo tiene solución. Para terminar este tutorial como Dios manda, vamos a agregar las siguientes lineas a nuestro archivo ie.css.
.email {
line-height: 35px;
}
Esto es debido a que en IE 7 y 8 el texto de los campos de formulario no se alinean verticalmente en el centro.
Conclusión
¡Por fin, hemos terminado! Hemos creado nuestra página de «Próximamente», o «En construcción», o «Coming soon», «en breve», «Ya merito», «aguanta el viaje», o como lo llamen dependiendo de su región. La idea del ejercicio era aprender conceptos básicos del HTML5 y CSS3 como los bordes redondeados, las transparencias, los degradados, etc., en este mundo mágico que evoluciona la web. Agradezco su atención y les pido el favor que comenten el tutorial, si me he equivocado en algo por favor escríbanlo en la caja de comentarios o pueden escribirme al correo electrónico: [email protected]. Para finalizar, les dejo el link donde está el demos de esta página y donde podrán descargar los archivos del tutorial. Muchas Gracias.
Ver demo de este tutorial: https://www.johnwmartinez.com/blog/demos/pagina-en-construccion/
Nota: En la página de demo en la parte inferior encontrará el botón «Descargar este ejemplo». Allí puedes bajar todos los archivos comprimidos en carpeta zip.
Fuente: http://www.1stwebdesigner.com