Pin It

40 Plantillas gratis HTML5 y CSS3

html5-css3El HTML5, aunque aún está en modo experimental, ya es usado por muchos desarrolladores web por sus avances, mejoras y ventajas. Estas ventajas, unidas a las del CSS3, dan como resultado páginas webs más elaboradas y dinámicas, con mayor separación entre estilos y contenidos. Podrás usar animaciones que los usuarios verán en las tabletas y dispositivos móviles como si de un ordenador se tratara.

En el Diseño Web y el Desarrollo Web necesitamos movernos siempre con las últimas tendencias, que te permitirán crear Sitios Webs excepcionales, ofreciéndole al usuario una mejor experiencia, mucho más accesible.

Todos los templates que te dejo a continuación están diseñados usando HTML5 y CSS3. Espero que te sirvan de inspiración, o que sean una fuente útil de aprendizaje.

Si deseas elegir una Plantilla de WordPress para su Sitio Web, 
y aún no conoces cuáles son los factores fundamentales 
que debes tener en cuenta para elegir la más adecuada, 
te recomiendo que leas primero este artículo

Plantillas Gratis HTML5 y CSS3

1. HTML5 Theme

Sitio minimalista en gris y rosa. Trae consigo un poderoso formulario de contacto realizado con Ajax.

HTML5 Theme

Info & Descargar | Demo

2. OWMX-1

Un hermoso y limpio diseño de dos columnas, queda perfecto para un blog.

Comparte la Pasión :-)
¡Apúntate a nuestra lista de correo!

OWMX-1

Info & Descargar

3. DesignStudio

Diseño de fondo negro, ideal para un portafolio o blog.

DesignStudio

Info & Descargar | Demo

4. Photo Art

Plantilla ideal para tu portafolio online.
Es compatible con los navegadores: FF 3.6 +, Opera 10.5 +, Safari 4 +, Chrome 4 +, IE6 +.

PhotoArt

Info & Descargar

5. Biz Solutions

Otra plantilla con un diseño genial, que destaca por su limpieza. Puede ser usada para Sitio Web Corporativo. El Descargar incluye también los archivos PSD de Photoshop.

Biz Solutions

Info & Descargar

6. CoffeeCols

Plantilla con diseño de revista. Lleva las esquinas redondeadas, y trae incluido en el paquete una plantilla interior.

CoffeeCols

Info & Descargar | Demo

7. Design Company Website

Bellísima plantilla para un Página Web Corporativa. Cuenta con su propia galería de imágenes y es compatible con fuentes personalizadas.

 Design Company Website

Info & Descargar

8. Minimalism

Plantilla minimalista para Páginas Webs Corporativas.

Minimalism

Info & Descargar | Demo

9. Serenity

Plantilla de una sola columna con un carrusel en la página de inicio.

Serenity

Info & Descargar | Demo

10. Vibrant Professional Web Design

Un brillante y colorido diseño corporativo.

Vibrant Professional Web Design

Info & Descargar

11. DaFrontPage

Plantilla con diseño para revistas de noticias con 3 columnas.

DaFrontPage

Info & Descargar | Demo

12. Business

Esta plantilla puede venirte bien para la presentación de tu Negocio Online.

Business

Info & Descargar

13. Business Project

Plantilla para Páginas Webs Corporativas, con diseño negro y verde. Trae un carrusel hecho con jQuery en la página de inicio.

Business Project

Info & Descargar | Demo

14. Single-Page Portfolio

Fantástica plantilla que puedes usar como portafolio. Los archivos PSD de Photoshop vienen incluidos en la descarga.

Single-Page Portfolio

Info & Descargar | Demo

15. Acallia

Este sitio corporativo trae un carrusel en la página de inicio, hecho con jQuery.
Acallia

Info & Descargar | Demo

16. Memoir

Plantilla funcional y elegante, ideal para la Web Corporativa de tu empresa o tu Negocio online.

First

Info & Descargar

17. Simple Style 7

Estilo minimalista. Este diseño utiliza estilos de letra de Google.

Simple Style 7

Info & Descargar | Demo

18. Night Club

Plantilla muy bien diseñada, creada especialmente para pub, bares o discotecas. Puedes descargarte el archivo PSD de Photoshop si te suscribes al boletín de TemplateMonster.

