Blog de Tecnología e Internet

Posts con la etiqueta ‘css3’

Colección de 45 plantillas HTML5 y CSS3 gratis

Como siempre digo, si os dedicáis al mundo del diseño y desarrollo web, es bueno disponer de diferentes alternativas para abordar un proyecto y acabarlo lo más rápido posible ofreciendo una gran calidad. En ese sentido, es interesante tener a mano alguna que otra colección de plantillas HTML, bien sea para lograr un poco de inspiración o directamente para comenzar el desarrollo de nuestro trabajo a partir de un template.

En esta ocasión os traemos una colección de 45 plantillas HTML5 + CSS3 totalmente gratuitas, las cuales podréis utilizar para uso comercial o personal. Podéis encontrar dicha recopilación en la web de 1stwebdesigner.com . Como comprobaréis, la mayoría de las plantillas disponibles están destinadas al mundo corporativo, aunque existen otras posibilidades. Además, siempre podemos adaptar cualquiera de ella a nuestras necesidades.

Cabe mencionar que entre los templates disponibles se encuentra alguno que usa el popular responsive design, con lo que se adaptará de maravilla a cualquier tamaño de pantalla (ya sea un monitor de PC, una tablet o un smartphone).

Crea atractivas presentaciones de tus proyectos en CSS3 con impress.js

Está claro que a la hora de hacer documentos para ilustrar presentaciones, el software más utilizado es PowerPoint y otros similares. Sin embargo, en mi opinión, son herramientas que están bien para hacer algo sencillo, pero si lo que necesitas es algo que impresione a “tus espectadores” tienes que hacer algo más.

En ese sentido podemos optar por utilizar Prezi, que para quien no lo conozca le invito a que le eche un vistazo y observe los fantásticos efectos de transición que se pueden obtener. A pesar de ello, de lo que queremos hablar en esta ocasión es de impress.js ; se trata de una herramienta que nos permitirá crear presentaciones muy similares a las de Prezi, utilizando para ello las transformaciones y transiciones CSS3 soportados por los navegadores modernos.

Podéis ver un ejemplo de lo que os digo en el siguiente enlace; como podéis comprobar es un resultado bastante bueno, y que rompe la típica monotonía de los programas estilo PowerPoint. Para obtener más información acerca de este proyecto podéis visitar su espacio en Github. Leer más →

Animatable: Fantástica colección de animaciones CSS3

En las webs actuales estamos más que acostumbrados a ver elegantes animaciones y transiciones que hacen que la navegación por parte del usuario sea más agradable. La idea es que cada vez se utilice más CSS y no otras alternativas para realizar estos efectos.

Si no sabéis exactamente a que me estoy refiriendo, os animo a que visitéis la colección de transiciones CSS3 que podemos ver en Animatable. Como veréis, son transiciones que no deberían ser demasiado complicadas de implementar, sin embargo, muy agradables de ver. Podemos apreciarlas pasando el ratón por encima de cada uno de los 39 ejemplos disponibles; otra opción que tenemos es verlas todas a la vez, pero os recomiendo que utilicéis la primera ya que podemos obtener un resultado no deseado.

Si deseamos ver cómo implementar alguna en concreto, no tendremos más que inspeccionar el código fuente para hacernos una idea, o si lo preferimos, podemos descargarnos el código fuente completo desde el espacio en Github del autor. Además, lo mejor de todo es que alguno de los ejemplos nos puede servir de inspiración para utilizar en alguno de nuestros proyectos.

Crear animaciones web en HTML5 con Adobe Edge

En estos últimos años, con la incorporación de nuevos estándares de programación web, y la llegada de nuevos sistemas operativos para móviles, la tecnología Flash es cada vez más criticada por la red, siendo rechaza totalmente por muchos programadores, por problemas como el posicionamiento en buscadores de los proyectos resultantes de emplear esta tecnología.

Bien es cierto que Adobe nunca ha dejado de defender Flash, basándose muchas veces en que es un complemento casi imprescindible a la hora de reproducir vídeos online. La compañía Adobe, mucho más lejos de abandonar su firme apuesta por esta tecnología ha presentado Edge.

Adobe Edge permite a los desarrolladores web crear contenidos animados directamente sobre HMTL 5 sin necesidad de recurrir a Flash. Edge busca responder a la necesidad de crear contenidos poco pesados a la par que atractivos y dinámicos, intentando colarse en el tremendo hueco que ha dejado la tecnología Flash en los dispositivos móviles. Los programadores que opten por Edge podrán desarrollar animaciones con el sistema de “timeline” que tiene Flash, pero generando el resultado en SVG, JSON y CSS3. Leer más →

Generador de Sombras CSS

No es que sea muy partidario yo de usar este tipo de herramientas, pero he de reconocer que para ciertos casos pueden llegar a ser útiles. Estoy hablando de un Generador de Sombras CSS. En este caso se trata de una herramienta online que nos permitirá, de forma visual, “diseñar” una sombra para un div y obtener el código resultante para usar en nuestro proyecto.

Para acceder a esta herramienta gratuita basta con hacer click en el siguiente enlace, y estaremos en disposición de comenzar a cambiar parámetros. Como podéis ver en la imagen superior, podemos cambiar desde el estilo de sombra, hasta el tamaño de la caja (div),… así como diversos parámetros de la sombra, tal y como pueden ser opacidad, blur, desplazamiento en el eje X, en el eje Y,...

Una vez consideremos que la sombra está bien para nuestras necesidades, no nos quedará nada más por hacer que copiar el código CSS que se nos ofrece y pegarlo en nuestra hoja de estilos. En definitiva, esto es algo que podríamos hacer nosotros directamente con código, pero que ciertamente, si estamos empezando a entender las sombras CSS o simplemente queremos ahorrarnos un poquillo de tiempo, creo que puede ser de gran utilidad.

Información

Aviso legal y Política de Privacidad

Contenido publicado bajo licencia Creative Commons

Licencia de Creative Commons