Si alguna vez has buscado plantillas web gratis, sabes que la mayoría parecen sacadas de otra época o llenas de errores. Pero hay un sitio que rompe con eso: HTML5 UP.
Este proyecto, creado por AJ, el mismo tipo detrás de Carrd y Pixelarity, ofrece un montón de plantillas modernas, limpias y totalmente gratuitas. Sí, gratis de verdad —sin registros raros, sin versiones “pro”, y sin sorpresas.
Cada plantilla está hecha con HTML5, CSS3 y un poquito de JavaScript, sin frameworks ni dependencias molestas. Todo está bien organizado y fácil de editar, incluso si apenas estás empezando con el desarrollo web. Además, son 100% responsive, así que tu sitio se verá bien en el celular, la tablet o la compu.
Algunos de mis favoritos son:
Massively – ideal para blogs o portafolios.
Forty – perfecta para páginas de empresas o agencias.
Editorial – estilo revista digital, súper elegante.
Lo que más me gusta de HTML5 UP es que no te hace perder tiempo. Descargas la plantilla, cambias el contenido, y listo: tienes una web con look profesional sin tener que pelearte con un CMS o pasar horas ajustando código.
iHover (35 efectos)
Para mi la mejor librería de la colección, aporta animaciones muy elegantes y profesionales. No usan JavaScript y todo lo realizan con CSS3 y HTML
Image Hover Effects (16 efectos)
Bonita colección de 16 «hover effects» con subtitulos. Dispones de el HTML y CSS necesario para emular los efectos en tus proyectos.
Captión Hover Effect (7 efectos)
Transiciones suaves y bonita son las que ofrece esta librería. Si quieres usarla en algún proyecto en su sección de tutoriales te explican como poder usarlas.
Image Caption Hover Animation (4 efectos)
En este enlace encontrarás 4 animaciones para cuando colocan el cursos sobre tus imágenes.
Toda las animaciones son en CSS3, no usan JavaScript, por lo que son ideal para no tener problemas de compatibilidad con navegadores.
Image Hover (44 efectos)
Solo con CSS esta biblioteca posee 44 efectos hover. En esta librería encontrarás efectos de diapositivas, zoom, desenfoque o desvanecimientos entre otros. Además de esta versión gratuita ofrecen una versión premium por 14€ que ofrece un total de 216 efectos.
Si piensas que tu web esta lista para ser lanzada a la red y que reciba oleadas de visitantes, antes te recomiendo que visites la web de Web Developer Checklist y pases los test que te ofrecen para asegurarte que tu página web cumple con todos los estándares.
elSelect es una herramienta creada con MooTools (Framework web orientado a objetos para JavaScript) que te permitirá personalizar el elemento SELECT de tus formularios gracias a CSS.
En su web te explicaran como instalarlo y usarlo., y de esa manera dar algo de diseño a esas flechas tan poco estéticas que salen por defecto. Si tienes conocimientos básicos de HTML y CSS no tendrás ningún tipo de problema y así poder tener unos formularios totalmente personalizados.
Estupendo recopilatorio de 10 plantillas en formato HTML5 y CSS3 el que comparte DJ Designer Lab, podréis personalizarlas a vuestro gusto y usarla en vuestros proyecto de forma totalmente gratuita. También os pueden servir para curiosear sus entrañas y así aprender de otros diseñadores web (esto es lo que haré yo ^^).
Si hace unos días hablamos de una aplicación web para crear fondos para tu web usando un patrón mediante CSS3hoy os presento una aplicación web que os permitirá dotar a tus diseños de degradados sin necesidad de utilizar imágenes. Con Ultimate CSS Gradient Generator creareis gradientes mediante CSS por lo que lograreis mejores tiempos de carga de vuestros sitios y reduciréis el tamaño de espacio usado en vuestro servidor.
Buscando reducir el tiempo de carga y el número de peticiones que se realizan al servidor cuando en nuestra web tenemos un fondo creado con un patrón (pattern) basado en un gráfico (jpg, gif, png,…) Lea Verou ha creado una web donde comparte y recopila patrones en CSS3.
Si deseas usar estos patrones en tus proyectos debes tener en cuenta que no todos los navegadores son compatibles y podrían no funcionar correctamente. Os dejo los navegadores compatibles por si deseáis probarlos: Firefox 3.6 +, Chrome, Safari 5.1, Opera 11.10 + y + IE10
Con el tutorial (inglés) que comparte Codrops vamos a crear una elegante interface con CSS3 y jQuery donde la imagen de fondo de la misma ira cambiando según pasemos el puntero del ratón por las diferentes secciones.
El código para crear este background image slide es compatible con Google Chrome, Firefox, Opera, Safari, IE8, IE7 e incluso IE6.
Desde el blog de webexpedition18.com comparten un simple y completo tutorial para realizar bajo CSS3 un menú desplegable. El menú desplegable sera creado sin la necesidad de utilizar JavaScript, ya que usa sólo propiedades CSS.
Para ver una demostración de como quedaría el menu una vez finalizado el tutorial, pulsa este enlace. Si el resultado es de tu agrado te dejo los enlaces al tutorial (inglés) y a los archivos fuentes.
Codrops nos facilita 3 ejemplos en CSS3 para dotar a tus tablas de mas fuerza y estilo. Lograremos gradientes sin necesidad de usar imágenes y mejorar todas las partes de la tabla.
Para que te hagas una idea de lo que te ofrecen los códigos CSS que comparte Codrops visitar su Demo y si son de tu agrado Descargalos.
