Tecnología y Coaching para Emprendedores

Gratis: Plantilla Web Responsive en HTML5 y CSS3

html5-y-css3

Para los que no lo sabéis, en inglés un freebie es algo que se da gratuitamente y es un termino muy utilizado en los blogs anglosajones. Hoy os traigo una plantilla web en HTML5 y CSS3 completamente adaptada para un diseño web responsive. Utiliza media queries de CSS y es ideal para aprender tanto CSS3 como a diseñar sitios web responsive.era.com/tutoriales-para-aprender-a-disenar-sitios-web-responsive”>diseñar sitios web responsive.

Esta plantilla está especialmente pensada con fines didácticos, tanto para los que justo empezáis con diseño web responsive, como los que queréis llevar vuestros conocimientos de CSS3 más adelante. Está desarrollada con HTML5 y CSS3, ya que cada vez son más los sitios web que se desarrollan con estas tecnologías.

 

Markup HTML5


 <div class="container">

        <input type="radio" name="radio-set" checked="checked" id="radio-1"/>
                <a href="#home">Home</a>
        <input type="radio" name="radio-set" id="radio-2"/>
                <a href="#sobre">Sobre m&amp;amp;iacute;</a>
        <input type="radio" name="radio-set"  id="radio-3"/>
                <a href="#diseno">Dise&amp;amp;ntilde;o</a>
        <input type="radio" name="radio-set"  id="radio-4"/>
                <a href="#cursos">Cursos</a>
        <input type="radio" name="radio-set"  id="radio-5"/>
                <a href="#contacto">Contacto</a>

        <div class="scroll">

            <section class="panel color-1" id="home">
                <h2>Responsive Design</h2>
                <p>Aprendiendo a crear sitios web responsive con HTML5 y CSS3</p>

             </section>

            <section class="panel color-2" id="sobre">
                <h2>Lorem ipsum</h2>
                <p>Lorem ipsum, bla, bla, bla, m&amp;amp;aacute;s lorem ipsum.</p>
            </section>

            <section class="panel color-3" id="diseno">
                <h2>Lorem ipsum</h2>
                <p>Lorem ipsum, bla, bla, bla, m&amp;amp;aacute;s lorem ipsum.</p>
            </section>

            <section class="panel color-4" id="cursos">
                <h2>Lorem ipsum</h2>
                <p>Lorem ipsum, bla, bla, bla, m&amp;amp;aacute;s lorem ipsum.</p>
            </section>

            <section class="panel color-5" id="contacto">
                 <h2>Lorem ipsum</h2>
                <p>Lorem ipsum, bla, bla, bla, m&amp;amp;aacute;s lorem ipsum.</p>
            </section>

        </div> <!-- fin del scroll -->

    </div> <!-- fin del container -->
    <div class="clr"></div>
    <footer>
     <a href="#">Espa&amp;amp;ntilde;ol</a> &amp;amp;nbsp; | &amp;amp;nbsp; <a href="#">English</a>
    </footer>

Como puedes comprobar, el código HTML no tiene mucho secreto. El menú se organiza con una estructura de selección de radio, y sólo la primera opción es la que está seleccionada: checked="checked". ¿Qué sucede si dejas seleccionada alguna otra opción? Que la página web se abrirá por la última de la lista que tenga checked="checked" en el código. Esto está bien si quieres hacer un diseño diferente, pero como norma siempre empezaremos por el primer tabulador.

CSS y CSS3

Veamos ahora el código CSS.

Aquí ya hay bastante más cosa, veamos punto por punto:

@import url('normalize.css');

/* Basics */
@font-face{font-family:Cubano; src:url('webfonts/cubano-regular-webfont.ttf')}

body{
    font-family: Arial, sans-serif;
    background: #fff;
    font-weight: 400;
    font-size: 15px;
    color:#fff ;
    overflow: hidden;

}
a{
    text-decoration: none;
}

.clr{
    clear: both;
    padding: 0;
    height: 0;
    margin: 0;
}

