De PSD a HTML5 – Parte 3, el CSS

Seguimos con este 3º tutorial donde estamos pasando un PSD a un una web totalmente funcional en HTML5 y CSS, en esta parte nos ocuparemos de los  CSS, donde crearemos los estilos necesarios para dar la misma apariencia que tenemos en diseño original que creamos en Photoshop.

El video dura un poco mas de una hora, pero en ella hacemos todo el proceso de los CSS necesarios.

Este es el codigo CSS generado en el ejercicio:

Nos vemos en el siguiente tutorial.

Vea también

De PSD a HTML5 – Parte 1, Photoshop
De PSD a HTML5 – Parte 2, el HTML
De PSD a HTML5 – Parte 4, implementando el Slider

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

15 Respuestas

  1. Luis dice:

    Hola, Johan

    los tutos me parecen buenos (ni largos, ni cortos) tienen el tiempo que se necesita para asimilación
    te seguiré…

    salu2

    luis

  2. Miguel dice:

    Hola,

    Desde hace tiempo tengo la idea de crear un vídeo tutorial de CSS. En estos días veré si tengo tiempo de crearlo. Quería preguntarte si acaso estarías interesado en publicar el tutorial en tu web.

    Saludos
    Miguel

  3. Miguel dice:

    Hola,

    No puede ver el vídeo completo por que esta muy largooooo.

    Solo quería darte algunas sugerencias.

    1. Trata de hacer los vídeos mas cortos.
    2. Hace años que ya no se necesitan ese tipo de resets css.
    3. !important nunca se tiene que utilizar…Amenos que sea muy necesario.

    Saludos
    Miguel

    • Ok Miguel, Gracias por tu comentario,
      1, tienes razón los videos largos aburren..
      2, es cierto, ahora utilizamos otro sistema para que no se inpongan los estilos de los navegadores Ej: normalize
      3, el important lo utilize cundo fue necesario, normalmente cuando utilizamos grid se suelen imponer estilos.
      Saludos.

  4. david dice:

    lo hice pero nada

  5. Jesunday dice:

    Hola Buen dia! con respecto al pot que publicaste referente al formulario con php y mysql .. he estado trantando de hacerlo funcionar de mil y una maneras en mi servidor y siempre me da error .. no sé si es que hay algún error en el código de php para conectar o que es exactamente lo que pasa .. lo he probado con bases de datos en mi servidor de fat cow, awardspace, y otros varios y nada!! necesito resolver esto.. necesito saber como conectar correctamente mi base de datos con un sitio web.. estoy trabajando en un proyecto personal y todavía estoy novato con “php” y “databases” si me puedes dar una mano con esto te lo agradeceré enormemente. tu formulario lo monte en este vinculo temporalmente para probar: http://quevelecciones2014.tk/registro/formulario.php (como te daras cuenta da error) que puedo hacer??

  6. david dice:

    la parte border right del aside e iconos de redes no me sale que hago?

    • Hola David, fijate que este colocando y distribuyendo bien los divs que hacen parte del sistema 960, si es asi esto se debe de cuadrar automaticamente, por eso utilizamos los frameworks

  7. david dice:

    la parte del borde a la derecha y iconos de redes sociales no me sale

  8. Cristian dice:

    Excelentes los tutoriales Johanso. La verdad nunca avía usado el framework 960 grid y aunque no es responsive ni adaptive es muy fácil de adaptarlo. Soy aficionado pero me gusta aprender.
    Algunos de mis diseños
    http://cridavcor.com.ar/demo/animaleros/
    http://cridavcor.com.ar/demo/zerodays/
    http://cridavcor.com.ar/demo/nsmon/

    P.D: No se rían de los diseños jejeje 😉

  1. enero 16, 2014

    Hola Cristian, los diseños estan buenos, felicitaciones. Mira el framework 960 tambien tiene una versión adaptive (http://adapt.960.gs/), solo que en estos tutoriales quize hacer un sitio convencional. Saludes