Night Club

Info & Descargar | Demo

19. A HTML5 Theme

Sitio minimalista también realizado en HTML5 y CSS3, en gris y rosa. Incluye diseño de submenúes y página de Contacto.

A HTML5 Theme

Descargar | Demo

20. Cooking Site

Muy buena plantilla con diseño para un Sitio Web de Recetas. Incluye un carrusel en la página de inicio.

Cooking Site

Info & Descargar | Demo

21. VividPhoto

Magnífica plantilla de para Sitios Web de fotografía.

VividPhoto

Info & Descargar | Demo

22. Shinra

Refrescante diseño, con estilos de fuentes de Google. Trae también las plantillas de la página de Contacto, la Galería y el Portafolio.

Shinra

Info & Descargar | Demo

23. One Page Portfolio

Diseño simple y limpio, que puede servirte para tu portafolio.

One Page Portfolio

Info & Descargar | Demo

24. ArchiteXture

Una simple plantilla de dos columnas. Puedes usarla para un sitio web de una pequeña empresa.

ArchiteXture

Info & Descargar | Demo

25. ElegantPress

Diseño limpio y con gran cantidad de detalles. Incluye un carrusel en la página de inicio, un formulario de contacto, lightbox para las imágenes, una galería con jQuery y también un portafolio con jQuery.

ElegantPress

Info & Descargar | Demo

26. SocialStream

Muy buena plantilla para los fans de las redes sociales. Te permite mostrar en vivo la actividad de tu Facebook o Twitter.

SocialStream

Info & Descargar | Demo

27. OnlineSolutions

Plantilla con diseño naranja de 3 columnas. Es recomendable para un Sitio Web Corporativo.

OnlineSolutions

Info & Descargar | Demo

28. Touch The Future

Elegante diseño, que incluye un tutorial de cómo fue diseñado.

Touch The Future

Info & Descargar | Demo

29. FreshIdeas

Diseño simple de dos columnas, que usa los colores blanco y amarillo.

FreshIdeas

Info & Descargar | Demo

30. Restaurant

Hermoso diseño de esta plantilla gratis para Restaurantes. Incluye un carrusel para la página de inicio.

Restaurant

Info & Descargar | Demo

31. HTML5 Admin Template

Una avanzada plantilla de HTML5 diseñada para la administración de sitios.

HTML5 Admin Template

Info & Descargar | Demo

32. HTML5 Admin

Otra buen diseño que puedes usar como plantilla para administrar tus propios proyectos.

HTML5 Admin

Info & Descargar | Demo

33. 52framework

Incluye una página simple en HTML5, y un formulario de Contacto.

52framework

Info & Descargar | Demo

34. One-Page Template

Bonita plantilla de diseño azul. Tiene un carrusel que muestra las diferentes secciones de la página.

One-Page Template

Info & Descargar | Demo

35. Industrial Services

Muy buen diseño ideal para tu empresa o negocio. Tiene incluido un carrusel en la página de inicio y un calendario hechos con Javascript.

Industrial Services

Info & Descargar

36. PKE Meter

Crea tu propio sitio de aplicaciones de iPhone, usando este útil template.

PKE Meter

Info & Descargar | Demo

37. HTML5 Starter Pack

Incluye los archivos PSD de Photoshop. Plantilla ideal para un blog.

HTML5 Starter Pack

Info & Descargar

38. HTML5 template

Esta plantilla trae las variantes para que puedas usarla con 1, 2 ó 3 columnas.

HTML5 template

Info & Descargar | Demo

39. Nova

Una plantilla de HTML5 que viene con 5 plantillas de páginas interiores, formulario de contacto y una galería de imágenes y video.

Nova

Info & Descargar | Demo

40. Kroft

Incluye 6 imágenes de fondo, 6 plantillas de páginas, un carrusel para el home y está integrado con las redes sociales. Trae también los archivos PSD de Photoshop.

Kroft

Info & Descargar | Demo

Listado publicado en Noupe.com

Para terminar

