Crea botones con CSS3 válido gráficamente con CSSButton

CSS Button

Los botones siempre han tenido un papel sumamente importante en las interfaces de usuarios tanto en software de escritorio como en la web, juegan un rol fundamental en la usabilidad de la aplicación. Los botones fueron hechos para hacer click, para hacer pulsados, una analogía de lo botones que tenían los aparatos eléctricos de hace décadas, un botón significa acciones, vínculos, llamados a hacer algo por parte del usuario.

Crear botones para la Web no es una tarea sencilla, hay muchos detalles que cuidar y actualmente existe muchísimas opciones para hacerlos, puedes crearlos desde cero desde un editor gráfico como Photoshop o Illustrator y luego convertirlos  a código o puedes utilizar una herramienta como CSSButton, una aplicación web con una interfaz sumamente fácil e intuitiva de usar que te permite crear botones con CSS3 válido con muchísimas opciones para personalizar, desde el borde del botón, hasta la animación entre los estados normal, hover y active del botón, pasando por la fuente, la sombra del botón o del texto y por supuesto las dimensiones o el fondo del botón.

Ten MUCHO CUIDADO de no hacer click en Browse o Rockstars porque perderán todas las modificaciones en las que hayan estado trabajando.

Si necesitas algo todavía más personalizado puedes importar directamente tú HTML y CSS al generador.

Cuándo hayas terminado de personalizar tu botón solo basta con darle click en Source para obtener el código CSS3 válido que podrás aplicar a tu botón en tu proyecto.

Si se crean una cuenta podrán guardar los botones que vayan creando así como compartirlos en la plataforma con el resto de los creadores, también puedes navegar las creaciones de los demás en la pestaña Browse y descargarlos libremente o usarlos como plantilla para tu botón.

CSSButton

Disponible Internet Explorer 10 para Windows 7

2-26-2013 12-55-20 PM

Con el lanzamiento de Windows 8 Microsoft también publicó una nueva versión de Internet Explorar, la número 10 que con mejoras sustanciales, como un rendimiendo más alto con Javascript, corrector ortográfico integrado, así como el soporte para nuevos estándares como CSS3.

El día de hoy Microsoft por fin ha publicado la versión de Internet Explorer 10 para Windows 7 con mejoras en su rendimiento reduciendo el uso de la CPU y la memoria mejorando la batería del portátil, Internet Explorer 10 también incluye soporte para las nuevas tecnologías como HTML5, CSS3, DOM, Web Performance y Aplicaciones web en general.

Entre la lista de nuevos estándares que soporta están:

  • CSS3: Sombras de texto CSS, transformaciones 3D CSS, transiciones y animaciones CSS3, gradientes CSS3 y filtros SVG.
  • Diseño responsive: Grids CSS3, flexbox, multicolumna, posiciones flotantes y regiones, formularios HTML5, controles y validaciones de campos de entrada.
  • Mejoras de Aplicaciones Web: Soporte para aplicaciones offline con almacenamiento local, Cache HTML5, Web Sockets, historia HTML5.
  • Aplicaciones web interactivas: Soporte para nuevas tecnologías como posiciones flotantes CSS3, drag-drop en HTML5, Media queries y eventos de apuntadores.

Internet Explorer 10 está disponible es más de 90 lenguajes para 32 y 64 bits desde la página oficial de Microsoft o luego a través de Windows Update, con esta actualización Microsoft impulsa a Internet Explorer como un navegador más respetable en la web.

Descarga Internet Explorer 10

Guía práctica de HTML y CSS básico y avanzado

1-29-2013 9-25-32 PM

Shay Wove es un diseñador y desarrollador front-end que ha creado «A Practical Guide to HTML & CSS», como su nombre lo indica es una guía práctica para aprender HTML y CSS con muchísimos ejemplos y documentación completa acerca de cada característica de los dos lenguajes Web, la guía empieza desde los más básico y teórico hasta las últimas especificaciones de los dos lenguajes: HTML5 y CSS3, pero no solo se queda ahí, además del nivel básico donde aprendes todo lo necesario para crear una página web con las mejores prácticas también tiene un segundo nivel más avanzado, donde puedes aprender Rendimiento, Posicionamiento, Selectores complejos de CSS, Diseño Responsive (muy popular y necesario en este año 2013) y hasta jQuery también con variedad de ejemplos muy prácticos y reales.

A Practical Guide to HTML & CSS

13 experiencias web espectaculares creadas con HTML5 y CSS3

Form Follows Function

HTML5 y CSS3 son las últimas versiones de los dos lenguajes principales de la Web, estas versiones tienen muchísimos nuevos elementos y funcionalidades que permiten crear nuevas experiencias, aplicaciones y videojuegos web llenas de contenido dinámico, táctil, 3D, con audio y vídeo de alto rendimiento.

Poco a poco han surgido diseños y aplicaciones web que aprovechan todas estas capacidades para crear experiencias enriquecidas y únicas que antes no eran posible.

Jongmin Kim es uno de los desarrolladores web más talentosos en HTML5 y ha creado un sitio para demostrarlo, se llama FFF, Form Follows Function, que incluyen 13 experiencias web espectaculares gracias a los elementos Canvas y Transformaciones CSS.

