Los 3 mejores generadores de botones CSS3

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

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

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

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.

Microsoft vs Apple [Imágenes]

Microsoft y Apple han tenido rivalidades desde hace décadas, aunque tuvieron una relación bonita en sus inicios todo luego se vino abajo y desde entonces sus usuarios se han peleado por cual es la mejor empresa, cual tiene el mejor software, el mejor programa, la mejor forma de hacer las cosas.

La verdad es que como todo en la vida, las dos empresas tiene sus pro y sus contras, ventajas y desventajas, productos, software y dispositivos que compiten en el mercado con sus falencias y también con sus mejores características para atraer al usuario.

A continuación les dejo 3 imágenes que ejemplifican la competencia entre las dos empresas, tanto de hardware y software, saquen ustedes mismos sus conclusiones:

microsoft-vs-apple2

¿Es mejor tener 20 o 6 botones diferentes para controlar tus dispositivos?

microsoft-vs-apple

¿Un diseño único o decenas de variaciones de lo mismo con mínimas variaciones?

microsoft-vs-apple0

¿Más botones y tamaño para tener la misma funcionalidad?

Vía: Twitter

SimCity estilo Pixel art

Olivier Huard fue contratado por Electronic Arts con el lanzamiento de Sim City para crear el arte del juego pero con el estilo Pixel Art que tanto nos encanta y no recuerdas nuestras mejores épocas de los juegos clásicos, para crearlo empezó desde el primer Sim City para inspirarse y tener mejor la idea de como quedarían las creaciones, luego vio el arte de Sim City 2000 para mejorar todavía más la vista de las imágenes y la perspectiva.

Pueden ver a continuación el resultado final de su trabajo, un muy buen resultado porque se puede apreciar el nivel de detalle y  fidelidad con el juego:

zoomsim1 zoomsim2 zoomsim3 zoomsim4 zoomsim5 zoomsim6 zoomsim7

Project: SimCity

Generador de imágenes de perfil para Facebook, Twitter, Pinterest y más

Las avatares e imágenes en nuestros perfiles de redes sociales pueden decir mucho de nosotros, por eso quiero recomendarles una herramienta genial llamada Social Media Image Maker que nos permite crear todas las imágenes de perfil, portadas y avatares para nuestros perfiles sociales en un par de segundos.

AP Social Media Image Maker

El uso de esta herramienta es muy sencillo, solo tenemos que elegir el servicio para el cual deseamos crear las imágenes y automáticamente cargará los formatos estándar de cada secci´no del perfil. Por ejemplo, para Facebook se puede elegir de crear una foto de portada, una foto de perfil, fotos para compartir en el muro, etc., todo con el tamaño acorde al diseño de Facebook.

efectos portada

Lo bueno es que el sistema tiene una herramienta especialmente diseñada para crear las imágenes, con solo arrastrar y soltar la imagen a la ventana del navegador se habilitará la herramienta para recortar la imagen, redimensionar, aplicar efectos muy cool, y luego guardar la imagen a la cputadora o directamente enviarla a las redes sociales.

Enlace: Social Media Image Maker

Visto en WebResourcesDepot

CSS Matic: generar estilos CSS con degradados, esquinas redondeadas, texturas y sombras online

CSS Matic

CSS Matic es una genial herramienta destinada a diseñadores que nos permite generar estilos CSS con efectos muy avanzados, todo online y gratis.

Editor gradientes: Con esta herramienta podemos crear geniales degradados con CSS, ya sea partiendo de los diseños predefinidos o creando el nuestro. Podemos cambiar los colores, la orientación del degradado, la opacidad, etc.

Radio bordes: Con esta se pueden crear cajas con bordes redondeados, totalmente con CSS y de forma muy sencilla. Podemos elegir el radio del borde, los colores, etc.

Textura suciedad: Nos da la posibilidad de crear texturas con efecto de «suciedad». Permite personalizar el ruido y su densidad, como así también los colores.

Editor sombras: Con esta herramienta se pueden aplicar efectos de sombras muy cool. Podemos personalizar la altura y el ancho de la sombra, el radio, el color, y un par de cosas más.