Espero que este artículo con 40 plantillas gratis programadas con HTML5 y CSS3 te haya sido muy útil.
¿Hay algún diseño que no he puesto en esta lista y que crees que debería incluir? ¿Estás buscando alguna plantilla con un diseño específico que no has encontrado aquí? Cualquier duda o comentario, déjamelo saber y te responderé con placer.

PD: Si este artículo te resultó útil, no dejes de ver estas 9 impresionantes Templates en HTML5, estoy segura de que te impactarán.

¡Que el éxito te acompañe!

Naylín

Sobre Naylín

Soy Naylín Núñez, fundadora de Soluciones4Web, y estoy encantada de tu visita. Soy amante del Yoga y me apasiona el Diseño Web y el Marketing Online. Acompañamos a los Emprendedores a obtener el Éxito de su Negocio con la Ayuda de Internet, con Estrategias y Consejos que Funcionan.

¿QUIERES VIVIR DE TU PASIÓN CON LA AYUDA DE INTERNET?
Únete a nuestra Familia de Emprendedores Apasionados, que reciben en su email, mensajes exclusivos COMPLETAMENTE GRATIS, con Consejos y Recursos para POTENCIAR SUS NEGOCIOS CON LA AYUDA DE INTERNET.

Además recibirás de Regalo nuestro libro digital: "Cómo Vivir de tu Pasión con la Ayuda de Internet"