No se pierdan la oportunidad de conocer de primera mano todo lo que se puede crear con HTML5 y CSS3.

Form Follows Function

Super Mario Bros 3 creado puramente con CSS3

Mozilla Developer Network es la comunidad de desarrolladores de Mozilla, la empresa encargada de Firefox, donde cualquier persona puede contribuir con ideas de desarrollo para la Web, también cuenta con una enorme documentación de los estándares Web, desde HTML básico hasta las nuevas tecnologías de HTML5 como Geolocation, WebSockets, o Media Queries.

Una de sus grandes secciones es la de Demos, donde cada cierto tiempo la comunidad sube ejemplos que utilizan por completo estas nuevas tecnologías para crear experiencias interactivas, ayer subieron una muy particular, Super Mario Bros 3 desarrollado por completo con CSS3, aprovechando las nuevas características de Media Queries, la cuales permite mostrar diferente información dependiendo del tamaño del navegador.

Lamentablemente no es jugable por completo, una lástima.

Mozilla Developer Network: Media Query Mario

Ganate un curso de HTML5 y CSS3 [Últimos 2 días]


Como ya les había contado hace unos días, en colaboración con EducacionIT estamos sorteando un curso de HTML5 y CSS3. Mañana es el último día para registrarse en el sorteo, así que queríamos recordarles para los que no lo hicieron.

Recuerden que pueden participar desde cualquier parte del mundo, ya que, en el caso de ganar, pueden elegir el curso de forma presencial o a distancia.

Para participar solo tienen que entrar en este enlace y llenar el formulario con sus datos. El ganador se anunciará el 18 de julio en el blog oficial de EducacionIT.

CSS3p: Convierte tus diseños de Photoshop a CSS3


CSS3p es un plugin para Photoshop que les puede ahorrar mucho tiempo a la hora de diseñar, ya que les da la posibilidad de convertir un diseño de Photoshop a CSS3, listo para ser utilizado en cualquier sitio web. La buena noticia es que este plugin es totalmente gratuito, algo valorable porque la mayoría de las herramientas de este tipo son de pago.

En el video de abajo explican el proceso de instalación y su funcionamiento para que tengan una mejor idea de las cualidades del plugin.

Tiene soporte para Photoshop CS3, CS4, CS5 y CS6, tanto en Windows como Mac.

Enlace: CSS3p

Visto en WebResourcesDepot

Ganate un curso de HTML5 y CSS3 con Punto Geek y educacionIT


HTML5 y CSS3 es lo que se usa hoy en día para diseñar sitios web, y el que no tiene estos conicimientos está quedando rezagado, es muy importante saber cómo utilizar estos lenguajes para crear páginas web optimizadas y con estándares actuales. La buena noticia es que Punto Geek con EducacionIT tenemos el agrado de contarles que vamos a hacer un sorteo por un curso de HTML5 y CSS3 gratis.

Lo bueno de este curso es que puede participar gente de cualquier parte del mundo, porque el ganador tendrá la posibilidad de elegir hacer el curso en modalidad presencial o a distancia a través de una plataforma de cursos online que tiene el instituto (yo mismo la he probado y es excelente).

Bases y Condiciones

  • Sólo se acepta una inscripción por persona.
  • Hay tiempo para registrarse hasta el martes 17 de julio inclusive.
  • A cada persona registrada se le brindará un código numérico único de registración al sorteo.
  • El ganador corresponderá a las últimas cuatro cifras del primer premio de la Lotería Nacional de la Argentina del sorteo matutino del miércoles 18 de Julio.
  • El ganador se dará a conocer en el Blog de EducacionIT el mismo miércoles 18 de Julio.
  • En el caso de no haber ganadores con cuatro cifras se tendran en cuenta las últimas tres cifras.
  • El ganador obtendrá como premio un curso de HTML5 y CSS3 totalmente gratis.
  • El ganador podrá elegir la fecha de inicio que desee ya sea en la modalidad presencial o a distancia.
  • El ganador podrá hacer uso del premio hasta el 31 de Diciembre de 2012.
  • En el caso que el ganador haya sido invitado por otro amigo ambos recibirán el premio (un curso para cada uno).
  • Una persona no puede ser invitada por más de un amigo.
  • El premio es intransferible (no se puede pasar a otra persona).
  • El premio no se puede canjear por el equivalente en dinero.
  • El premio no se puede canjear por otro curso.

Para participar solo tienen que entrar en este enlace y llenar el formulario con sus datos. El ganador se anunciará el 18 de julio en el blog oficial de EducacionIT.

CSS Gradient Button: Generador de botones con degradados en CSS


CSS es muy potente, y más aún CSS3, con el cual se pueden hacer todo tipo de cosas, sólo es cuestión de acostumbrarse a utilizarlo. En este caso les quiero recomendar una genial herramienta llamada CSS Gradient Button, con el cual pueden generar botones con degradados totalmente en CSS, sin imágenes.

Su uso es tan simple que sólo consta de un paso, elegir el color que más les guste y automáticamente se generará el código listo para copiar y pegar. Aunque también tienen una sección para personalizar por completo el botón, donde podemos cambiar color por color, elegir un texto para el botón, cambiar el radio de las esquinas, y muchas cosas más.

Enlace: CSS Gradient Button