css3 Archives - Punto Geek

Espectacular juego de salto en HTML5

11 noviembre, 2013 por Juanguis

Hoy les presento otro ejemplo más de las historias y creaciones espectaculares que se pueden desarrollar con HTML5, CSS3 y con la ayuda de algunos servicios de Google como Maps y Google+, así como tecnologías libres como Node.js, Redis.

El juego se llama Map Dive, es sencillo pero espectacular en su ejecución, eres un muñequito con un cohete que caes desde el cielo a alguno lugar del mundo mientras colecciona estrellas y pasa a través de varios círculos en el cielo, también puedes pasar a través de algunas elementos sorpresas que te harán el juego más entretenido, el personaje se puede controlar con el mouse o con las teclas de las flechas del teclado.

A continuación algunas de las imágenes del juego:

Screenshot_85

Screenshot_84

Les recomiendo cerrar otras pestañas para jugarlo para que la experiencia sea más fluida y saludable en términos de gamer ;)

Map Dive

Bender bailando hecho solo con CSS3

7 noviembre, 2013 por Juanguis

Hoy les traigo otro ejemplo de las capacidades increíbles que tiene la nueva versión de CSS, en su versión número 3 puso a disposición la capacidad de crear animaciones, formas, figuras, sombras, degradados y otras maravillas que antes tan solo eran posible con imágenes o con Flash.

El ejemplo de hoy es el más divertido que he publicado hasta la fecha, se trata de uno de los protagonistas de la serie geek y nerd Futurama, que aunque algunos digan que Los Simpsons es más geek pero eso es otra historia.

En este ejemplo Bender está compuesto por muchas etiquetas div y span, cada articulación, cada ojo, cada brazo, cada mano corresponde a una y gracias a las capacidades de CSS3 se empieza a crear el esqueleto, los tamaños y luego la animación completa, los más impresionante del ejemplo es que hasta los ojos, cejas, dientes y su antena receptora se animan con armoniosa sincronización.

El ejemplo completo lo pueden ver en Liveweave y comprobar que no se trata de ningún hack o uso de JavaScript, tan solo CSS puro y mucha creatividad y por supuesto afición a la serie animada.

Todos los mouse de Apple hechos con CSS

21 octubre, 2013 por Juanguis

Este es otro post mostrándoles las capacidades de la nueva versión de CSS3, en esta oportunidad les traigo todos los modelos del Magic Mouse de Apple, desde el Macintosh Mouse lanzado en 1986 hasta el relativamente nuevo Apple Magic Mouse, todos, absolutamente todos creados con solo CSS3.

Los resultados son increíbles, muy increíbles, y no es porque sean de Apple, no, si no por todos los detalles tan bien logrados en todas las versiones, desde el cable, los colores, las sombras, el bixel de los mouse, es increíble, y todo esto realizado solo con CSS.

A continuación algunos ejemplos para que se hagan una idea de lo que les hablo:

Pueden ver la galería completa en Apple Mice

Logos de empresas creados solo con CSS3

14 octubre, 2013 por Juanguis

No me cansaré de mostrarles casi todos los días la capacidad de las nuevas tecnologías web, hace poco les comentaba sobre detallados símbolos de superheroes creados solo con una etiqueta HTML y el resto del trabajo lo hacía el CSS, en su versión número 3.

Hoy les traigo otra muestra de las cosas que se pueden llegar a crear solo con CSS3, en esta oportunidad son los logos de varias empresas: Apple, Dropbox, Evernote, Github, Twitter, Facebook y LinkedIn creados a partir de varias formas y figuras recreadas con variadas técnicas de CSS3, en la página con el demo de los logos se puede observar el truco detrás del logo al pasar el mouse por encima del elemento.

El proyecto se puede utilizar libremente en tus proyectos, tan solo basta con descargar los archivos necesarios desde su repositorio en Github e incluirlos donde los necesites.

Logos in Pure CSS

Símbolos de superheroes creados solo con CSS3

14 octubre, 2013 por Juanguis