Lo primero que hemos hecho es importar la hoja de estilos normalize.css, que nos hace las funciones de reset del CSS. A continuación utilizamos la propiedad @font-face de CSS3 que nos permite usar estilos de fuentes personalizadas, en este caso la tipografía Cubano que tenemos en la carpeta webfonts.

En el body hemos utilizado overflow: hidden;, lo que evita que el usuario pueda desplazarse con una barra lateral u horizontal (aunque no es así en los dispositivos táctiles).

La clase clr simplemente nos facilita el uso de clear:both después de usar cualquier float. De esta manera, evitamos repetir el código de manera innecesaria.


/* Container */

.container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.container > input,
.container > a {
    position: fixed;
    top: 0px;
    width: 20%;
    font-family:Cubano,Impact,Arial,sans-serif;
    text-transform:uppercase;
    cursor: pointer;
    font-size: 23px;
    height: 38px;
    line-height: 38px;
    -webkit-box-shadow: 0px 0px 5px #343434;
    box-shadow: 0px 0px 5px #343434;
}

.container > input {
    opacity: 0;
    z-index: 1000;
}

.container > a {
    z-index: 10;
    background: #000;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 2px #666;
}

.container:before {
    content: '';
    position: fixed;
    width: 100%;
    height: 37px;
    background: #000;
    z-index: 9;
    top: 0;
}

Para los que no lo conozcáis, div > span es un selector de CSS que indica un span que tiene como padre a un div. Lo que hacemos es definir el ancho de cada una de las pestañas del menú, que como son 5 será del 20%. El motivo por el que le damos una opacidad 0 a los inputs es porque queremos que estén allí para poderlos clicar, pero no queremos que estén visibles. Como en las versiones anteriores a IE9 la opacidad no funciona, si se quiere dar soporte a este navegador se debe buscar otra alternativa, o en otro caso aparecerán los botones de selección tipo radio. Utilizamos también la propiedad z-index porque como tenemos varios elementos en la misma capa, debemos marcar la prioridad, en este caso de input.


#radio-1, #radio-1 + a {
    left: 0;
}

#radio-2, #radio-2 + a {
    left: 20%;
}

#radio-3, #radio-3 + a {
    left: 40%;
}

#radio-4, #radio-4 + a {
    left: 60%;
}

#radio-5, #radio-5 + a {
    left: 80%;
}

Para los que no lo sabéis div + span significa un span precedido por un div. Siento si a veces me paso en explicar lo básico, pero como no son propiedades que se utilicen a menudo, prefiero explicarlas para los que no las conocéis. Aquí lo que estamos es fijando la posición de cada una de las opciones del menú. Como son 5, el cálculo matemático es muy fácil, y como se trata de un diseño web responsive, utilizamos porcentajes para definir las posiciones. Así, por ejemplo, left:20% significa que este tabulador estará a un 20% de distancia del origen contando desde la izquierda. Un ejemplo numérico: si el ancho de navegador tiene una resolución de 1000px, su inicio estará a 200px.


input#radio-1:checked + a,
input#radio-1:checked:hover + a {
  background:#005dc7;
  box-shadow: none;
}

input#radio-2:checked + a,
input#radio-2:checked:hover + a  {
  background:#7ac900;
  box-shadow: none;
}

input#radio-3:checked + a,
input#radio-3:checked:hover + a  {
  background:#fec211;
  box-shadow: none;
}

input#radio-4:checked + a,
input#radio-4:checked:hover + a  {
  background:#e34a28;
  box-shadow: none;
}

input#radio-5:checked + a,
input#radio-5:checked:hover + a  {
  background:#af2d9b;
  box-shadow: none;
}

Aquí lo que estamos definiendo es el color de las pestañas cuando estén seleccionadas. En este caso, lo he hecho coincidir con el del background.


input:checked + a,
input:checked:hover
{
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}

Para dar la sensación de ser una pestaña de verdad, he dado forma curva a la parte superior de las pestañas cuando están seleccionadas aprovechando la propiedad border-radius de CSS3.

.scroll,
input:checked + a,
input:checked:hover + a  {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

}