En fin, es un set de herramientas muy útiles que deberían tener en sus marcadores.

Enlace: CSS Matic

Visto en CodigoGeek

Kit de vectores con elementos para crear infografías

Kit de vectores para infografias
Hoy en día las infografías están muy de moda, y si están interesados en realizarlas les quiero dejar un kit gratuito de vectores con elementos para infografías.

En el kit van a encontrar todo tipo de vectores, desde cintas, gráficos de torta, mapas, símbolos horarios y muchas cosas más que les pueden ser de muchísima utilidad su manejan Photoshop.

Enlace: Free Vector Infographic Kit

Visto en Kabytes

Palette Extractor: Extraer la paleta de colores de una imagen

Palette Extractor
Palette Extractor es una genial aplicación web que nos permite extraer la paleta de colores de una imagen, esto es especial para los diseñadores que quieren extraer la «esencia» de una imagen y utilizarla luego en sus creaciones.

El uso es muy simple, sólo tienen que seleccionar la imagen que desean analizar y subirla al sitio, luego les pedirá que elijan un área específica para procesar (pueden seleccionar la imagen completa si lo desean). Luego de unos segundos el sistema les mostrará la composición de colores en un gráfico de tortas y la paleta más abajo.

Enlace: Palette Extractor

Cómo convertir tu letra escrita a mano en una fuente para la computadora

Handwriting font creator 2
El sitio MyScriptFont.com ofrece un servicio muy partciular llamado Handwriting font creator, que nos permite convertir nuestra letra manuscrita en fuentes para utilizar en la computadora.

Lo bueno de esta herramienta es que es muy simple de utilizar, y el único trabajo que nos tenemos que tomar es el de dibujar una por una las letras que van a formar parte de la fuente.

Lo primero que hay que hacer es descargar la plantilla en formato PDF, imprimirla y rellenar todos los cuadros con nuestra letra manuscrita. Tengan cuidado de no pasarse de los cuadrados en color gris.

handwriting font creator

Una vez que hayan terminado tienen que escanear la hoja en escala de grises a 300dpi com lo dice la plantilla. Una vez que lo hicieron suban la imagen al sitio y automáticamente les creará la fuente.

Pueden elegir entre tres formatos de fuente: TTF, OTF y SVG.

Enlace: Handwriting font creator

Visto en Make Use Of

SubtlePattern: Un bookmarklet que permite probar distintos patterns en cualquier sitio web

SubtlePatters es un bookmarklet muy interesante destinado a diseñadores que quieren probar distintos patterns o fondos en sitios web. Su funcionamiento es muy sencillo, sólo tenemos que arrastrar el bookmarklet a la barra de marcadores del navegador, y cuando estemos en un sitio web y queramos probar los patterns tenemos que darle al bookmarklet para que se cargue el menú.

Subtle Patterns

Cuando lo hagan verán que se carga un pattern al azar y aparece un menú desplegable con las distintas categorías disponibles. Allí podemos ir eligiendo entre las categorías y navegando entre los distintos patterns que hay en cada una mediante las flechitas. A medida que van seleccionando un pattern distinto este se cargará como fondo del sitio.

Por último, si les gusta algún fondo lo único que tienen que hacer para descargarlo es darle con el botón derecho al fondo y elegir ver imagen de fondo o la opción adecuada para su navegador, luego guardan la imagen y listo.

Enlace: SubtlePatterns

Visto en WebResourcesDepot

Simple Icons: Excelente set de íconos sociales y de internet

Simple Icons
Hoy quiero deajarles un excelente set de íconos llamado Simple Icons, que consta de 96 íconos con un diseño muy bueno que nos hace recordar a Windows 8. Son 96 íconos en PNG en 11 medidas diferentes que van desde los 16×16 px a los 4096×4096 px.

Como se ve en la imagen, hay íconos de todo tipo, ya sea de redes sociales como Facebook, Twitter, Reddit, Pinterest, LinkedIn; de sitios de internet como eBay, Blogger, DropBox; también de marcas como Apple, MediaTemple, Yahoo, Google, y muchísimos más.

Enlace: Simple Icons