Esto si que es increíble, Jordano Aragão es un conocedor avanzado de CSS3 y además aficionado a los superheroes que creo 4 símbolos de 4 superheros utilizando un solo elemento HTML, la etiqueta div con una clase y mucho CSS3 avanzado, los resultados son espectaculares y muy reales, se ven como si se tratase del trabajo profesional de un dibujante.

Gracias a que es CSS3 pueden ver el código completo y empezar a jugar con el para aprender como fue logrado tal efecto para un solo elemento HTML.

Reactor Arc de Iron Man

Green Lantern

Spiderman

Captain America’s Shield

Si jugaron un poco con el código se darán cuenta de que el truco es utilizar las nuevo pseudoelementos :after y :before, los cuales pueden tener cualquier cosa adentro, como degradados, fondos o letras.

Vía: Google+

Generador visual de CSS3 válido

30 septiembre, 2013 por Juanguis

Las Web está evolucionando, está creciendo, está mejorando, está avanzando, está más Web que nunca.

Con la llegada de CSS3, en conjunto con HTML5, es cada día más común ver sitios web realmente impresionantes, con diseños increíbles, efectos muy bonitos para la vista e interactividad como nunca antes, ofreciéndole al usuario una experiencia única en todos los sentidos.

Para crear estos sitios web es necesario conocer bien las tecnologías que lo hacen posible, en este caso una de ellas es CSS3, la hoja de estilos en cascada para Internet, en la versión 3 incorporaron muchos elementos nuevos, como las transformaciones 3D, transiciones, animaciones, sombras, perspectiva, entre otros.

Si estás interesado en jugar un poco con estás tecnologías te recomiendo Create CSS3, un generador de estilos CSS3 válidos, la aplicación web tiene más de una decena de efectos disponibles en CSS3, cada uno se puede personalizar fácilmente y obtener en tiempo real una vista previa del efecto al lado derecho.

De esta forma ya no tienes excusa para probar e implementar las nuevas tecnologías que están por fin a nuestro alcance y con las cuales se puede crear experiencias enriquecidas para nuestra hermosa Web.

Create CSS3

Ebook gratis: Guía Completa de CSS3

25 julio, 2013 por Juanguis

Guía Completa de CSS3
Una de las mejores formas de aprender algo que nos gusta es leyendo, por eso les quiero dejar un interesante recurso que es una guía sobre CSS3, con el cual podrán leer un buen rato e incorporar conocimientios, sobre todo los que recién están empezando.

El ebook está titulado como Guía Completa de CSS3 y en él van a encontrar mucha información para aprender sobre CSS3 de forma muy sencilla gracias a los ejemplos incluidos.

El libro consta de 63 páginas y lo pueden descargar gratis en PDF o bien leerlo online.

Enlace: Guía Completa de CSS3

Visto en Soft & Apps

Animaciones CSS3 bellas y fáciles de implementar con magic animations

30 junio, 201329 junio, 2013 por Juanguis

Hace algunos años si queríamos animar algo en nuestro sitios web teníamos que recurrir principalmente a imágenes gif, de esta forma se hacía el sitio web más vistoso, pero para otras personas era una total molestia ver tantas cosas moviéndose sin sicronización.

Ahora todo es diferente, aunque todavía las imágenes gif son muy utilizadas ya no se habla de animaciones de los elementos, si no de transiciones entre ellos, es decir, si haces scroll en la página, algún elemento se mueve para ajustarse a este movimiento, como la barra de navegación que se puede ampliar y establecer al principio de la página para que siempre esté disponible.

Crear estas animaciones con solo CSS3 no es tarea sencilla, es un tema avanzado y realmente no hay muchísima información para implementarlas de forma directa y rápida en tu sitio web, pero alguien ya se dio cuenta de esto y creo Magic CSS3 Animations, un archivo CSS que contiene 55 animaciones y transiciones diferentes para incluirlos en tu proyecto web fácilmente.

Lo primero que debes hacer es descargarlo de su repositorio en Github, luego incluir el archivo CSS en tu documento HTML