Aquí estamos utilizando las transiciones de CSS3, de modo que cuando cambiamos de pestaña, las transiciones se realizan de manera progresiva en medio segunda, en lugar de saltar de golpe.


#radio-1:checked ~ .scroll {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -o-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
}
#radio-2:checked ~ .scroll {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}
#radio-3:checked ~ .scroll {
    -webkit-transform: translateY(-200%);
    -moz-transform: translateY(-200%);
    -o-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
    transform: translateY(-200%);
}
#radio-4:checked ~ .scroll {
    -webkit-transform: translateY(-300%);
    -moz-transform: translateY(-300%);
    -o-transform: translateY(-300%);
    -ms-transform: translateY(-300%);
    transform: translateY(-300%);
}
#radio-5:checked ~ .scroll {
    -webkit-transform: translateY(-400%);
    -moz-transform: translateY(-400%);
    -o-transform: translateY(-400%);
    -ms-transform: translateY(-400%);
    transform: translateY(-400%);
}

div ~ span es un span que es un sibling o hermano de un div. Aquí lo que indicamos es que si uno de los botones está activo, se haga un scroll hacia abajo (de aquí el signo negativo), indicando el tanto por ciento. Como cada página tiene un ancho y un alto del 100%, si hacemos un scroll de -300% nos iremos al contenido de la tercera pestaña.

/* Bg Color */

.color-1 {
    background:#005dc7;
}

.color-2 {
    background:#7ac900;
}

.color-3 {
    background:#fec211;
}
.color-4 {
    background: #e34a28;
}

.color-5 {
    background: #af2d9b;
}

Aquí simplemente estamos definiendo el color de cada una de las páginas, color que hemos hecho coincidir con el de las pestañas.


.panel h2 {
    position:relative;
    left:0%;
        top:35%;
    font-family:Cubano;
    letter-spacing:1px;
    color:#fff;
    text-shadow: 1px 1px 3px #343434;
    font-size: 40px;
    font-weight: 700;
    padding: 0;
    text-align: center;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

}

.panel h2:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);

}

Aquí indicamos que el contenido principal estará un 35% de la parte superior y a un 0% del lado izquierdo y centrado en el centro. Utilizamos una de las transiciones de CSS3 que permite escalar el contenido cuando el usuario pasa el ratón por encima.


#radio-1:checked ~ .scroll #home h2,
#radio-2:checked ~ .scroll #sobre h2,
#radio-3:checked ~ .scroll #diseno h2,
#radio-4:checked ~ .scroll #cursos h2,
#radio-5:checked ~ .scroll #contacto h2 {

    -webkit-animation: moveDown 0.8s ease-in-out 0.4s backwards;
    -moz-animation: moveDown 0.8s ease-in-out 0.4s backwards;
    -o-animation: moveDown 0.8s ease-in-out 0.4s backwards;
    -ms-animation: moveDown 0.8s ease-in-out 0.4s backwards;
    animation: moveDown 0.8s ease-in-out 0.4s backwards;
}
@-webkit-keyframes moveDown{
    0% {
        -webkit-transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0px);
        opacity: 1;
    }
}

@-moz-keyframes moveDown{
    0% {
        -moz-transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        -moz-transform: translateY(0px);
        opacity: 1;
    }
}

@-o-keyframes moveDown{
    0% {
        -o-transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        -o-transform: translateY(0px);
        opacity: 1;
    }
}