100% Libre de Spam
40 Comentarios
  1. ian vatega
    26 abril de 2012 a las 2:31 pm

    Pues yo estoy buscando una plantilla para wordpress para poder renobar mi blog.. con mis canales de youtube.. tenia pensado en WP multisite y aunque teniendo mi blog principal.. tener otros de segundo nivel.. pero que la gente puede entrar a verlos…. principalmente seria para poner mis videos de mis canales de youtube..

    Habria alguna plantilla para facil insercion de los videos… como tambien mis redes sociales… digamos me falta encontrar una plantilla vlogger xd

    Responder
  2. Marlene
    7 agosto de 2012 a las 2:15 am

    Hola, pasando por aqui me pareció interesante. A tu pregunta, si hace falta alguún diseño, yo diría que si, pues llegué buscando una plantilla para una escuela colegio, universidad, algo por el estilo; aunque talvez alguna de estas plantillas pueda servirme si las modifico. De todos modos gracias. Que pasen todos los visitantes un excelente día.

    Saludos.
    Regreso pronto ;)

    Responder
    • Naylín
      14 agosto de 2012 a las 3:05 pm

      ¡Muy buenas Marlene!
      Tendré en cuenta tu necesidad, pues es posible que sea la de otras personas. Haré una recopilación de plantillas en HTML5 y CSS3 que estén enfocadas en la formación, y dejaré un comentario aquí cuando esté.

      ¡Saludos, y gracias por comentar!
      Naylín

      Responder
  3. eduardo
    16 agosto de 2012 a las 6:39 pm

    hola buenos dias..mi pregunta es la siguiente..¿Puedo descargar una demo de alguna de las plantillas y hacer uso de ella para adecuarla a mi informacion y publicarla?

    Espero y me puedan ayudar.. muchas gracias…
    un saludo..

    Responder
    • Naylín
      16 agosto de 2012 a las 6:58 pm

      ¡Hola Eduardo!
      Para saber el tipo de licencia que tienen las plantillas, debes descargarlas y buscar un archivo que deben tener todas donde explique los términos y condiciones de uso.
      Por ejemplo, la primera que es la “1. HTML5 Theme” tiene dentro un archivo que se llama license.txt. Ahí están todas las restricciones de esa plantilla. Por lo general te permiten hacerle los cambios que quieras, siempre que dejes en el código la referencia al autor. De todas formas te aconsejo que le eches un vistazo antes.
      ¡Un abrazo!
      Naylín

      Responder
  4. itsuki
    26 agosto de 2012 a las 1:35 am

    hola me encantaron las plantillas estan muy buena, estoy por realizar una pagina con un toque corporativo pero me encantaria que no se viera muy formal, quiero algo innovador, espero me sirva alguna jeje aunke todas estas buena.. grax

    Responder
    • Naylín
      7 septiembre de 2012 a las 9:39 pm

      ¡Muy buenas Itsuki!
      ¡Me alegra que te hayan gustado las plantillas! Estoy preparando un artículo donde pondré muuuchas plantillas más, aunque no todas en HTML5 y CSS3, pero sí serán buenas plantillas y de reciente creación para WordPress. Espero que también te sean útiles.
      ¡Un abrazo!
      Naylín

      Responder
  5. panxoi
    21 septiembre de 2012 a las 5:18 am

    Hola, me parecio bastante interesante el tema de estas plantillas sobretodo que dejan modificarlas en su totalidad, es ayuda mucho a distraerse e inspirarse. Soy comunicador Multimedia, por ende se de todo un poco pero no a la perfeccion, es por eso que me paseo por varios lados donde se respete y dejen experarse.

    Saludos muy buena iniciativa de poner templates, ojala expongan trabajos propios

    Responder
    • Naylín
      21 septiembre de 2012 a las 4:12 pm

      Muy buenas Panxoi, y muchas gracias por tu comentario.
      Sí, las plantillas son muy útiles en ocasiones, incluso como tú dices, para que sean como una base sobre la cual inspirarnos.
      ¡Un abrazo!
      Naylín

      Responder
  6. rodrigo silva
    3 octubre de 2012 a las 11:56 am

    tengo una duda …me ayudas como editar el tema de contacto en la plantillas … el .php esta vacio y se vincula a un .htc no entiendo como editarlo para mantener el diseño porfavor cualqueir cosa a mi correo te lo agradeceria

    Responder
    • Naylín
      6 octubre de 2012 a las 4:41 pm

      ¡Hola Rodrigo!
      No entiendo qué es lo que te pasa exactamente, pero nos ha pasado que hemos tenido problemas con algunos themes con la parte de contacto, y lo hemos resuelto instalando un plugin de contacto (el Contact Form 7), y usamos este en vez de lo que viene con el theme.
      Cualquier cosa me dices.
      ¡Un abrazo!
      Naylín

      Responder
  7. Jhon
    18 octubre de 2012 a las 6:02 pm

    Excelente tu información me ha servido de mucho sobretodo porque cuando uno se encuentra iniciando en este cuento del diseño web muchas veces no encuentra ejemplos que te ayuden a afianzar tus conocimientos,aprender más y que sean motivo de inspiraciòn para nuevos diseños. Desde ya agradecido contigo por permitirnos aprender de tus diseños y compartir con nosotros tus conocimientos.
    gracias hasta pronto.

    Responder
    • Naylín
      20 octubre de 2012 a las 7:29 am

      ¡Hola Jhon!
      Me alegra que te haya sido útil el artículo. Tanto para personas que necesiten un diseño para su sitio o el de sus clientes, o personas como tú, que están buscando ejemplos para inspirarse y aprender, realmente creo que estas plantillas son una buena fuente.
      Un abrazo,
      Naylín

      Responder
  8. Jhon
    18 octubre de 2012 a las 9:51 pm

    Olvide comentarte que me gustaria saber en donde puedo encontrar un curso online o ejemplos de como crear desde ceros una plantilla con html5 y css

    Responder
    • Naylín
      20 octubre de 2012 a las 7:35 am

      ¡Hola Jhon!
      En Internet hay varios, por ejemplo, he visto este en Youtube que tiene muy buenas votaciones y comentarios, espero que te sirva. Te dejo el primer capítulo, pero fíjate que son 10.
      https://www.youtube.com/watch?v=2VKHklZl4-I

      ¡Un abrazo!
      Naylín

      Responder
  9. Victor
    26 octubre de 2012 a las 7:20 am

    hola perdon pero tengo algunas dudas, quiero hacer una pagina dinamica me gusto el templete “CoffeeCols”
    quiero hacer una pagina de podcast, pero que los vaya subiendo y aparescan los post
    Mi duda es se puede con este templete?

    Me podrias dar una ayudadita no ando tan perdido

    Responder
    • Daniel
      30 octubre de 2012 a las 1:55 pm

      ¡Hola Víctor!

      Si estás usando WordPress no hay ningún problema, puedes crear las entradas y en ellas añadir tus podcast. Lo que tienes que averiguar es si esa plantilla está preparada para WordPress. Puedes hacerlo preguntando directamente al que hizo la plantilla, déjale un comentario http://freehtml5templates.com/coffeecols-html5-and-css3-multi-column-magazine-style-template/

      Cualquier otra duda que tengas ponte en contacto con nosotros, con mucho gusto te ayudaremos.

      un saludo!!

      Daniel

      Responder
  10. Adrian
    18 noviembre de 2012 a las 12:26 am

    Hola, mi pregunta es la casi misma que Eduardo. “¿Puedo descargar una demo de alguna de las plantillas y hacer uso de ella para adecuarla a mi información y publicarla?”

    Pero en este caso en Template de ThemeForest. Tengo problemas del xml cuando intento importarlo.
    No estoy seguro si el xml es el “Demo”,

    He usado el template Video: http://templatic.com/freethemes/video/
    Ese template me viene con el demo “Sample data”. Por cual quite la información que tenia y la remplace por la mía. Mi duda es: ¿Puedo hacer lo mismo con los templates de ThemeForest? He visto vídeos en el cual si se puede, pero se tiene que importar el xml. Entonces ahí esta el problema, me falla. He probado con varios templates de ThemeFores y me sale el mismo error.

    Si a usted no le sucedió lo mismo, quisiera que me diga que estoy haciendo mal. Estaría muy agradecido si me ayudara.

    Saludos.

    Responder
    • Naylín
      23 noviembre de 2012 a las 12:40 pm

      Hola Adrián!

      Siento no poder ayudarte directamente, pues no he usado el theme que me comentas. Te sugiero que vayas directamente a la sección de soporte del theme que escojas del ThemeForest, y les comentes tu duda que seguro te ayudarán. En eso sí tenemos experiencia, hemos preguntado cosas y suelen responder bastante rápido.

      Un abrazo,
      Naylín

      Responder
  11. kliffor
    30 enero de 2013 a las 11:08 pm

    Hola me encantan estas plantillas, y lo mejor es que estas son compatibles con los moviles. quisiera un consejo, quiero desarrollar una pagina web, compatible con ordenadores, tambien moviles. utilizando html5 y css3, ademas de eso utilizaria el asp.net o php y el mysql? o cual seria lo mas adecuadoo, gracias por su respuestaaa

    Responder
    • Daniel
      1 marzo de 2013 a las 1:25 pm

      Hola kliffor!

      Qué usar en cada página depende de los requisitos de cada página. Pero por lo general aconsejo usar WordPress, un gestor de contenido desarrollado en PHP y MySQL.

      Saludos!!

      Responder
  12. arturo
    13 marzo de 2013 a las 8:19 am

    busco una plantilla para una revista de aspecto periodístico; la que pones aquí es buena pero busco una un poco mas elaborada, con un carrusel tal vez, ojalá puedas subir una como la que menciono.

    Responder
    • Daniel
      20 octubre de 2013 a las 2:48 pm

      Hola Arturo!

      Te sugiero que busques dentro de esas páginas webs que venden plantillas, las tienen categorizadas.

      Saludos!!

      Responder
  13. J.B
    14 marzo de 2013 a las 9:40 pm

    Hol@,

    Estoy buscando alguna plantilla para una web de una peluqueria , podrias
    decirme donde puedo encontrar algo.

    Responder
    • Daniel
      20 octubre de 2013 a las 2:54 pm

      Hola J.B!!

      Te sugiero que busques dentro de esas páginas webs que venden plantillas, las mismas que ponemos aquí.
      O sea, da clic en cualquiera de las plantillas que ponemos aquí, y luego navega por la página hasta encontrar la plantilla que te convenga para la peluquería.

      saludos!!!

      Responder
  14. Francisco Cruz
    23 marzo de 2013 a las 11:19 pm

    Hola, me agrada tu post, hace mucho busco una plantilla que tenga que ver con un negocio de eventos: Quince Años, bodas, Decoraciones, Accesorios para bodas y Quince años, etc… he buscado y no logro encontrar… gracias te agradeceria si me ayudas… Bendiciones y saludos desde el +503

    Responder
    • Daniel
      7 abril de 2014 a las 8:18 pm

      Hola Francisco!

      Un vez que entres en una de las páginas proveedoras de plantillas, navega por las categorías. Seguro encontrarás lo que buscas.
      Suerte!

      Saludos!

      Responder
  15. Vero
    24 abril de 2013 a las 4:16 am

    Hola que tal?
    me gustaria saber se tienen plantilla de tienda on line de producto( con la posibilidad de elegir color y talla) y de venta en pesos Argentino.
    Muchas gracias
    quedo al espera de una respuesta.
    Saludos Vero

    Responder
    • Daniel
      7 abril de 2014 a las 8:19 pm

      Hola Vero!

      Un vez que entres en una de las páginas proveedoras de plantillas, navega por las categorías. Seguro encontrarás lo que buscas.
      Suerte!

      Saludos!

      Responder
  16. Santiago
    3 julio de 2013 a las 2:55 pm

    Estimados, estoy por activar una nueva web pero necesito alguna plantilla simple. La cuestión que mi hosting es de solo 20 MB.
    Es posible instalar algún blog ó plantilla en ese espacio?? Solo necesito una home. Por ej. para instalar wordpress me pide como espacio mínimo 50 mb.
    Gracias y felicito por la web

    Responder
    • Daniel
      20 octubre de 2013 a las 3:04 pm

      Hola Santiago!!

      20 MB es muy poco espacio para una página web, deberías contratar un hosting mayor. Si quieres que te sugiera alguno ponte en contacto conmigo.

      saludos!!!

      Responder
  17. Santander de Quilichao
    17 octubre de 2013 a las 8:22 am

    Muchas gracias por tu valioso tiempo para publicar este recurso que esta muy bueno, pero me queda una duda en cuanto al formato de los archivos, son para instalar en wordpress o algún cms.?

    Gracias de nuevo.

    Responder
    • Daniel
      30 octubre de 2013 a las 12:42 pm

      Hola Santander!!

      Eso depende cada plantilla. Debes leer las característica de cada plantilla para saber si valen o no para ser usadas con WordPress.
      Por ejemplo, en la primera plantilla dice literalmente.
      “The theme is available as both WordPress ….”

      Un abrazo!

      Responder
  18. Gerardo Reyes
    1 noviembre de 2013 a las 6:27 pm

    Excelentes plantillas Naylín gracias por compartir quiero usar una para jimdo de hecho

    Responder
    • Zuzel Amelia Gorostiaga
      1 noviembre de 2013 a las 6:37 pm

      Hola Gerardo!

      Nos alegra que te sea útil el artículo para elegir una plantilla para tu sitio.

      Un abrazo!

      Responder
  19. Pingback: ¿Qué es WordPress? 8 Razones para crear tu Sitio Web con WordPressSoluciones4Web

  20. esteban
    6 abril de 2014 a las 6:33 pm

    Pues si tu profesión se basa en copiar a los demás, de la misma manera que lo haces con los links de las plantillas, ¡menuda profesionalidad!

    Responder
    • Daniel
      7 abril de 2014 a las 8:23 pm

      Hola Esteban!!!

      No entiendo bien a qué te refieres. El artículo es para mostrar un grupo de plantillas que existen en el mercado. Tienen un link hacia las páginas donde se pueden adquirir. Es nuestra forma de ayudar a nuestros seguidores.

      Cualquier duda que tengas avísanos, con mucho gusto te ayudaremos.

      Un saludo!!

      Responder
  21. Jhon
    13 abril de 2014 a las 4:03 pm

    Buenos dias, tenes alguna plantilla para colegio Infantil… Saludos

    Responder
1 Pings/Trackbacks para "40 Plantillas gratis HTML5 y CSS3"
Deja un comentario

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notificare los nuevos comentarios por correo electrónico.
Cómo Vivir de tu Pasión con la Ayuda de Internet
Introduce tu nombre y correo electrónico. Recibirás en tu email COMPLETAMENTE GRATIS el eBook “Cómo Vivir de tu Pasión con la Ayuda de Internet"
¿Qué hacen los Emprendedores de Éxito en internet ?
Introduce tu correo y obtendrás COMPLETAMENTE GRATIS este Excelente eBook. Además, recibirás en tu email Contenido de Gran Valor sobre Cómo Ganar Dinero con la Ayuda de Internet.
Email
Print