<link rel="stylesheet" href="yourpath/magic.css">

Ya con esto se puede combinar fácilmente con JavaScript o jQuery para crear la animación cuando se pase el mouse por encima de un elemento, por ejemplo:

$('.yourdiv').hover(function () {
  $(this).addClass('magictime puffIn');
});

Magic CSS3 Animations

Comprende mejor la etiqueta background de CSS3

27 abril, 2013 por Juanguis

La etiqueta background existe desde la primera versión de CSS, se mejoró su funcionalidad en la versión 2, y ahora con la versión número 3 de la especificación la etiqueta ha introducido mejoras considerables que permiten hacer muchísimas cosas con las imágenes de fondo de cualquier elemento HTML que antes se tenían que hacer con programas procesadores de imágenes como Adobe Photoshop, Fireworks o GIMP.

En la última versión de la etiqueta ahora es posible crear backgrounds múltiples a cualquier elemento HTML, cada uno con su imagen, dimensión y posición diferentes, aunque esto es posible desde Julio del año pasado, son pocos los que conocen sus posibilidades y es un poco más complicado implementarlos de forma correcta por la cantidad de posibilidades que ofrece gracias a la combinación de todas sus propiedades como: color, imagen, repetir la imagen, posición, tamaño y otras.

Si deseas empezar a utilizar esta propiedad en tus proyectos te recomiendo CSS Background Size una página creada para probar de forma rápida y directa varias configuraciones de la etiqueta background y ver fácilmente en vivo lo que significan dichos atributos, solo basta jugar un poco con los diferentes tamaños, orientación de la imagen y posición del fondo para ver el resultado.

CSS Background Size

Los 3 mejores generadores de botones CSS3

24 abril, 2013 por Juanguis

CSS3 es un lenguaje que nos permite hacer cosas muy originales y elegantes sin tener que adicionar imágenes, hoy en día ya es posible aplicar todo tipo de efectos con solo usar un poco de CSS3.

Una de las bondades de CSS3 es que podemos crear botones con efectos muy originales, todo sin usar nada más que código. A continuación quiero dejarles una selección con los 3 mejores generadores de botones CSS3.

Estas 3 herramientas son muy fáciles de usar y nos ahorran casi al 100% el trabajo, solo hay que tener un poco de buen gusto, un ratito de tiempo para mezclar colores y efectos y listo.

bestcssbuttongenerator.com

Con un nombre un poco pretencioso (pero bien puesto), Best CSS Button Generator es una herramienta muy completa que nos permite crear botones CSS3 partiendo de algunas plantillas prearmadas a las cuales podemos ir editando a gusto con los colores y efectos que más nos usten.

Nos permite personalizar los tamaños de fuente, el border radius, el tamaño horizontal y vertical, agregar sombras, blur, posición del texto, y una gran cantidad de opciones que tenemos que dedicarles un ratito para obtener un resultado óptimo.

css3button.net

CSS3 Button Generator es otra de las herramientas que quiero recomendarles, también tiene un «showcase» donde podemos encontrar muchísimos ejemplos de otras personas y que podemos mixear a gusto cambiándoles los colores, fuentes y más.

Nos permite elegir los colores del degradado, agregar sombras interiores y exteriores, agregar sombras a los textos y muchas cosas más. Una vez que terminan con la edición del botón a la derecha pueden copiar el código listo para usar en sus proyectos.

css3buttongenerator.com

La última herramienta también es muy recomendable por su simplicidad de uso, vamos paso por paso personalizando fuentes y texto, luego la parte del box, agregando sombras, cambiando colores, modificando bordes, cambiando colores de fondo y por último el hover.

Una vez que hemos terminado con la edición podemos descargar el código listo para usar desde la parte inferior de la página.

Conclusión

Las 3 herramientas son básicamente para lo mismo, por ahí la primera opción es un poco más completa y la que personalmente recomiendo si quieren lograr buenos resultados, pero será cuestión que se tomen un rato y prueben las 3 a ver cuál les gusta más.