@-ms-keyframes moveDown{
    0% {
        -ms-transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        -ms-transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes moveDown{
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

Esto aunque parezca complicado es muy simple. Lo que estamos diciendo es que en el momento que el usuario haga clic en una nueva pestaña, el contenido principal se desplace de arriba a abajo y pase de tener una opacidad 0 a 1. Como para el párrafo de abajo es lo mismo, pero de abajo a arriba, omito explicarlo. Utilizamos los keyframes paea especificar los parámetros de la posición inicial, esto es el 0% y final, o sea el 100%.

Media Queries


@media screen and (max-width: 360px) {
    .container > a {
        font-size: 10px;
    }
}

@media screen and (max-width: 520px) {
    .panel h2 {
        font-size: 42px;
    }

    .panel p {
        width: 90%;
        left: 5%;
        margin-top: 0;
    }

    .container > a {
        font-size: 13px;
    }
}

Sólo he utilizado dos media queries de CSS por tema de tiempo, aunque en un entorno real de desarrollo se deberían usar bastantes más para ofrecer la mejor experiencia de usuario. Para trabajar en un entorno real, recomiendo utilizar un framework o grid responsive. Soy de la opinión que es mejor empezar a desarrollar para resoluciones pequeñas e ir aumentando de resolución, aunque para gustos los colores.

Si lo deseas, puedes ver aquí la demo y descargar la plantilla:

Uso y notas

Puedes utilizar libremente esta plantilla tanto para tus diseños como para el de tus clientes. Si que te aviso que esta plantilla sólo es útil para un diseño web minimalista, pues a la mínima que quieras poner contenidos, al estar no podrás hacerlo, porque en una BlackBerry Curve (por citar un ejemplo), se sobrepondrá todo, pues el diseño es de una sola página, con el inconveniente de estar acotada por el footer.

Si quitas el footer, tendrás también problemas si los contenidos exceden una página, pues las transiciones están hechas con CSS3 , y al definirse por porcentajes, si alguien se desplaza manualmente hacia otra sección, cuando le dé al botón correspondiente, desplazará el mismo recorrido, con lo que no irá a parar al sitio pensado. Esto se puede corregir con JavaScript, pero es algo a tener en cuenta. Dirás que con overflow:hidden ya está, pero no es así debido a la aparición de dispositivos táctiles como el iPhone que permiten desplazarse libremente a pesar de esta condición.


Comentarios

  • Antonio

    Extensisima explicación sobre esta herramienta, muy buen trabajo… En lo referente a las mediaquerys, según oí en una ponencia sobre responsivedesign, el ponente en cuestión (@arturomarimon) se preguntaba no carente de lógica, en la incongruencia de crear el diseño de las fuentes, las imágenes o la estructura del sitio porcentualmente para luego ejecutar las mediaqueries generando los puntos de ruptura por píxeles, no se que opinas de esto… Saludos!!
    Adjunto enlace con la ponencia http://www.seonthebeach.es/index.php/arturo-marimon-responsive-web-design/

    • Sandra

      Hola Antonio, gracias por el enlace, me miro la ponencia a ver qué tal, lo que dice Arturo parece tener mucha lógica!

  • coudlain

    E S P E C T A C U L A R ! ! ! … muy muy bueno si señora!! sigue asi!! :D

    Un saludo

  • saul

    me gustan tus explicaciones sobre las propiedades > o + de css, no las uso mucho por culpa de internet explorer para tener compatibilidad con sus viejas versiones

    • Sandra

      Gracias, Saul, yo pienso que hay que diseñar para navegadores modernos y dispositivos móviles y ofrecer una opción de fallback para navegadores como IE, que no siguen los estándares web.

  • Alex

    muchas gracias!

  • Marcos

    Muy bueno el tutorial. Una pregunta, soy novato en el tema y aún me hago un poco un lio leyendo código, por lo que he visto no has usado Less, Sass ni nada parecido en el css. ¿Es correcto?
    Ya tienes un lector más de tu blog,

  • Isaac Blazquez

    Esta muy bien este tutorial por que le das un punto de inicio a muchos, pero solo un detalle que quizas es que yo estoy algo espeso hoy… ademas de que no se puede usar este codigo para pantallas tactiles ya que nos permitiria hacer scroll, aunque solo hacia abajo) tampoco recomiendo que se use para dispositivos donde puedan hacer zoom pellizcando la pantalla

    Un saludo Sandra, tienes un buen blog

  • Isa

    Un tutorial muy interesante, aunque le he echado un vistazo tanto en PC de mesa, como en iPhone, y en este último no funciona perfecto al 100% ya que el texto desaparece ¿lo habéis notado vosotros también?

    Un saludo Sandra.