Comunidad de diseño web y desarrollo en internet online

Página en Construcción estilo minimalista en HTML5 y CSS3

Por johnwmartinez el 25 de Agosto de 2012 con 136,129 visitas

HTML, CSS y Javascript Otros tutoriales por johnwmartinez.

En este tutorial vamos a crear una página de "Próximamente en línea", 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 plantilla diseñada previamente en Photoshop.



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 tutoriales), 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 HTML5 (y de cómo 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 éstas 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 éste 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.

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.
  • fonts: en esta carpeta tendremos la fuente que se usará en el contador.


Estructura de la página índex.html


Este será el código de la estructura principal:

Código :

<!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 class="social-media-arrow">
            <!-- 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 línea 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 pié 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:

Código :

body {
    background: url(../images/body-pattern.jpg) top left repeat;
    font-family: Arial, Helvetica, sans-serif;
    padding-bottom: 40px;
}


El Encabezado, Cabecera o Header


Como ya lo habíamos mencionado, el header de nuestra página tendrá el título y la descripción de la página.

Código :

<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:

Código :

/* ---- 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… )


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:

Código :

/* ---- 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;
}


Los enlaces (links)



A continuación el código de nuestros links:

Código :

<div id="links">
    <div class="home"><a href="">http://1stwebdesigner.com/</a></div>
    <div class="support"><a href="">http://support.1wd.com/</a></div>
    <div class="browser"><a href="">Google Chrome OS. 10.X.23</a></div>
    <div class="books"><a href="">http://1wd.co/e-books/</a></div>
    <div class="download"><a href="">http://1wd.com/download/</a></div>
    <div class="ups"><a href="">UPS Signed Worldwide</a></div>
</div>


Nada del otro mundo, simplemente un listado sencillo para cada uno de los links.

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:

Código :

/* ---- 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").

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".

Código :

<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:

Código :

<div id="counter" class="countdownHolder">
    <div class="countDays">
        <span class="position">
            <span class="digit static">0</span>
        </span>
        <span class="position"
            <span class="digit static">0</span>
        </span>
        <span class="boxName">
            <span class="Days">DAYS</span>
        </span>
    </div>
    <span class="points">:</span>
    <span class="countDiv countDiv0"></span>
    <div class="countHours">
        <span class="position">
            <span class="digit static">0</span>
        </span>
        <span class="position">
            <span class="digit static">0</span>
        </span>
        <span class="boxName">
            <span class="Hours">HRS</span>
        </span>
    </div>
    <span class="points">:</span>
    <span class="countDiv countDiv1"></span>
    <div class="countMinutes">
        <span class="position">
            <span class="digit static">0</span>
        </span>
        <span class="position">
            <span class="digit static">0</span>
        </span>
        <span class="boxName">
            <span class="Minutes">MNTS</span>
        </span>
    </div>
    <span class="points">:</span>
    <span class="countDiv countDiv2"></span>
    <div class="countSeconds">
        <span class="position">
            <span class="digit static">0</span>
        </span>
        <span class="position">
            <span class="digit static">0</span>
        </span>
        <span class="boxName">
            <span class="Seconds">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).

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:

Código :

/* ---- 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í.

Como podemos observar en el código anterior, 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 sectorizadas, 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 se puede manejar no sólo el color por canales, sino también la transparencia del contenedor. Ahora, vamos a iniciar la cuenta regresiva incluyendo las siguientes líneas en el archivo "script.js" (que está dentro de la carpeta js).

Código :

$(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.

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:

Código :

<form action="" method="get">
    <input type="text" class="email" placeholder="Escriba su e-mail en este campo" required />
    <input type="submit" class="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:

Código :

/* ---- 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 soporta 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:

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 class="popup">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:

Código :

.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;
}


Pie de página


En el pie de página vamos a agregar los iconos correspondientes a las redes sociales.

Código :

<footer>
   <ul>
      <li><a class="digg" href=""></a></li>
      <li><a class="twitter" href=""></a></li>
      <li><a class="vimeo" href=""></a></li>
      <li><a class="skype" href=""></a></li>
   </ul>
</footer>


Y el CSS:

Código :

/* ---- 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 qué son las redes sociales:

Código :

<div class="social-media-arrow"></div>


Y agregamos los estilos de esta flecha:

Código :

.social-media-arrow {
   position: absolute;
   top: 125px;
   right: -95px;
   width: 108px;
   height: 256px;
   background: url(../images/social-media-arrow.png) top left no-repeat;
}


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 líneas en el archivo script.js:

Código :

/* ---- 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'); }
);


Compatibilidad con Internet Explorer 7 y 8


Sí, 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 líneas a nuestro archivo ie.css.

Código :

.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 demo de esta página y donde podrán descargar los archivos del tutorial. Muchas Gracias.

Demo del tutorial y descarga de archivos

Dudas, preguntas, sugerencias, aportes, regaños, maldiciones voodoo: En la caja de comentarios que está debajo de este tutorial o en mi twitter: @johnwmartinez. Gracias.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Envia un comentario (37)

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate